> ## Documentation Index > Fetch the complete documentation index at: https://watermelon.ai/docs/llms.txt > Use this file to discover all available pages before exploring further. # Install the widget > Step-by-step guide for installing and integrating the Watermelon Widget on your website or app, including setup, login, and logout instructions. 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**](#installing-the-widget-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**](#installing-the-widget-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: Navigate to **Integrations** in the menu on the left-hand side of your Watermelon dashboard. Install Widget Integrations Go to the section Channels, click on Chat Widget and select the widget you want to place on your website. Install Widget Channel In the widget settings, open the **Placement** tab. Install Widget Placement Under **Code**, you’ll find your installation snippet. Click **copy code** in the top-right corner to copy the code to your clipboard. Install Widget Copy Code ### **Install yourself** Click **Copy code** and paste it before the `` 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)** In your WordPress admin panel, go to **Tools → Theme File Editor**. Wordpress Start In the file list, expand **Patterns** and select **Footer-default.php**. Wordpress Patterns Footer Scroll to the bottom of the file and paste your chat widget snippet. Place it just before the closing \ tag if present. Wordpress Add Code Click **Update File** at the bottom of the code editor to apply your changes. Wordpress Add Code Save 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. ### **Add your chat widget using the WPCode plugin (recommended)** Install and activate the **WPCode** plugin (formerly *Insert Headers and Footers*). Wordpress Wp Code Start Go to **Code Snippets → + Add Snippet**. Hover over **Add Your Custom Code (New Snippet)** and click **Use Snippet**. Wordpress Wp Code Add Custom Code * 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 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. Click **Save Snippet**, then switch the toggle to **Active**. Wordpress Wp Code Activate And Save Your chat widget is now live on your site. Add your chat widget to your Wix website so visitors can chat directly with your team or AI Agent. To add custom JavaScript in Wix, you need a paid Wix plan with a connected domain. Free Wix sites don’t support adding custom code snippets. Go to your **Wix Website Dashboard**. Scroll down and click **Settings** in the left-hand menu. Wix Start Scroll to the bottom of the Settings page and open **Advanced → Custom Code**. Wix Custom Code Click **Add Code**, then choose **Head** as the placement location. Paste your chat widget JavaScript code into the code editor. Wix Add Code To Head Wix Adding Code After applying your code, turn on the toggle switch to **enable** the snippet on your website. Wix Enable If you don’t want Wix’s native chat to appear next to your own chat widget: 1. Open the **Wix Editor** 2. Select the **Wix Chat** element 3. Delete it from the page Click **Publish** to make the changes live. Open your website in a browser — not in preview mode — to confirm that your chat widget is now visible Add your chat widget to your Lightspeed eCom C-Series store so visitors can chat directly with your team or AI Agent. Lightspeed eCom C-Series allows you to add custom code to the \ section of your entire website. This is the best—and only—location for adding your chat widget script. From your Lightspeed **eCom admin**, go to **Settings**. Lightspeed Start Under the **Website Settings** column, select **Web extras**. Lightspeed Settings In the **Custom head code** section, click **Add code**.\ Paste your chat widget script or URL in the field. Lightspeed Custom Head Code Code added here is injected into the \ section on **every page** of your website. Lightspeed eCom C-Series does **not** support page-specific custom code. Click **Save** to apply your code. Lightspeed Add Code Pop Up Save Open your website in a browser to confirm that your chat widget appears. Custom code may not appear in previews — always check your **live** store. ### Add your chat widget to your website using Google Tag Manager (GTM). With GTM, you can install your widget across your entire website or only on selected pages using triggers. ### Add your chat widget to your entire website Log in at [**tagmanager.google.com**](http://tagmanager.google.com) and select the container for your website. In the left-hand menu, click **Tags → New**. Gtm Start Click **Tag Configuration** and choose **Custom HTML**. Paste your chat widget code into the HTML field. Gtm Select Custom Html Gtm Adding Widget Code Click **Triggering → All Pages**. This will load your chat widget everywhere your GTM container is installed. Gtm Select All Pages Click **Save**, then **Submit** in the top right to publish your changes. Your chat widget is now active across your entire website. Gtm Click On Save Gtm Click On Submit ### **Add your chat widget to specific pages** If you want your widget to appear only on one or more selected pages, you can use a **page view trigger**. Go to **Tags → New**, choose **Custom HTML**, and paste your chat widget code. Gtm Start Gtm Adding Widget Code Click **Triggering → + → Page View**. Set the trigger to: * **Some Page Views** * **Page URL → contains/equal → your-page-url** Gtm Select Some Pages > Examples: > > * Show only on the contact page → *Page URL contains “/contact”* > * Show only on the pricing page → *Page URL contains “/pricing”* > > You can add multiple conditions for multiple pages. Click **Save**, then **Submit** in the top right to publish your changes. Your chat widget is now active across your entire website. Gtm Click On Save Gtm Click On Submit ### Verify the installation Use GTM Preview Mode Click **Preview** in Google Tag Manager and open your website to confirm your tag is firing correctly. ### Check on your live website Open your published website in a browser and confirm the widget appears in the correct places. ### **Add the chat widget to your Shopify website** Add your chat widget to your Shopify store and let visitors chat directly with your team or AI Agent. You can install your widget across your entire website, or place it on a single page only whichever fits your use case. ### Add your chat widget to your entire website From your Shopify admin, navigate to **Online Store → Themes**. Shopify Start Shopify Select Theme On your active theme, click **… → Edit code**. Shopify Edit Code Element In the left sidebar, expand the **Layout** folder and select **theme.liquid**. Shopify Select Theme In Code Scroll until you find the \ tag. Paste your chat widget code **inside the \ section**. Shopify Add Code Placing your script in the \ ensures that the widget loads correctly on every page of your store. Click **Save** in the top-right corner. Shopify Save Your chat widget is now added to your entire Shopify website. ### Add your Chat Widget to a specific page If you only want your Chat Widget to appear on certain pages, follow these steps instead. Go to **Online Store → Pages** and select an existing page or create a new one. In the page content toolbar, click the **\<>** icon to switch to HTML editing mode. Paste your chat widget code into the HTML area, wrapped inside \ tags. This method only adds the chat widget to that one specific page. It won’t appear elsewhere on your store unless added to theme.liquid. Click **Save**, then open your page in a browser to confirm that the widget appears. ### **Add the chat widget to your Joomla website** You can easily place your chat widget by adding a short code snippet to your Joomla site’s template file. Open your **Joomla Administrator** panel and log in with your admin credentials. From the left-hand menu, navigate to **System**. Joomla Start Pn Under the **Templates** section, click **Site Templates**. Joomla Site Templates Pn Choose the template you want to add your chat widget to. Joomla Select Template Pn In your template’s file editor, locate and open the **index.php** file. Joomla Go To Index Pn Scroll to the middle of the **index.php** file and paste your chat widget embed code \*\*just before the closing \*\*``**tag** . Joomla Add Code Pn **Tip:** You can also use the search function on the bottom left and type in \ to go to the correct spot in the index.php file to add your code, as seen in the screenshot above. Click **Save & Close** to apply your changes. Joomla Add Code Save Pn ### **Add the chat widget to your Squarespace website** To use Code Injection, make sure your site is on one of the following plans:\ **Core**, **Plus**, **Advanced**, **Business**, **Commerce Basic**, or **Commerce Advanced**. From your Squarespace dashboard, click **Website**. Squarespace Start Pn In the menu, select **Custom Code**, then click **Code Injection**. Squarespace Custom Code Pn Under **Header**, paste your chat widget code.\ This will inject the widget into the `` tag on every page of your site. Squarespace Code Injection Pn 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 `` tag, which can slightly improve page performance. Click **Save** to apply your chat widget code. Squarespace Code Injection Save Pn 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: In your Squarespace dashboard, go to **Website** and click on **Pages.** Squarespace Start Pn Then hover over the page you want to edit and click the **gear icon** to open **Page Settings**. Squarespace Single Page Selection Pn Click **Advanced**, then scroll to **Page Header Code Injection**. Paste your chat widget code here. Squarespace Single Page Code Injection Pn The code you add here is injected into the \ tag of this specific page. Blog pages also include a Post Blog Item Code Injection option if you want the widget on each post. Click **Save**, then **Publish** your site. Open the page in your browser to confirm that your Watermelon chat widget appears correctly. Squarespace Single Page Code Injection Save Pn ### **Add the widget to your entire website** Now that you have your chat widget code, follow the steps below to add it to your Framer website. In Framer, click **Project Settings** in the top right corner of your dashboard. Framer Go To Settings Pn Navigate to the **General** tab and scroll down to the **Custom Code** section. Framer Go To General Pn 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 \*\*``**tag** code area. Framer Add Custom Code Pn Your script will now run across the entire website after you publish your project. Framer Publish Button Pn **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: Click **Project Settings** in the top right corner. Framer Go To Settings Pn Open **Page Settings** and select the page where you want to add the chat widget. Framer Specific Page Pn In the **Custom Code** section for that page, paste your Watermelon chat widget code inside the `` tag code area. Framer Specific Page Add Code Pn Click **Save**, then **Publish** your project. Your Watermelon chat widget will now appear on the selected page. Framer Specific Page Publish Pn Just like with the full-site setup, the widget only appears **after publishing** — it won’t be visible in the preview. ### **Add the widget to your Webflow website** Now that you have your chat widget code, follow the steps below to add it to your Webflow website. From your **Webflow dashboard**, find your project thumbnail and click the **three dots icon** to view more options. Webflow Start Pn Click **Settings** to open the project configuration page. Webflow Go To Settings Pn From the left sidebar, navigate to **Custom Code**. Webflow Go To Custom Code Pn Scroll down to the section \*\*Add code in the \*\*``**tag** and paste your chat widget code here. **Tip:** For best performance, place your code before the closing \