How to place the website widget on your website

When you want your chat to be visible on your website, you have to place a bit of code on your website. In this article we'll explain how you can place the website widget.

If you want to add or edit a website widget, you need to have Admin access in the platform. If you don't have these rights, ask one of your colleagues to do this for you!

Retrieving the code

Before we can place the widget on your website, we need a code. Haven't made a website widget yet? In this article you can read how.

You can retrieve the code as following:

Go to Integrations.
Select Website widget.
Open the website widget you want to place.
Scroll to View code.
Click on Copy code to copy the code to your clipboard.

Please note: Are you not managing your own website? Send your code then to your website manager! They can easily place the code on your website.

Placing the code in the <head> tag

Open your Wordpress environment.
In the Dashboard navigate to Appearance.
Go to Theme editor.
In the Theme files, look for the Theme Header file (header.php).
Paste the earlier copied code after the <head> tag.
Click on Update file. Your website widget is now added to your website.

If you can't access the header.php, or if you cant place the code, paste the code then in functions.php.

Using Wordpress plugin

Download the Watermelon plugin in the WordPress Plugin Store. You can do this by going to Plugins in WordPress. Click on New plugin. Type "Watermelon" in the search bar. You can also download the plugin here.
After downloading you have to activate the plugin in your WordPress account. Go to Plugins again. Now choose Installed plugins. Search for the Watermelon plugin and click on activate.
Click on the Settings of the Watermelon Plugin under Installed plugins. Here you can enter the key. You can get the Watermelon key from your previously copied code from your website widget. See the bold code in the example below. Enter this Watermelon Key into your WordPress plugin and the website widget is linked!

Do not use the code below, this is an example!

<script type="text/javascript">
window.Watermelon = window.Watermelon || {};
window.Watermelon.key = "place your own key here";
window.Watermelon.toggled = false;
(function(d,s) {
s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = "https://wm-livechat-2-prod-dot-watermelonmessenger.appspot.com/assets/js/wm_plugin.js";
d.getElementsByTagName('script')[0].appendChild(s);
}(document));
</script>

Placing the code in Lightspeed

If you want to place your website widget through Lightspeed, you can follow the steps below:

Log in to your Lightspeed eCom using your login credentials.
Navigate to the menu on the left and go to Website, then SEO.
Next, go to Header meta tags and site verification. Enter the code here and click 'Save'.

Your website widget has now been added to your website!