You can quickly launch your Assistant as a Web Chat for your website using our 1-click Web Chat integration. This will allow you to get a fully-automated web chat experience on your website in minutes.
Creating a Web Chat Assistant
When you create a new assistant, you you can select the Web Chat option from the Channels list.
When you select the Web Chat channel, it will use the Voiceflow NLU option by default. This is the same NLU we are using in the Test Tool and Prototypes, so your live Web Chat experience will behave exactly as it does when you're testing it in your Assistant.
Configuring the Web Chat's Appearance and Functionality
In the Integrations view of your assistant, found in the left-nav or with keyboard shortcut 4, you can find the configurations settings for your Web Chat.
General Functional Configuration
In the General section, you can customize the following items for your chat experience:
- Name - use this to brand your Assistant for you customers. This will appear in the header of your chat window and below your Assistant Image within the chat body
- Description - use this to provide a brief overview of what function your Assistant can provide. This will appear below the Name in the chat body
- Chat Persistence - select whether you want to remember a user's previous conversations with your Assistant
- If this is set to 'Never forget', then each time a user open the Web Chat, they will see any previous interaction they've had
- If this is set to 'Forget after tab closed or reloaded', then each conversation a user has with your Assistant will start with an empty chat window, and users will not be able to access previous conversations
- Position - determines where on your website the Assistant will appear:
- Position - left-bottom or right-bottom corner of the website
- Side Spacing - the number of px spacing between the chat icon and chat window and the selected Position side of the browser window
- Bottom Spacing - the number of px spacing between the chat icon and chat window and the bottom of the browser window
- Powered By - show or hide the 'Powered by Voiceflow' message at the bottom of your Web Chat window
Appearance Configuration
In the Appearance section, you can customize the follow visual elements of your web chat experience:
- Main Colour - apply your primary brand colours to the chat window by providing a HEX colour. This colour will be applies to the chat icon, chat header, chat responses like Buttons, and to the user's chat messages
- Launcher - customize the icon displayed in the chat icon. For best results, use a square PNG with a transparent background
- Assistant Image - provide a visual identifier for your Assistant or brand. This image will appear in the chat header and at the top of the chat body, alongside the Assistant Name and Description
- Assistant Avatar - this is the icon that will appear next to your Assistant's messages in the chat body
Installing the Web Chat on your Website
Installation for your Web Chat is easy - copy the JS Snippet provided in the Installation section, and paste it anywhere in your website's code between the <body> ... </body> tags. You must include the snippet on every page you want your Assistant to appear on.
Enabling and disabling the Web Chat
You can quickly enable and disable your Web Chat from appearing on your website using the toggle button found in the top-right corner of the Web Chat Integration page.
Publishing a Version of your Assistant to your Web Chat
In order for your Assistant to run in your Web Chat, you need to first save a Production Version of your assistant. On your Assistant's Design page, you can find the Publish button in the top-right corner, give your new version a name, and hit the Publish button.
Anytime you make changes to your Assistant, by adding intents or utterances, changing paths, adding new response content, you will need to publish a new version of your Assistant for it to appear in your Web Chat.
<%= heading %>
Comments
1 comment
Is not working for Angular, someone can help?
VM23635 bundle.mjs:252 Uncaught TypeError: Cannot read properties of undefined (reading 'type')
at c (VM23635 bundle.mjs:252:21019)
at f (VM23635 bundle.mjs:252:21459)
at VM23635 bundle.mjs:318:84457
at VM23635 bundle.mjs:368:1510
c @ VM23635 bundle.mjs:252
f @ VM23635 bundle.mjs:252
(anonymous) @ VM23635 bundle.mjs:318
(anonymous) @ VM23635 bundle.mjs:368
zone.js:209 Uncaught TypeError: Cannot read properties of undefined (reading 'chat')
Please sign in to leave a comment.