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:
- For visitors on your website – the widget appears for anyone browsing your site. Conversations will be saved in the browser via a cookie.
- 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.
Open Apps
Navigate to Apps in the menu on the left-hand side of your Watermelon dashboard. Open Chat Widget
Go to the section Channels, click on Chat Widget and select the widget you want to place on your website. Go to placement
In the widget settings, open the Placement tab. 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. 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
Drupal
Joomla
Squarespace
Framer
Webflow
BigCommerce
Weebly
You can easily place your chat widget by adding a short code snippet to your Joomla site’s template file.Log in to your Joomla admin panel
Open your Joomla Administrator panel and log in with your admin credentials.
Go to System settings
From the left-hand menu, navigate to System. Open Site Templates
Under the Templates section, click Site Templates. Select your active template
Choose the template you want to add your chat widget to. Edit the index.php file
In your template’s file editor, locate and open the index.php file. Paste your chat widget code
Scroll to the middle of the index.php file and paste your chat widget embed code **just before the closing **</head>tag .Tip: You can also use the search function on the bottom left and type in <head> to go to the correct spot in the index.php file to add your code, as seen in the screenshot above.
Save your changes
Click Save & Close to apply your changes. To use Code Injection, make sure your site is on one of the following plans:
Core, Plus, Advanced, Business, Commerce Basic, or Commerce Advanced.
Open Settings
From your Squarespace dashboard, click Website. Go to Custom Code → Code Injection
In the menu, select Custom Code, then click Code Injection. Add your widget code
Under Header, paste your chat widget code.
This will inject the widget into the <head> tag on every page of your site.The Header field adds the code to all pages.If you prefer, you can also add your code to the Footer section — this loads the widget before the closing </body> tag, which can slightly improve page performance.
Save your changes
Click Save to apply your chat widget code. If you don’t see the widget check if the selected chat widget is set on “Show on website”.
Add the chat widget to a specific page (optional)
If you’d like to add the chat widget only to certain pages, follow these steps:Open the Pages panel
In your Squarespace dashboard, go to Website and click on Pages.Then hover over the page you want to edit and click the gear icon to open Page Settings. Inject the code on the page
Click Advanced, then scroll to Page Header Code Injection. Paste your chat widget code here.The code you add here is injected into the <head> tag of this specific page.Blog pages also include a Post Blog Item Code Injection option if you want the widget on each post.
Save and publish
Click Save, then Publish your site. Open the page in your browser to confirm that your Watermelon chat widget appears correctly. Now that you have your chat widget code, follow the steps below to add it to your Framer website.Open project settings
In Framer, click Project Settings in the top right corner of your dashboard. Open the General tab
Navigate to the General tab and scroll down to the Custom Code section. Add your chat widget code
In the Custom Code section, you’ll see fields for adding code to the Head, Body, and Footer.Paste your Watermelon chat widget code at the **start of the **<head>tag code area. Save changes
Your script will now run across the entire website after you publish your project.Tip: The custom code will only appear after publishing your website.The chat widget won’t show up in Framer’s preview — open your live site in a browser to see it in action.
If you don’t see the widget, double-check if you have published your website. And also check if the selected chat widget is set on “Show on website”
Add the widget to a specific page (optional)
If you prefer to display the chat widget on a single page instead of the whole site, follow these steps:Go to project settings
Click Project Settings in the top right corner. Select your page
Open Page Settings and select the page where you want to add the chat widget. Paste your code
In the Custom Code section for that page, paste your Watermelon chat widget code inside the <head> tag code area. Save and publish
Click Save, then Publish your project.Your Watermelon chat widget will now appear on the selected page.Just like with the full-site setup, the widget only appears after publishing — it won’t be visible in the preview.
Now that you have your chat widget code, follow the steps below to add it to your Webflow website.Open your Webflow project
From your Webflow dashboard, find your project thumbnail and click the three dots icon to view more options. Open project settings
Click Settings to open the project configuration page. Go to Custom Code
From the left sidebar, navigate to Custom Code. Add your widget code
Scroll down to the section **Add code in the **<head>tag and paste your chat widget code here.Tip: For best performance, place your code before the closing <footer> tag instead of in the head. This makes sure your site loads faster while the widget still appears correctly.
<script> and </script> tags. Do not include <body> or </body> tags — Webflow automatically places your code inside them. Save changes
Any code added here will be applied to all pages of your Webflow project. If you don’t see the widget, double-check that you selected “All pages” in the Script Manager and that the full code was pasted correctly. And also check if the selected chat widget is set on “Show on website”
Add the widget to a specific page (optional)
If you want to display the chat widget on just one page, follow these steps instead:Open the page settings
In the Webflow Designer, open the Pages tab from the left sidebar.Hover over the page name and click the gear icon to open Page Settings. Add custom code to the page
Scroll down to Custom Code → Before tag.
Paste your Watermelon chat widget code inside this sectionTip: Just like before, make sure your code is wrapped inside <script> tags and do not include <body> tags.
Save and publish
After adding the code, click Save.And lastly, Publish your project to make the chat widget live on your website. Now that you have your chat widget code, follow the steps below to add it to your BigCommerce store.Open Script Manager
In your BigCommerce control panel, go to Storefront → Script Manager. Create a new script
Click on Create a Script. Enter script details
- Name: Watermelon Chat Widget
- Location on page: Header (recommended), for faster page loads, you can also paste the script in the Footer.
- Select pages where script will be added: All pages (or select a specific page you want the widget to show)
- Script type: Script
Paste your widget code
In the Script contents field, paste the chat widget code you copied from Watermelon. Save your script
Click Save to apply your changes.
Verify installation
Visit your BigCommerce store and refresh the page. Your chat widget should now appear in the bottom corner of your website.
If you don’t see the widget, double-check that you selected “All pages” in the Script Manager and that the full code was pasted correctly. And also check if the selected chat widget is set on “Show on website”
Now that you have your chat widget code, follow the steps below to add it to your Weebly website.Open Settings
In your Weebly dashboard, click Settings in the left-hand menu. Select Tracking Tools
Go to Tracking Tools in the settings menu. Add custom header code
Scroll down to Add custom header code and click Add new code. Paste your chat widget code
Fill in a name — for example, Watermelon Chat Widget.
Paste your Watermelon chat widget script into the code box.Make sure is selected under Where would you like to place this code? (this is selected by default). Save changes and open your site
Click Save, then navigate to Website → Edit Site. Publish your website
Click Publish to make the chat widget live on your website.Tip: The widget won’t appear in preview mode — open your published site in a browser to see it active.
If you don’t see the widget, double-check if you have published your website. And also check if the selected chat widget is set on “Show on website”
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.
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
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
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
</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:
- The first one hides the widget from the top-level iframe.
- 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'
},
'*'
);
