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
Client ID
At least one of these attributes should be present.
| Attribute | Type | Description |
|---|---|---|
| clientId | String | Client key |
| facebookPageId | String | Facebook Page ID |
Design and display settings
Customize your widget colors, icon, tooltip text, and more.
| Attribute | Type | Description | Default |
|---|---|---|---|
| primaryColor | String | Primary color (3 or 6-digit hex notation) | '#41FFCD' |
| secondaryColor | String | Secondary color (3 or 6-digit hex notation) | '#00316F' |
| chatIconUrl | String | Custom chat icon URL | empty |
| debug | Bool | Is debug mode on | false |
| tooltipText | String | Tooltip text for widget button | 'Need help?' |
| 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 |
| tooltipDisappearanceTimeout | Number | Time before tooltip’s disappearance in milliseconds (-1 to don’t hide tooltip) | 10000 (10 sec) |
You can further customize the shape and colors of the Alterra widget by applying additional CSS styles. Contact us at info@alterra.ai if you need help.
Working hours
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.
| Attribute | Type | Description | Default |
|---|---|---|---|
| title | String | Chat window title | empty |
| workingHours | object | Working hours json object (in Pacific time zone) | {} |
Handover from a bot to an agent
In situations when customers ask to escalate to an agent, you can pass conversations from the bot to agents.
| Attribute | Type | Description | Default |
|---|---|---|---|
| operatorFallback | String | Enable fallback to the chat with human operators. | no fallback |
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.
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:
- Include the Facebook JavaScript SDK on the page where the plugin will be rendered.
- Provide Facebook Page ID within settings object inside Alterra’s JS Widget code.
To learn more about how to Connect Alterra Answers to your Facebook page check out this guide.