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 Apps.
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 Show or hide Chat Widget, you can choose to 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 AI Agent 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 AI Agent is active.
To see the changes on your website, remember to save the modifications.
Tab 1: Localize
Under Localize, you can set the date and 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 or if you want to amend default texts.
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.
- Your avatar: Your brand avatar will be shown when there is no AI Agent active on your chat widget, and the conversation hasn't been assigned to an agent.
- 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 AI Agent is active.
- Message bubbles: You can choose Default or Custom. With Default, you can only adjust the colors of the AI Agent + user in Watermelon and the end user (so, 2 customization options). With Custom, you can style each message bubble separately.
You can set the colors, corner radius, font type, and size here. - Letter type: With adjusting the letter type, you can style the entire Chat Widget to your liking.
- 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 colors of the launcher.
Click 'Save Changes' at the bottom.
Tab 3: Attract
Under Attract, customize how you want to attract visitors to your AI Agent. Personalize the following elements:
- Welcome screen: By default, the Welcome screen is enabled. This allows you to let your customers know they can start chatting. If you want to make it easier for customers to get started, you can disable the Welcome screen. Chatters will then be taken directly into the chat.
- 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 AI Agent and conversations with an employee.
Here, you can set the text for a title, subtitle, and start chat button. An example for the AI Agent:
Title: We're here for you!
Subtitle: Our AI Agent 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 AI Agent 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
When adding the countrycode to your phone number, please use the + symbol. Example: +31 instead of 0031
- 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.
- Attachments: Here you can specify whether users are allowed to send attachments in the Chat Widget.
- Queue system: If you have Handoff enabled, it can be useful to turn on the Queue. This allows chatters to estimate how long they will have to wait before they are helped.
- 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.
- Automatically open once: Here you can choose whether the Chat Widget should open automatically once on your website, or if the user needs to open it manually.
You can set this separately for users on mobile devices - Placement of launcher: Here you can select whether you want the widget aligned to the left or right, meaning it will appear on the left or right side of your website. You can also specify how much space you want between the side of the page and the widget, as well as between the bottom of the page and the widget.
- Code: With the code provided here, you can place the widget in the desired location on your website. Read this article to learn how to place the Chat Widget on your website.
- Track website visitors: By enabling this, you can see which page the visitor was on when they started the chat. You can read more about this in this article.