In this article, you will learn how to configure your Chat Widget and customize it according to your preferences.
Check this video:
If you haven't already, start by creating a new Chat Widget; instructions on how to do this can be found in this article.
If you have already created a Chat Widget, navigate to that widget through Integrations.
Name and Hide Chat Widget
The name of your Chat Widget is automatically set as your company name. You can customize it according to your preference. The name is not visible to customers.
With Hide Chat Widget, you can choose to (temporarily) hide the entire chat widget on your website without having to remove the code from your website.
Embed Chat Widget Options
Within the embedding options, you can choose how to display your Chat Widget; as a widget or in full screen.
Customize Your Chat Widget
Now you can shape the Chat Widget step by step. This is divided into 4 tabs: Localize, Design, Attract, and Placement. Below is an explanation for each tab.
Each time you make a change, you will see the update on the right side as a preview of the chat widget, just as the customer will see it. There are various tabs where you can preview different forms of the chat widget:
- Welcome is the start of the chat.
- Chat is when someone is engaged in a conversation.
- Minimized shows how your chatbot looks when someone has not opened the chat or has minimized it using the minimize button.
- Privacy for the privacy policy.
- Closed is out of business hours, it is then only possible to send messages when the chatbot is active.
To see the changes on your website, remember to save the modifications.
Tab 1: Localize
Under Localize, you can set the default language, such as Dutch or English. If you choose 'Custom,' you can create your own translations, especially if you desire a language not offered by default.
If you choose 'Custom', you can modify the following texts:
- Buttons to accept or reject the privacy policy.
- Text in the welcome screen.
- Text in the chat screen.
- Messages about the status in the chat.
Each text you modify has a description of what you are changing, and on the right side, you can see where this will be visible in the Chat Widget.
Click 'Save Changes' at the bottom.
Don't want to show a specific text field? Then choose 'custom' and place a space where the placeholder is shown.
Tab 2: Design
Under Design, you can select a template made by us and use it. You can also choose to make changes from there to fully customize the widget to your liking. You can modify or add the following:
- Title or logo. By default, the title is your company name. If you do not add a logo, the title will be visible in the chat widget.
- Colors for the widget and background. Here, you can either add color codes or choose the desired color in the pop-up. Consider not only the colours that match your organization but also the readability of the widget!
- Users in the welcome screen. Here you can specify which users you want visible in the welcome screen when no chatbot is active.
- Message bubbles. You can choose 'default' or 'custom'. With 'default', you can only adjust the colours of the chatbot + user in Watermelon and the end user (so, 2 customization options). With 'custom', you can style each message bubble separately.
You can set the colours, corner radius, font type, and size here. - Launcher. This is the button where end users can click to start the chat. You can choose to modify only the icon or the entire button. Also, you can adjust the colours of the launcher.
Click 'Save Changes' at the bottom.
Tab 3: Attract
Under Attract, customize how you want to attract visitors to your chatbot. Personalize the following elements:
- Main title. This is the text that welcomes users on the welcome screen.
- Send message element. This is the text visible in the first screen of the widget before someone actually starts the chat. You can set this for conversations with the chatbot and conversations with an employee.
Here, you can set the text for a title, subtitle, and start chat button. An example for the chatbot:
Title: We're here for you!
Subtitle: Our chatbot is available 24/7 for all your questions
Start chat button: Start chatting
- Chat Closed. Here you set whether you want to close the chat outside opening hours. Website visitors will then not be able to chat with the chatbot or with an agent. Then you can set what text will appear in the widget outside opening hours. For example:
Title: Sorry! We are closed
Subtext: Our staff is available Monday through Friday from 9:00 a.m. to 5:00 p.m.
Start chat button: Start chatting - Select links. Here, you can indicate through which channels you are reachable. These are not only the channels linked to Watermelon but also, for example, an email address, phone number, or the frequently asked questions page on your website. You can choose an icon and text and add the URL to which this button should lead.
Note: When adding your Whatsapp number, replace <number> with your phone number. Example: https://wa.me/0612345678
- Eye-catcher. This is the message that appears above the icon when the chat is minimized. You can see how it looks on the right under 'Minimized'. You can choose to enable or disable the eye-catcher and set a text. You can also choose not to show the eye-catcher on mobile. This is recommended if the eye-catcher or a part of your website may be obstructed.
- Welcome message. This is the message visible before the chat starts. You can see how it looks on the right under 'Chat'. You can enable or disable the welcome message and set a text. You can then make this text bold and/or italic and add emoticons and links.
- Privacy screen. You can choose to add a privacy screen, asking end users to agree to the privacy policy before starting the chat. You can enable or disable this, add the text for the title and subtitle, and add a URL through which the privacy policy can be found.
- Unfold URLs. Here, you can enable or disable the expansion of URLs.
- Watermelon Branding. Here, you can specify whether you want to enable or disable Watermelon branding.
Click 'Save Changes' at the bottom.
Tab 4: Placement
Under Placement, determine where you want to place the widget on your website and whether you want the widget to open automatically or not.
At Widget automatically openen, you can select whether the Chat Widget should automatically open on your website or if the user should do this manually.
For the Placement of launcher, choose whether you want the widget to be aligned on the left or right side of your website. Specify the space between the side and bottom of the page and the widget.
Lastly, you can copy the code to place the widget at the desired location on the website.
Read this article to learn how to place the Chat Widget on your website.