Skip to main content
It only takes a few minutes to install the Widget on your website. Once installed, you’ll be able to answer Frequently Asked Questions automatically in no-time. You have two ways to install your widget:
  1. For visitors on your website – the widget appears for anyone browsing your site. Conversations will be saved in the browser via a cookie.
  2. For both visitors and logged-in users – the widget is available across your website and inside your platform or app. The widget will show information like customer names and previous conversations across devices.
We recommend installing the Widget for both visitors and logged-in users to give everyone instant access to your team.

​
Installing the widget for visitors on your website

​
Getting your Chat Widget snippet

Let’s first get your chat widget snippet, before we can place it onto your website. Follow the steps below:
1

Open Apps

Navigate to Apps in the menu on the left-hand side of your Watermelon dashboard.
Chat Widget Go To Apps Pn
2

Open Chat Widget

Go to the section Channels, click on Chat Widget and select the widget you want to place on your website.
Chat Widget Select Channel Pn
3

Go to placement

In the widget settings, open the Placement tab.
Chat Widget Go To Placement Pn
4

Copy your widget code

Under Code, you’ll find your installation snippet. Click the copy icon in the top-right corner to copy the code to your clipboard.
Chat Widget Settings Pn

​
Install yourself

Click Copy code and paste it before the </head> tag on every page you want the Widget to appear on your app and website. After adding the code, open your app and website and the Widget will appear. You can also use one of our guides to install the widget in a CMS:
  • Wordpress
  • Wix
  • Lightspeed
  • Google tag manager
  • Shopify
  • Joomla
  • Squarespace
  • Framer
  • Webflow
  • BigCommerce
  • Weebly

​
Add the chat widget to your Wordpress website

You can install the widget in two ways:
  1. By adding your snippet directly to your theme’s footer
  2. By using a plugin (recommended for most users)

​
Add your chat widget via your theme (Theme File Editor)

1

Open the Theme File Editor

In your WordPress admin panel, go to Tools → Theme File Editor.
Wordpress Start Pn
2

Open the footer file

In the file list, expand Patterns and select Footer-default.php.
Wordpress Patterns Footer Pn
3

Paste your chat widget code

Scroll to the bottom of the file and paste your chat widget snippet. Place it just before the closing </body> tag if present.
Wordpress Add Code Pn
4

Save your changes

Click Update File at the bottom of the code editor to apply your changes.
Wordpress Add Code Save Pn
5

Preview your site

Open your website in a browser (not the editor preview) to confirm your chat widget is now live.
**Note: **Editing theme files directly requires caution. If you switch or update your theme, your changes may be lost. If you prefer a safer option, use the WPCode plugin instead.
1

Install WPCode

Install and activate the WPCode plugin.
Wordpress Wp Code Start Pn
2

Create a new snippet

Go to Code Snippets → Add Snippet. Hover over Add Your Custom Code (New Snippet) and click Use Snippet.
Wordpress Wp Code Add Custom Code Pn
3

Configure your snippet

In the snippet editor:
  • Give your snippet a title (e.g., “Watermelon Chat widget”).
  • Set Code Type to HTML Snippet. (This is the default setting)
  • Paste your widget code in the Code Preview area.
Wordpress Wp Code Create Custom Snippet Pn
4

Choose where to load the snippet

Under Insertion, select where the script should appear:
  • **Inset Method: **Auto insert
  • Locaiton: Site wide Header
Wordpress Wp Code Create Insertion Options Pn
5

Save and activate

Click Save Snippet, then switch the toggle to Active. Your chat widget is now live on your site.
Wordpress Wp Code Activate And Save Pn

​
Ask your developer to help (optional)

If you’d prefer someone else from your team to take care of the installation, you can add them to Watermelon so they have direct access to the code. Alternatively, you can share the code and this documentation guide with a developer, they’ll be able to handle it from there.

​
Installing the widget for both visitors and logged-in users

You can install the widget directly using our NPM package, which works with any framework. The package includes a script to embed the widget into your application. Add Watermelon to your application using the following command in your terminal: 
npm install watermelon-widget-injection --legacy-peer-deps
Get the variables from your system API response, localstorage or wherever you’ve saved them and pass them to the inject widget functionality. Example: 
// ----- These are variables coming from your request ---- //
const first = response.me.first_name 
const last = response.me.last_name 
const email = response.me.email 
const phone = response.me.phone_number 
const userId = response.me.id.toString() // Required
userId is a required field to store conversation history accross devices and browsers
To initialize Watermelon, copy and paste the code snippet into every page or a shared component where you want the Widget to appear. Make sure to do this in your client-side code. After adding the code, open your app and the Widget will appear. 
import {injectWidget} from "watermelon-widget-injection"; in the component

// Initialize and assign variables first before passing them to the function

injectWidget(widgetId, settingsId, 'prod', first, last, email, phone, userId);
setTimeout(() => {
  const iframe = document.querySelector('.watermelon-embed-frame') as HTMLIFrameElement;
  iframe.contentWindow.postMessage(
   {
    type: 'login',
    payload: {
     first_name: first,
     last_name: last,
     email: email,
     phone: phone,
     user_id: userId,
    }
   },
   '*' // Security target origin
  );
}, 1000)
The 1000 milliseconds delay simply gives the widget enough time to load before sending the login message. Adjust only if your page loads slower or faster.

​
Shut down your user sessions on user logout

This step should take place either right before or after the logout call — the order doesn’t matter. Two postMessage calls are required:
  1. The first one hides the widget from the top-level iframe.
  2. The second one tells the iframe app to clear everything from local storage and reset its state, such as conversation ID and contact ID.
const iframe = document.querySelector('.watermelon-embed-frame') as HTMLIFrameElement;
window.postMessage(
  {
   type: 'logout',
   payload: {}
  },
  '*'
);

iframe.contentWindow.postMessage(
  {
   type: 'logout'
  },
  '*'
);