Guides
Join DiscordTrust Center

Overview

Suggest Edits

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 installed on your website in minutes.

Web Chat is the easiest way to deploy your Voiceflow Chat agent into production, and is perfectly suited for on-website assistants or support agents. For more customizability, look into the open source web chat here or into custom deployments of Voiceflow through text or voice based interfaces.

Configuring the Web Chat's Appearance and Functionality

In the Integrations view of your agent, 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 agent 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
  • Voice Interface - enable voice input and output of deployed webchat. NOTE: voice input for hosted deployments is limited to Chrome browsers. We will be looking to expand support in the future.
  • 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 - 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 following visual elements of your web chat experience:

  • Main Color — apply your primary brand colours to the chat window by providing a HEX color. This color will be applied 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.

Note that these appearance customizations are entirely distinct from the Prototype Tool's appearance and branding.

Installing the Web Chat on your Website

Installation for your Web Chat is easy - copy the JavaScript Snippet provided in the Installation section, and paste it anywhere in your website's code between the … tags. You must include the snippet on every page you want your Assistant to appear on.

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. From the designer view for any workflow, 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.

Supported HTML elements (in the text step)

All the tags below are supported when used in the text step on Web Chat. 

['a','audio','b','blockquote','br','code','dd','del','details','div','dl','dt','em','h1','h2','h3','h4','h5','h6','hr','i','img','input','ins','kbd','li','ol','p','picture','pre','q','rp','rt','ruby','s','samp','section','source','span','strike','strong','sub','summary','sup','table','tbody','td','tfoot','th','thead','tr','tt','ul','var','video']

Note: By default, dangerous HTML elements such as Iframe require additional configuration.

Enabling dangerous HTML elements

Disclaimer: Enabling dangerous HTML elements enables cross-site scripting vulnerabilities (XSS). This means that if you are using someone else's code, it may provide them full access to your private information. Do this at your own risk and only use your own code. You can read more on XSS vulnerabilities and how to prevent them here.

To enable dangerous HTML elements such as Iframe's, set the following configuration to true on your Web Chat installation code. By default, this value is false.

window.voiceflow.chat.load({
  ...
  allowDangerousHTML: true
});

In your own code

You can go a bit further and use your own front-end code to interact with the Web Chat widget as you might also want to populate a specific user ID and/or use the available API to do the following actions:

  • Load a specific agent
  • Set configuration settings when the Web Chat widget loads
  • Open or close the Web Chat widget
  • Show or hide the Web Chat widget launch bubble
  • Interact with the Dialog Manager API and show the result within the Chat Widget
  • Show or clear proactive text messages above your widget launch bubble

Updated about 2 months ago