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 Copy Code

​
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:
Add your chat widget to your WordPress website so visitors can chat directly with your team or AI Agent. 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
2

Open the footer file

In the file list, expand Patterns and select Footer-default.php.
Wordpress Patterns Footer
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
4

Save your changes

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

Preview your site

Open your website in a browser (not the editor preview) to confirm your chat widget is now live.
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 (formerly Insert Headers and Footers).
Wordpress Wp Code Start
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
3

Configure your snippet

  • Give your snippet a title (e.g., “Chat widget”).
  • Set Code Type to JavaScript Snippet.
Paste your widget code in the Code Preview area.
Wordpress Wp Code Create Custom Snippet
4

Choose where to load the snippet

Under Insertion, select where the script should appear:
  • Header (most reliable)
  • Footer (better performance)
  • Or target specific pages using WPCode’s conditional logic
    Wordpress Wp Code Create Insertion Options
You can load the widget only on certain pages or for specific users, thanks to WPCode’s Smart Conditional Logic.
5

Save and activate

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

​
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 below
user_id is a required field to store conversation history accross devices and browsers
// ----- These are variables comming 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
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. 
import {injectWidget} from "watermelon-widget-injection"; in the component

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

injectWidget(widgetId, settingsId, 'stage', 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
  );
}, 10000)
The timeout is set to 10 seconds in this example. Replace with the duration that represents how long it takes before the user is logged in, in milliseconds
Click Copy code and paste it before the </body> tag on every page you want the Widget to appear on your app and/or website. Then edit the code to send Watermelon the email address, name, or phone number of the user who is currently logged in. After adding the code, open your app and the Widget will appear.

​
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: {}
  },
  '*'
);
// @ts-ignore
iframe.contentWindow.postMessage(
  {
   type: 'logout'
  },
  '*'
);