Placing the Chat Widget on your website

When you want the Chat Widget to be visible on your website, you'll need to place a piece of code on your website. In this article, we explain how to do this.

Didn't you create a Chat Widget yet? In this article, you can read how to do this.

Retrieving the code

Before we can place the chat widget on your website, we need the code.

You retrieve the code as follows:

  1. Log in to your Watermelon account.
  2. Go to Integrations.
  3. Select the Chat Widget you want to place on your website.
  4. Go to Placement.
  5. Under Code, you will find the code. You can copy it to your clipboard with the button in the top right corner of the code screen.

Note: Do you not manage your own website? Send the code to your website administrator. The website administrator can easily place the code on the website.

 

Placing the code via Wordpress

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

 

Placing the code in Lightspeed

If you want to place your chat 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!

Placing the code via Wix

Follow these steps to add the chat widget in Wix:

  • Log in to your Wix account and open the website editor.
  • Go to your website dashboard and go to Settings.
  • Under Advanced, click on Custom Code.
  • Click on + Add Custom Code in the top right corner.
  • Paste the copied code snippet into the text box.
  • Enter a name for your code. Give your code a name that is easy to recognize, such as "Watermelon widget".
  • Select an option under Add Code to pages:
    • All pages: This adds the code to all pages of your website, including any new pages you create in the future. Choose whether to load the code only once per visit or on every page your visitor opens.
    • Choose specific pages: Use the dropdown menu to select the relevant pages.
  • Choose where to place your code: Head.
  • Click Apply and then publish your website to implement the changes.
  • Your chat widget is now added to your Wix website!

 

Placing the code via Google Tag Manager

If you use Google Tag Manager, this article explains in 7 steps how to place your Chat Widget via Google Tag Manager.