Supported widget snippet fields in Amazon Connect that are
customizable
The following table lists the communications widget snippet fields that you can customize. Example code after the table shows how to use the snippet fields.
| Snippet field | Type | Description | Additional documentation |
|---|---|---|---|
|
String |
Mandatory, auto-generated |
n/a |
|
String |
Mandatory, auto-generated |
n/a |
|
Array |
Mandatory, auto-generated |
n/a |
|
Object |
Customize how your website renders and launches the hosted widget icon |
Customize widget launch behavior and button icon for your website hosted in Amazon Connect, later in this topic |
|
Function |
Callback function to enable JWT security on your website |
Step 2: Specify the website domains where you expect to display the communications widget, earlier in this section. |
|
Function |
Pass the customer display name when initializing a contact |
Pass the customer display name when an Amazon Connect chat starts, later in this section. |
|
Object |
Override the default CSS styles |
Pass custom properties to override the defaults in the communications widget in Amazon Connect, later in this section. |
|
Number |
The total duration of the newly started chat session |
Default: 1500 - Min 60, Max: 10080 |
|
Boolean |
Enable the debugging logs |
Default: false |
|
String |
Connect can do translations for supported ISO-639 format language codes. For more
information, see
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes |
Default: en_US. Supported: 'de_DE', 'en_US', 'es_ES', 'fr_FR', 'id_ID', 'it_IT', 'ja_JP', 'ko_KR', 'pt_BR', 'zh_CN' |
|
String |
Handshake value between iframe and customer website csp policy. Example: customer csp allows 1234 nonce value, iframe which pulls in another script must have the same 1234 nonce value so that browser knows it is a trusted script by iframe parent site. |
Default: undefined |
|
Object |
Customize the widget layout and transcript |
For more information, see Additional customizations for your Amazon Connect chat widget, later in this section. |
|
Object |
Pass attributes to the contact flow directly from snippet code, without any JWT setup |
For more information, see Pass contact attributes when a chat initializes. |
|
Object |
Override the System or Bot display name and logo configurations set in the Amazon Connect admin website. |
For more information, see How to pass override system and bot display names and logos for the communications widget . |
|
Function |
Callback function to access contactId. For example, add an event listener to handle scenarios like calling the StopContact function with the contactId when the browser tab is closed or maintaining chat persistence with a previous contactId. |
For more information, see Persistent Chat Demo using `contactMetadataHandler` |
|
Object |
This allows to execute callbacks for the exposed lifecycle events. |
Exposed events are |
|
String |
Message to be sent to the newly created chat. Length Constraints: Minimum of 1, Maximum of 1024. |
To invoke the Lex bot configured in the contact flow using an initial message, modify the Get customer input flow block by selecting the Initialize bot with message option. For more information, see How to configure Get customer input flow block. |
|
Object |
This enables the Authenticate Customer flow block |
For more information, see Enable customer authentication. |
|
Boolean |
Enable mocking typing indicator for Lex Bot messages. |
Default: false |
The following example shows how to add snippet fields to the HTML script that adds the chat widget to your web site.
(function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
amazon_connect('snippetId', 'snippetId');
amazon_connect('styles', /* ... */);
amazon_connect('registerCallback', {
'event_Name_1' : callback(function),
'event_Name_2' : callback(function),
...
});
amazon_connect('initialMessage', 'Your initial message string');
// ...
amazon_connect('snippetFieldHere', /* ... */);
<script/>
