Do It Yourself – Tutorials – Flow.ai Integration Tutorial – Web Widget – Testing & Customizing Your Bot

by | Sep 17, 2020 | 0 comments

Do It Yourself – Tutorials – Flow.ai Integration Tutorial – Web Widget – Testing & Customizing Your Bot

by | Sep 17, 2020 | Do It Yourself - Build Your Own Website | 0 comments

Do It Yourself – Website Tutorials



For more information about using the web widget, see our documentation: https://flow.ai/docs/integrations/web
and our integration page:
https://flow.ai/webwidget

The Flow.ai Web Widget Chrome Extension:
https://chrome.google.com/webstore/detail/flowai-web-widget-preview/lccfpplelddnbkngagkagchplhjfmcio

Testing and customizing your bot, A Flow.ai Integration Tutorial for web widget.
To create a Web Widget for your project, go to integrations, click on the Add Integration button and select Web widget and API.
Click on Customize to see all the customization options. Here you can change the language, color, images and some texts of the web widget.
We will set our language to English, add an opening message, and set the color to the color of our own brand to give you an example.
Let’s also position our web widget in the bottom right corner of theweb page and we will give it a custom image so it looks less standard.
For custom images you also have the option to change the width and height, but for now 60px by 60px looks just fine.
If your image isn’t a square, we recommend uploading it with a transparentbackground, because otherwise it would have a white square background.
As you can see, there are 3 types of images you can upload. The chat button is the image that will be shown on the website when the chat hasn’t been opened yet, the widget header will be placed on top of the chat, just below its title, and the avatar is the little icon within the chat that appears next to the messages that the chatbot sends. We will show you how all 3 types of images will look in your web widget in a moment.
If you want your chatbot to always start the conversation with an eventyou made, check the Trigger Event box and select the right event.
This is ideal for starting all conversations with your Welcome Flow for example.
You can also disable the upload button, the reset chat button, and evendisable text input so your users will be forced to make use of thebuttons you made. You can also disable the 140 character limit.
If you go to the Pro-Active settings, you can add a proactive message.This message will be shown after a specific time period next to the chat iconwhen people are on the web page but haven’t clicked on the chatbot yet.
By setting the delay to 3 seconds, we make sure that when somebody visits a web page with our web widget on it, the proactive message will be sent after 3 seconds.
In order to test your bot and see how your customizations will look, simply click on save and go to the web widget preview.
If you prefer previewing the web widget on an actual websiteinstead of on a white page, go back to the integration,go to Install and copy your ClientID.
Then go to any web page, for example your own website. Use ourbrand new Chrome extension and paste your ClientID. You canfind the link to our Chrome extension in the description of this video.
Normally your chatbot appears right after you press “Add Widget”, but wepreviously added a delay of 3 seconds to our bot in the customization options.

Music Info: Corporate Inspiring – AShamaluevMusic.
Music Link: https://www.ashamaluevmusic.com/music-for-fashion

source