Launching to your Website

Rob Hayes
Rob Hayes

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.

CleanShot_2022-11-14_at_09.52.38.gif

Creating a Chat Assistant

When you create a new assistant, you you can select the Chat option from the modality list.

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. 

mceclip3.png

 

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.

mceclip2.png

 

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.

mceclip4.png

 

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.

mceclip5.pngmceclip6.png

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.

Was this article helpful?

37 out of 66 found this helpful

Have more questions? Submit a request

Comments

1 comment

  • Comment author
    Jose

    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')

    0

Please sign in to leave a comment.