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:
You can easily install the widget in your CMS, you can find the guide by scrolling through the tabs. We provide a guide for the following CMS systems:
  • Wordpress
  • Wix
  • Lightspeed
  • Google Tag Manager
  • Shopify
  • Joomla
  • Squarespace
  • Framer
  • Webflow
  • BigCommerce
  • Weebly

​
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'
  },
  '*'
);