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>

Adding Script Dynamic to the DOM

The snippet can also be inserted into DOM dynamically (e.g. only on pages that need it) and removed by id (id of the iframe that holds the widget is forethought-chat). An example of adding it dynamically is below:

var head = document.head || document.getElementsByTagName("head")[0],
   forethoughtscript = document.createElement("script");
   forethoughtscript.setAttribute(
     "src",
     "https://solve-widget.forethought.ai/embed.js"
   );
   forethoughtscript.setAttribute("type", "application/javascript");
   forethoughtscript.setAttribute(
    "data-api-key",
    "YOUR_KEY"
   );
   forethoughtscript.setAttribute(
    "data-ft-foo",
    "BAR"
   );
document.head.appendChild(forethoughtscript);

Mobile SDK Installation

The recommended mobile solution is to use our Android and iOS SDKs found here. Installation and Usage guides can be found there.

• iOS - https://github.com/Forethought-Technologies/solve-ios
• Android - https://github.com/Forethought-Technologies/solve-android

For more information see the SDK Installation article here

Manipulating Widget Behavior 

Passing Custom Parameters

To pass parameters that can afterwards be used in conditions that determine behavior, add an attribute prefixed with data-ft- to the script tag.

In the example below, we"ve added a usertype parameter to the script.

<script src="https://solve-widget.forethought.ai/embed.js" type="application/javascript" data-api-key="123-abc-123-abc" data-ft-usertype="paid"></script>

There are a few ways your engineering team can get necessary values to pass in - take them from the page contents (e.g. if user email is specified in the profile section on the page), by making an API call to one of your services and using the response value, or by taking relevant info from the window object if it is there.

The attributes are all strings, so if you"re looking to pass a list of values, pass it as a delimiter-concatenated string of “|” (e.g.  for [1,2,3] pass “1|2|3”)

Additional Attributes

• config-ft-theme-color - string - Overrides the theme color. Example - "#7b33fb"
• config-ft-agent-avatar-image - string - Overrides the image URL to be used as the avatar image next to messages.
• config-ft-widget-header-image - string - Overrides the image URL to be used as the header image.
• config-ft-widget-button-image - string - Overrides the image URL to be used as the widget button when the widget is closed.
• config-ft-widget-header-title - string - Overrides the header title.
• config-ft-greeting-message - string - Overrides the initial greeting message when the widget is open.
• config-ft-proactive-prompt-greeting-message - string - Overrides the proactive prompt greeting message. Does nothing if proactive prompt is not enabled.
• config-ft-hide-nav - string - "true" | "false" (default) - Hides the widget header.
• initial-intent-id -string - conversation will start the specific workflow ID put here

• hide-intercom-widget - string - "true" (default) | "false" - when false, Intercom will not be hidden on page load.

Display Script Parameters

• full-screen - true or false (default)
  • When true, the widget will open automatically on load.
• hidden - non-empty string, default: absent
  • When set to a non-empty string, the widget iframe will get hidden automatically on load.
• hide-ft-after-zd - true or false (default)
  • Will keep Solve UI Widget hidden after a Zendesk chat is ended.

Positioning Script Parameters

• position-x - left or right (default)
• position-y - top or bottom (default)
• offset-x - horizontal offset - default 20px (can be px or rem)
• offset-y - vertical offset - default 20px (can be px or rem)

Parameters Interacting with Forethought Widget

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.

• window.Forethought("widget", "open") - open Solve UI Widget - picture below
• window.Forethought("widget", "close") - close Solve UI Widget - picture below
• window.Forethought("widget", "hide") - hide Solve UI iframe
• window.Forethought("widget", "show") - show Solve UI iframe

               Opened                                                                         Closed

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}}