The Website Widget settings

In this article, you will learn how to configure your Website Widget and customize it according to your preferences.

If you haven't already, start by creating a new Website Widget; instructions on how to do this can be found in this article.

If you have already created a Website Widget, navigate to that widget through Integrations.

 

Name and Hide Website Widget

The name of your Website 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 Website Widget, you can choose to (temporarily) hide the entire website widget on your website without having to remove the code from your website.

Customize Your Website Widget

Now you can shape the Website 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 website widget, just as the customer will see it. There are various tabs where you can preview different forms of the website 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 Website Widget.

Click 'Save Changes' at the bottom.

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 website 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.
• 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.

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 Website Widget on your website.