> ## Documentation Index
> Fetch the complete documentation index at: https://docs.z360.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Add the Z360 Live Chat Widget to Your Website

<iframe src="https://www.youtube.com/embed/4TbZbNH6tEo" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

The live chat widget lets your customers talk to your AI agent (or your team) directly from your website. When someone sends a message through the widget, it appears in your Z360 Inbox just like an email or SMS conversation — so you manage everything from one place.

This guide covers how to get your widget code from Z360 and how to install it on any type of website — whether you're using WordPress, Shopify, Wix, Squarespace, Webflow, a page builder, or a fully custom-built site.

## Step 1: Get Your Widget Code from Z360

Before you touch your website, you need to grab the embed code from Z360.

1. In Z360, go to **Settings → Channels → Live Chat Widget**.
2. You'll see your widget embed code — it's a single `<script>` tag. It looks something like this:

```html theme={null}
<script src="https://widget.z360.biz/your-unique-id.js"></script>
```

(Your actual code will have your organization's unique identifier in it.)

3. **`Copy the entire <script> tag.`** You'll paste this into your website in the next step.

That's all you need from Z360. The widget is a standard design — once you paste the code, it will appear on your site as a chat bubble in the corner of the page, ready for your customers to use.

## Step 2: Add the Code to Your Website

How you add the code depends on what platform your website is built on. Find your platform below and follow the instructions.

<AccordionGroup>
  <Accordion title="WordPress">
    WordPress gives you several ways to add the script. Pick whichever feels most comfortable.

    **Option A: Using the Theme's Footer (Recommended for most users)**

    1. In your WordPress admin dashboard, go to **Appearance → Theme File Editor** (or **Appearance → Editor** in older versions).
    2. On the right side, find and click **footer.php** (or **Theme Footer**).
    3. Find the closing `</body>` tag near the bottom of the file.
    4. Paste your Z360 widget `<script>` tag on a new line just **above** the `</body>` tag.
    5. Click **Update File** to save.

    The widget will now appear on every page of your WordPress site.

    **Option B: Using a Plugin (No code editing)**

    If you'd rather not edit theme files, use a plugin like **Insert Headers and Footers** (by WPCode) or **Header Footer Code Manager**:

    1. In WordPress, go to **Plugins → Add New**.
    2. Search for "WPCode" (or "Insert Headers and Footers") and install and activate it.
    3. Go to **Code Snippets → Header & Footer** (or wherever the plugin puts its settings).
    4. Paste your Z360 widget `<script>` tag in the **Footer** section.
    5. Click **Save Changes**.

    This method is great because your widget code survives theme updates — you won't lose it if you switch or update your theme.

    **Option C: Using a Custom HTML Block (Specific Pages Only)**

    If you only want the widget on certain pages (not site-wide):

    1. Open the page you want the widget on in the WordPress block editor.
    2. Add a **Custom HTML** block at the bottom of the page content.
    3. Paste your Z360 widget `<script>` tag into the block.
    4. Publish or update the page.

    Repeat this for each page where you want the widget. If you want it everywhere, Option A or B is easier.
  </Accordion>

  <Accordion title="WordPress.com Users (Free/Personal Plans)">
    If you're on WordPress.com (not self-hosted WordPress.org), the free and personal plans don't allow custom JavaScript. You'll need a **Business plan or higher** to add custom code. Once you have that, go to **Appearance → Custom Code → Footer Code** and paste the script there.
  </Accordion>

  <Accordion title="Shopify">
    1. In your Shopify admin, go to **Online Store → Themes**.
    2. Click **Actions → Edit Code** (or the three dots ⋯ → **Edit code**) on your active theme.
    3. In the left sidebar under **Layout**, find and click **theme.liquid**.
    4. Scroll to the bottom of the file and find the closing `</body>` tag.
    5. Paste your Z360 widget `<script>` tag on a new line just **above** `</body>`.
    6. Click **Save**.

    The widget will now appear on every page of your Shopify store.
  </Accordion>

  <Accordion title="Wix">
    Wix doesn't let you edit raw HTML files, but it has a built-in way to add custom code:

    1. In the Wix dashboard, go to **Settings → Custom Code** (you may also find this under **Settings → Advanced → Custom Code**).
    2. Click **+ Add Custom Code**.
    3. Paste your Z360 widget `<script>` tag in the code box.
    4. Give it a name like "Z360 Live Chat Widget" so you can find it later.
    5. Under **Add Code to Pages**, choose **All Pages** (or select specific pages if you prefer).
    6. Under **Place Code in**, select **Body - end**.
    7. Click **Apply**.

    Note: Custom code on Wix requires a **Premium plan** (Combo or higher). It's not available on the free plan.
  </Accordion>

  <Accordion title="Squarespace">
    1. In the Squarespace dashboard, go to **Settings → Advanced → Code Injection**.
    2. Scroll down to the **Footer** section.
    3. Paste your Z360 widget `<script>` tag there.
    4. Click **Save**.

    The widget will appear on every page. Code Injection is available on **Business plans and higher** — it's not available on Personal plans.

    If you only want the widget on specific pages, you can use a **Code Block** instead:

    1. Edit the page where you want the widget.
    2. Add a **Code** block at the bottom of the page.
    3. Paste the `<script>` tag.
    4. Save and publish.
  </Accordion>

  <Accordion title="Webflow">
    1. In the Webflow Designer, click the **Webflow logo (W)** in the top-left corner to open **Project Settings**.
    2. Go to the **Custom Code** tab.
    3. In the **Footer Code** section (the box labeled "Before `</body>` tag"), paste your Z360 widget `<script>` tag.
    4. Click **Save Changes**.
    5. **Publish** your site for the changes to go live.

    The widget will load on every page. This works on all Webflow paid plans.

    If you want the widget on a specific page only:

    1. Select the page in the Pages panel.
    2. Click the gear icon to open page settings.
    3. Scroll to `Custom Code → Before </body> tag`.
    4. Paste the script and save.
  </Accordion>

  <Accordion title="GoDaddy Website Builder">
    1. In the GoDaddy Website Builder editor, click the three dots menu (⋯) in the top-right corner.
    2. Go to **Settings → Site-wide Code** (or **HTML Settings**).
    3. Look for the **Footer** section.
    4. Paste your Z360 widget `<script>` tag.
    5. Click **Save** and publish your site.
  </Accordion>

  <Accordion title="Weebly">
    1. In the Weebly editor, go to **Settings → SEO** (or **Settings → Header/Footer Code**).
    2. Find the **Footer Code** section.
    3. Paste your Z360 widget `<script>` tag.
    4. Click **Save** and publish.
  </Accordion>

  <Accordion title="Framer">
    1. In Framer, open your **Site Settings**.
    2. Go to the **Custom Code** section.
    3. In the `End of <body> tag` section, paste your Z360 widget `<script>` tag.
    4. **Publish** your site.
  </Accordion>

  <Accordion title="Google Sites">
    Google Sites doesn't support custom JavaScript. Unfortunately, you cannot add the Z360 live chat widget to a Google Sites page. If you need live chat, consider migrating to a platform that supports custom code — like WordPress, Webflow, or Squarespace (Business plan).
  </Accordion>

  <Accordion title="HTML / Custom Website (Any Static or Dynamic Site)">
    If you built your website from scratch, or you're using plain HTML, this is the simplest method:

    1. Open your website's main HTML file (usually `index.html` or your layout/template file that's shared across pages).
    2. Find the closing `</body>` tag.
    3. Paste your Z360 widget `<script>` tag on a new line just **above** `</body>`:

    ```html theme={null}
        {/*  Z360 Live Chat Widget  */}
        <script src="https://widget.z360.biz/your-unique-id.js"></script>
      </body>
    </html>
    ```

    4. Save the file and upload it to your web server (or push the change via Git if you're using version control).

    If your site has a shared layout or template file (like `layout.html`, `base.html`, `_layout.ejs`, etc.), add it there so the widget appears on every page. If you add it to individual page files, it'll only appear on those specific pages.
  </Accordion>

  <Accordion title="React / Next.js / Single Page Applications (SPAs)">
    For React-based sites and other JavaScript frameworks, you have two options:

    **Option A: Add to the public HTML file**

    Most frameworks have a main HTML file that loads your app:

    * **React (Create React App):** `public/index.html`
    * **Next.js:** `pages/_document.js` or `pages/_document.tsx` (inside the `<body>` of the custom Document)
    * **Vite:** `index.html`
    * **Vue.js:** `public/index.html`
    * **Angular:** `src/index.html`
    * **Nuxt:** `nuxt.config.js` (using the `head` configuration) or `app.html`
    * **Gatsby:** `gatsby-ssr.js` (using `onRenderBody`)
    * **Svelte/SvelteKit:** `src/app.html`

    Open that file, find the closing `</body>` tag, and paste the `<script>` tag just above it.

    For **Next.js** specifically, create or edit `pages/_document.js`:

    ```jsx theme={null}
    import { Html, Head, Main, NextScript } from 'next/document';

    export default function Document() {
      return (
        <Html>
          <Head />
          <body>
            <Main />
            <NextScript />
            <script src="https://widget.z360.biz/your-unique-id.js"></script>
          </body>
        </Html>
      );
    }
    ```

    **Option B: Load the script dynamically in a component**

    If you prefer to load the widget programmatically (for example, to only show it on certain pages):

    ```jsx theme={null}
    import { useEffect } from 'react';

    function LiveChatWidget() {
      useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://widget.z360.biz/your-unique-id.js';
        script.async = true;
        document.body.appendChild(script);

        return () => {
          document.body.removeChild(script);
        };
      }, []);

      return null;
    }

    export default LiveChatWidget;
    ```

    Then include `<LiveChatWidget />` in your app layout or on specific pages where you want the widget.
  </Accordion>

  <Accordion title="Google Tag Manager (Works with Any Website)">
    If you use Google Tag Manager (GTM) to manage scripts on your site, this is a great universal method that works regardless of your website platform:

    1. Log in to [Google Tag Manager](https://tagmanager.google.com/).
    2. Select your website's container.
    3. Click **Tags → New**.
    4. Name the tag "Z360 Live Chat Widget".
    5. Click **Tag Configuration** and choose **Custom HTML**.
    6. Paste your Z360 widget `<script>` tag in the HTML box.
    7. Click **Triggering** and select **All Pages** (or choose specific page triggers if you only want the widget on certain pages).
    8. Click **Save**.
    9. Click **Submit** in the top-right corner to publish the change.

    This method is particularly useful if you already have GTM set up, because it keeps all your third-party scripts organized in one place and doesn't require you to touch your website's source code.
  </Accordion>
</AccordionGroup>

## Step 3: Verify It's Working

After adding the code, open your website in a browser (use an incognito/private window to avoid caching issues):

1. Look for the **chat bubble** — it should appear in the bottom-right corner of your page.
2. Click it and **send a test message**.
3. Switch to your **Z360 Inbox** — you should see the test conversation appear there.

If you see the chat bubble and the message comes through in Z360, you're all set.

## Troubleshooting

**The widget doesn't appear on my site.**

* Make sure you pasted the **complete** `<script>` tag. Even a missing character can break it.
* Check that the script is placed **`before the closing </body> tag`**, not inside the `<head>` section. Placing it in the head can cause it to load before the page body exists.
* Clear your browser cache or open the site in a private/incognito window.
* If you're using a caching plugin on WordPress (like WP Rocket, W3 Total Cache, etc.), clear the cache after adding the script.
* Check your platform's plan — some platforms (Wix free, Squarespace Personal, WordPress.com free/Personal) don't allow custom JavaScript.

**The widget appears but I'm not receiving messages in Z360.**

* Send a test message from the widget and check your Z360 **Inbox**. It may take a few seconds.
* Make sure your Z360 account is active and you're logged in.
* Check that the embed code you copied is current — go back to **Settings → Channels → Live Chat Widget** in Z360 and verify the code matches what's on your site.

**The widget appears on some pages but not others.**

* If you added the code to a specific page rather than a site-wide location (like the theme footer or site settings), it'll only show on that page. To make it appear everywhere, add it to your site's footer template or site-wide code injection area instead.

**The widget looks broken or overlaps with other elements.**

* The widget typically floats in the bottom-right corner. If another element on your site (like a cookie banner, back-to-top button, or another chat widget) overlaps with it, you may need to adjust the CSS of the conflicting element to make room.
* Make sure you don't have multiple chat widgets installed from different services — they'll fight for the same screen space.

**I updated my theme/template and the widget disappeared.**

* If you added the code directly to a theme file (like `footer.php` in WordPress), theme updates can overwrite your changes. To prevent this, use a child theme or a plugin like WPCode that keeps your custom code separate from the theme.

## Quick Reference: Where to Paste the Code

| Platform               | Where to Add the Script                                                                      |
| ---------------------- | -------------------------------------------------------------------------------------------- |
| WordPress              | Appearance → Theme File Editor → footer.php (before `</body>`) or use WPCode plugin → Footer |
| Shopify                | Online Store → Themes → Edit Code → theme.liquid (before `</body>`)                          |
| Wix                    | Settings → Custom Code → Body - end → All Pages                                              |
| Squarespace            | Settings → Advanced → Code Injection → Footer                                                |
| Webflow                | Project Settings → Custom Code → Footer Code                                                 |
| GoDaddy                | Settings → Site-wide Code → Footer                                                           |
| Weebly                 | Settings → SEO → Footer Code                                                                 |
| Framer                 | Site Settings → Custom Code → End of body                                                    |
| Google Sites           | Not supported (no custom JavaScript)                                                         |
| HTML / Custom          | Edit your HTML file → paste before `</body>`                                                 |
| React / Next.js / SPAs | Main HTML file (e.g., index.html, \_document.js) → before `</body>`                          |
| Google Tag Manager     | Tags → New → Custom HTML → All Pages trigger                                                 |