Alterra.ai JS Widget

Add widget to your website with two lines of Javascript code

<script src="https://next.alterra.ai/home/static/webchat-1.1.js"></script>
<script>Alterra.embedChat( <JSON SETTINGS OBJECT> );</script>

Attributes

Settings object has the following keys:

Attribute Type Description Default
clientId String Client key
facebookPageId String Facebook Page ID
popupTimeout int Chat window popup timeout in milliseconds (-1 to disable popup) 20000 (20 sec)
popupDismissalTimeoutDays Number Timeout in days before chat pops up again after being closed by user (-1 to disable dismissal) 14 days
iconText String Chat button text 'Need help?'
title String Chat window title empty
workingHours object Working hours json object (in Pacific time zone) {}
operatorFallback String Enable fallback to the chat with human operators. no fallback

At least one of clientId or facebookPageId fields should be present. Other fields are optional.

You can restrict showing the widget to non-working hours only. To do that, include the working_hours parameter, for example:

{"Monday": [8, 22], "Tuesday": [8, 22], "Wednesday": [8, 22], "Thursday": [8, 22],
 "Friday": [8, 22], "Saturday": [], "Sunday": []}

For every day of week you can provide a pair of integers, start and end working hours. Widget will only be shown outside of this time interval. If a day is omitted, widget is not shown on that day. To show the widget all day specify an empty list. All times are in Pacific Time.

Supported values for operatorFallback field:

Value Description
“intercom” Fallback to Intercom chat
“drift” Fallback to Drift chat

Articles that require operator fallback should be marked with action “operator-fallback:true”. Text of the article will be shown in widget history.

Connect Facebook page to Alterra FAQ Bot

To allow FAQ bot communicate with users through your Facebook page you have to link your pages with FAQ Bot.

Link your Facebook user account

At first you should link your Alterra account with your facebook user account that has admin privileges for your Facebook page. To do that, on the Settings page, you have to click the Facebok link under Link accounts: section.

Screenshoot 1

Facebook will ask for permission to manage Pages:

Screenshoot 2

If you have more than one page you can select which pages you want to link.

Screenshoot 3

Link your Facebook page

When you Facebook user account is linked you can see it on the Settings page. Then you can link specific pages to FAQ Bot. To do that, click on the Link pages button to the right of your Facebook account.

Screenshoot 4

In the dialog that opens select the page you want to link and click on the Link page button. After that you should see the linked page name on your Settings page.

Facebook Customer Chat Plugin

If you have Facebook page connected to Alterra FAQ Bot you can use Facebook Customer Chat Plugin to allow your visitors to interact with FAQ Bot on the website directly.

Requirements

To use the customer chat plugin, you must include the Facebook JavaScript SDK on the page where the plugin will be rendered.

For instructions on including the SDK, see Facebook JavaScript SDK Quickstart.

Setup Steps

To include the customer chat plugin on your webpage, do the following:

1. Whitelist the domain of your website

Domain Name and HTTPS Required

Domains must meet the following requirements to be whitelisted:

  • Served over HTTPS
  • Use a fully qualified domain name, such as https://www.messenger.com/. IP addresses and localhost are not supported for whitelisting.

For security reasons, the plugin will only render when loaded on a domain that you have whitelisted. Refer to whitelisted_domains reference to learn how to whitelist your domain programmatically.

To whitelist a domain, do the following:

  • Click Settings at the top of your Page
  • Click Messenger Platform on the left
  • Edit whitelisted domains for your page in the Whitelisted Domains section

2. Include the plugin on your webpage

You can add Facebook Customer Chat Plugin on your Page using Alterra’s JS Widget. For that you have to just provide your Facebook Page ID within settings object.

Or you can user the code provided by Facebook. Fot that include a div with the following attributes in your HTML:

<div class="fb-customerchat"
    page_id="<PAGE_ID>"
    ref="<OPTIONAL_WEBHOOK_PARAM>"
    theme_color="<HEX_COLOR_CODE>"
    logged_in_greeting="<GREETING_MESSAGE_FOR_LOGGED_IN_USERS>"
    logged_out_greeting="<GREETING_MESSAGE_FOR_LOGGED_OUT_USERS>">
</div>

By default, the greeting bubble will be shown on desktop and minimized on mobile. To minimize on desktop, add the attribute minimized = true.

For a complete list of attributes, see the Customer Chat Plugin reference.

Using the Setup Tool

For Page Admins, the Messenger Platform also provides an easy setup tool for customizing your customer chat plugin. To use the setup tool, do the following:

  1. Go to Page Settings > Messenger Platform
  2. In the ‘Customer Chat Plugin’ section, click the ‘Set Up’ Button.

The setup tool provides a simple UI for customizing the greeting message, theme color, displayed response time, and setting the whitelisted domains for the plugin.

Facebook Customer Plugin Setup tool

On completion, the setup tool automatically generates the code snippets that you can copy/paste to include the customer chat plugin in your webpage.

Offical documentation you can find on Facebook Developer Portal.

Use Alterra.ai Web Widget and Facebook Customer plugin together

If you have your Facebook page linked to Alterra FAQ Bot you can use Alterra Web Widget and Facebook Customer plugin together: Alterra Web widget for anonymous users and Facebook Customer plugin for users that logged in Facebook and want to share their contact.

To install both widgets on your website you simply have to:

  1. Include the Facebook JavaScript SDK on the page where the plugin will be rendered.

  2. Provide Facebook Page ID within settings object inside Alterra’s JS Widget code.