Installing the widget
How to customize the widget and install it on your website
Last updated
How to customize the widget and install it on your website
Last updated
To get started, go to Admin > Webchat of the relevant group:
There you will find the default configuration of the widget.
You can add a bespoke configuration to your widget to reflect your brand and messaging by following these easy steps.
On the right hand side panel you will see a view of the widget as it will display on your website, which updates after a few seconds to illustrate your latest settings.
On the left hand side of the configurator you will see various parameters that you can set by ticking the relevant box:
WhatsApp click to chat button - if you also have a WhatsApp Business Account and number configured on Converso, an option will appear that will allow you to add a button on the widget to give customers a choice to contact you over WhatsApp if they prefer
SMS chat button - similarly, if you have an SMS service and number configured on Converso, you can give your customers the option to contact you via SMS text via this button:
(Please note that if you only have webchat configured, customers only access the chat and chat list screen in the widget).
Display logo - when ticked, this displays your company logo, as saved under Settings > Business, at the header of the widget
Display business name - this will display your business name, as saved under Settings > Business.
Show "log-in" button (coming soon) - this allows your customer to login to retrieve their past messages, documents, invoices etc
Floating over the page - this enables the widget to float on the page and not move when the page is scrolled. This results in the widget remaining in a specific position on the device screen. We would recommend that the widget is floated in the bottom right hand side of the page for most use cases.
Open by default - set whether the widget should open at the chat page when a user lands on your site.
In the next section, you can align the widget vertically or horizontally, with different margins and height/width.
The header colour also changes the colour of the widget icon to match your company colours:
The header text colour can also be defined.
The next section defines the widget's labelling and messaging:
Welcome text - this message appears in the bubble above the widget when it is unopened on your website, encouraging users to click and send a message
Tagline - this defines the strapline underneath the business name in the widget header
Webchat button label - this is the text on the webchat label on the first page of the widget
Webchat conversation starter, first message - this is the second message to the customer, following from the first message (above), to make the initial interaction more conversational
Webchat conversation starter, second message - this is a conversation starter and pre-populates in the widget's message panel your first message to the customer when they open the webchat widget
WhatsApp button label - this is the text on the WhatsApp label on the first page of the widget
SMS button label - text for SMS label that appears on first page of the widget.
SMS/WA conversation starter - this pre-populates in the customer's message box the first message a customer can send you when they open their SMS or WhatsApp app
You can experiment with the above settings and see how they display in the preview panel, before installing the embed code on your site (apart from SMS and WhatsApp messages).
There are two display options:
Widget button
Once you have defined the settings, click on the "copy embed code" and paste it into the </body> section of custom HTML code for your site.
If you have "Floating over the page" checked, it is recommended you add the copied embed code at the end of the page, before the closing </body> tag.
Your widget will then be live on your website and you can start receiving and sending messages.
Chat window
Rather than click on the widget button to open it and chat, you can display a chat window directly in your webpage.
You can add a chat window to your page by copying the embed code and loading it onto your site.
Using your website administrator tool (Wordpress, Squarespace, Wix, Webflow etc) you will need to add a "Custom HTML" block to the page or template you wish to embed the widget in.
Otherwise, you can paste the embed code into any block level container (<div>, <section>, <aside> ) and it will appear immediately after the embed code in your page.
Note that in the embed code you can manually modify the values of the style-tag property to adjust the position of the widget within the page or container into which it has been placed.
If you update any of the parameters, you will then need to re-install the widget for the updates to take effect.
If you have any issues, just get in touch and we can assist you with the install.
