🆕Web V2
We've been working on creating a new widget with a more modern feel and optimized mobile performance. Below you can find out all about it!
Last updated
We've been working on creating a new widget with a more modern feel and optimized mobile performance. Below you can find out all about it!
Last updated
Customers who have configured bots on our former widget will not be transferred automatically.
From 31st October 2024, all Chatlayer customers using the Web channel will need to switch to the new web widget, Web V2. This means that Web V1 will be removed from our codebase. Learn everything about moving from V1 to V2.
To create a web channel with the new widget:
Navigate to the Channel page on your bot.
Press the Add channel button in the top right.
Look for 'Web'.
Select Web.
Click on Next.
The first two tabs Basics and Appearance will allow you to change the settings and looks of your bot. That way you can ensure the branding of your new widget corresponds to the one your company uses.
On the 'Basics' page you can make a number of changes:
The Title and Subtitle of the widget will appear at the top of the widget. Make sure to leave them empty if you don't want any title to appear.
Enable text input is on by default and will allow your customer to type text towards your bot. Make sure to turn this off if you want your bot to be used solely as a click bot.
Enable audio input allows the user to send voice snippets to the bot using the record button at the bottom right corner of the widget.
Enable file upload will make the paperclip to the right of the input-box appear. This will allow your customer to send files to your chatbot.
Enable sound notifications activates audible alerts for your bot's message replies.
On the Appearance page you can make a number of changes:
Change the position of your widget to Bottom right or Bottom left.
Customize your Brand color, Conversation color and Action color.
Launcher is the image to show in the launcher button.
Header logo is the image shown in the header.
Bot avatar is the default image for the bot avatar.
Agent avatar is to show as the default agent avatar.
Make sure that you click on Save after changing your bot's appearance.
To preview your Web widget after styling it:
Click Save.
Press Preview.
Your bot will open on a CodePen page where you can test it.
After having configured your widget you can start embedding it on your website.
To embed your website widget:
Click on the Installation tab.
You'll see an HTML script under Embed your widget. Copy and paste this script in the header section of every HTML page of your website where you want it to appear.
Additionally, place the provided snippets at the end of the body section on each HTML page of your website.
Make sure that the 1st and 2nd snippets are pasted to your page.
To set the language in an iframe, add the desired language as a query parameter to the iframe URL. This allows you to force your widget to display in that specific language.
For example:
Please let us know what you think of the new Web widget here.
