Messengers

icon picker
Widget

The
@Platform
has the ability to connect the
@Bot
to a customized widget and display it on your website. The widget is created similarly to other
@Project Channel
s.

Connection

Widget Configuration on the Platform

You need to create and configure a
@End Channel
with a
@Widget
connector.
Click on the agent settings button. ​
image.png
Click the Add channel button. ​
image.png
The
@End Channel
selection panel will open. Select
@Widget
. ​
image.png
The
@Project Channel
creation panel will open. ​
image.png
On the Settings tab:
Optionally, enter a title for this
@Project Channel
in the Name field with the placeholder New channel. ​
image.png
Optionally, add domains where the widget will be available in the Domain field. ​
image.png
If you specify a domain, the widget will not work on other domains. This will save you from theft of the widget if the site data is compromised.
You can specify either the domain itself or the pattern in the format *.domain.com. In this case, the widget will work on all subdomains of domain.com.
You will need the snippet in the Snippet field to . You can copy it by pressing the COPY WIDGET CODE button. ​
image.png
Go to the Design tab. ​
image.png
Enter a name for your
@Bot
in the Bot name field
image.png
Enter a title for the widget in the Widget title field ​
image.png
Specify the widget color in the Widget color field. Widget color can be set in two ways:
HEX-code, for example #ADFF2F; ​
image.png
the name of the color. ​
image.png
Optionally, add a picture for the widget in the Company Logo field. If you don’t add a picture the widget will be displayed with a default image. ​
image.png
If necessary, specify a placeholder hint in the Placeholder in the expanded widget field. If you do not specify a hint, the text “Type a message” will be automatically inserted in the input field. ​
image.png
If necessary, add a welcome message from the
@Bot
. To do this, toggle the Send welcome message on widget expanded switch and enter the message in the Bot's welcome message field. ​
image.png
To save the
@Project Channel
without activating it, click the CREATE button. ​
image.png
To save and activate the
@Project Channel
, click the CREATE & ACTIVATE button. ​
image.png
The
@Project Channel
will be saved and activated if the
@Agent
is trained;
If the
@Agent
is not trained the
@Project Channel
will be saved but not activated.
To cancel
@Project Channel
creation, click the CANCEL button. ​
image.png

Installing the Widget on Your Website

To install the widget on your website, and paste it into the <body> in your code. ​
image.png
the
@Project Channel
if it is not already activated.
After that, the widget will appear on your website. ​
image.png

Editing and Deleting Agent Channel

To edit an
@Project Channel
, click on its icon on the
@Agent
card. ​
image.png
To edit any field, click the field and enter a new value.
To apply changes to an activated
@Project Channel
, click the APPLY button. ​
image.png
To deactivate the
@Project Channel
, click the DEACTIVATE button. ​
image.png
To apply changes to a non-activated
@Project Channel
, click the SAVE button. ​
image.png
To apply changes and activate the
@Project Channel
, click the SAVE & ACTIVATE button. ​
image.png
Changes will be applied and the
@Project Channel
will be activated if the
@Agent
is trained;
If the
@Agent
is not trained the
@Project Channel
will be saved but not activated.
To cancel making changes, click the CANCEL button. ​
image.png
To delete the
@Project Channel
, click the DELETE button. ​
image.png

Communication

Mapping of Channel variables from widget
18
Channel variable
End channel
Variable in the body of an incoming request from a channel
Peculiarities
1
channel_visitor_id
Widget
a string generated by
@Platform
,
@channel_visitor_id
equals
@channel_chat_id
2
channel_visitor_firstname
Widget
No
3
channel_visitor_lastname
Widget
No
4
channel_visitor_phone
Widget
No
5
channel_visitor_email
Widget
No
6
channel_visitor_account
Widget
No
7
channel_visitor_auth
Widget
No
8
channel_visitor_source
Widget
a link to the page where the widget is embedded
9
channel_reply_to
Widget
no
No results from filter
Communication in widget
20
Functionality
Channel
Availability
Description
1
channel_chat_id
Widget
Yes
a string generated by
@Platform
,
@channel_visitor_id
equals
@channel_chat_id
2
Messages will reach the Bot User if the Agent writes first in an existing chat
Widget
Yes
3
Buttons
Widget
Yes
4
Transfer to operator
Widget
No
5
Transferring files as files from the Agent
Widget
No
6
Transferring files as links from the Agent
Widget
Yes
7
Receiving a file from the Bot User into a script
Widget
No
8
Receiving geolocation from an Bot User in a Script
Widget
No
9
Delivery of messages over 1000 characters from Agent to Bot User
Widget
Yes
10
Markdown usage
Widget
No
11
Mailing with Notification
Widget
No
12
Get a link to the lead source
Widget
Yes
@channel_visitor_source
contains a link to the page where the widget is embedded
No results from filter

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.