The web widget supports a wide variety of reply actions as seen in the messaging capabilities grid. Below is a detailed view of each capability.
Web widget displays any unicode emoji sent in text messages. Mobile users can use the emoji keyboard on their device to send them.
Web widget displays Google Maps link of the location. Location messages include longitude and latitude coordinates.
Location docs - JS template docs
Web widget displays cards. Cards must include title and optionally can include subtitle, media, action and buttons.
Card docs - JS template docs
Web widget displays quick replies. They are ideal for yes / no type of questions.
To get started, first add a Web widget integration to your project
- Choose the project to which you would like to connect WhatsApp using the top left drop-down menu:
- Go to the “Integrations” section and press the “+” sign:
Select the Web widget integration
Copy and paste the embed code within the HTML of your web page,
Here is a simple example showing the embed code:
<html> <head> </head> <body> <script src="https://widget.flow.ai/w/[your token]==/flow-webclient-1.1.2.min.js"></script> </body> </html>
There are various customization options for the web widget that can be applied within the dashboard settings
Specify the language of the web widget. This will update button labels etc to the specific language.
The message displayed in the center when opening the chat widget
Specify the color used for the background of the header and button
Adjust the location on the screen where the button will be displayed
Choose the type of button to use. The default is a message balloon icon colored by the tint color.
You can also change the button appearance by uploading a custom image. This must be a square image with a 256x256 pixel resolution.
Disable upload button
This option allows you to prevent users to upload and send any files using the upload functionality.
Change the default title and description that are shown in the header section of the widget
By default we show a bot avatar for each message sent by the chatbot. You can disable this entirely or upload a custom avatar image. Make sure the image is square. Preferred size is 228x228 pixels.
Users are limited by 140 characters for a message intentionally There is an option to disable this behavior and allow text of any length to be send.
Note: Having a 140 character limit makes it impossible for users to copy and paste long texts like the content of an e-mail
This security setting is turned on by default and reduces the risk of another party trying to send messages by using just a threadId.
We recommend leaving it on for client side connections. If you make use of the flowai-js SDK we'll store and track the client nonce automatically. If you just connect using the Socket API you'll need to make sure you store and send the nonce with each HTTP request.
Note: This setting prevents sharing a threadId between clients. For use cases where this is required, we you can disable this setting.
There are additional settings and functionality you can use to customize how the web widget behaves on your website.
You can configure a pro-active message to be displayed using the dashboard settings. If you want more control you can also do this using the following on-page settings:
Automatically triggering an event is especially useful for showing a welcome message or pushing a dialog into a specific flow when a user opens the web widget.
__flowai_webclient_autoTriggerEvent. The following example will automatically trigger the event
SHOW_WELCOME whenever a user opens the web widget for the first time.
Note: Opening events are not considered as a new session. Read how we measure sessions.
Khoros Flow has improved the security mechanism for the web widgets by incorporating Socket Security Layer (SSL). SSL helps to validate the one-time token for the customer web requests.