Use these instructions to install the Forethought Solve Widget on any webpage you have administrator access to. If you don’t, just connect us with your web page administrator, and we’ll work with them to get this up and running!

Embedding the Widget on a Webpage

Your Forethought implementation engineer will generate an API token and share it with you via email or Slack.  Once you have it, follow these steps:

1. Add your API token to the data-api-key field in the HTML embed snippet below
2. Then place the snippet in the body of any webpage where you want the Forethought widget to appear.

// Widget embed script
<script
	src="https://solve-widget.forethought.ai/embed.js"
	type="application/javascript"
	data-api-key="Insert Api Token Here"
	></script>

Manipulating Widget Behavior with Javascript

By default, the Forethought widget will be displayed on any page where the embed snippet is present. You can change this and other behavior using the Javascript functions below.

// Expand widget: see 'Opened' picture below
Forethought('widget', 'open');

// Minimize widget: see 'Closed' picture below
Forethought('widget', 'close');

// Hide widget: don't show it on the page at all
Forethought('widget', 'hide');

// "Un-hide" or Show widget: display widget in 'Closed' form
Forethought('widget', 'show');

               Opened                                                                         Closed

If you want to hide the widget so that it isn't displayed when the page loads, and then only display it after the user has clicked a button, you can use the Javascript functions below or something similar.

// Hide widget on page load
document.addEventListener('DOMContentLoaded', function () {
  Forethought('widget', 'hide');
});

// Show widget on click
document.getElementById('myButton').addEventListener('click', function() {
  Forethought('widget', 'show');
});

Installing to Zendesk Help Center: Extra Options

Hide the Forethought Solve Widget from Unauthenticated Users

To make sure only signed-in users see the Forethought widget, wrap the embed snippet in a simple if-else block like this:

// Widget embed script: only show to logged-in Zendesk users
{{#if signed_in}}
  <script
    src="https://solve-widget.forethought.ai/embed.js"
    type="application/javascript"
    data-api-key="Insert Api Token Here"
    ></script>
{{else}}
{{/if}}