Skip to main content
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:
<script src="https://widget.z360.biz/your-unique-id.js"></script>
(Your actual code will have your organization’s unique identifier in it.)
  1. 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.
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.
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.
  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.
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.
  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.
  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.
  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.
  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.
  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.
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).
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>:
    {/*  Z360 Live Chat Widget  */}
    <script src="https://widget.z360.biz/your-unique-id.js"></script>
  </body>
</html>
  1. 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.
For React-based sites and other JavaScript frameworks, you have two options:Option A: Add to the public HTML fileMost 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:
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 componentIf you prefer to load the widget programmatically (for example, to only show it on certain pages):
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.
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.
  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.

​
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

PlatformWhere to Add the Script
WordPressAppearance → Theme File Editor → footer.php (before </body>) or use WPCode plugin → Footer
ShopifyOnline Store → Themes → Edit Code → theme.liquid (before </body>)
WixSettings → Custom Code → Body - end → All Pages
SquarespaceSettings → Advanced → Code Injection → Footer
WebflowProject Settings → Custom Code → Footer Code
GoDaddySettings → Site-wide Code → Footer
WeeblySettings → SEO → Footer Code
FramerSite Settings → Custom Code → End of body
Google SitesNot supported (no custom JavaScript)
HTML / CustomEdit your HTML file → paste before </body>
React / Next.js / SPAsMain HTML file (e.g., index.html, _document.js) → before </body>
Google Tag ManagerTags → New → Custom HTML → All Pages trigger