How to Add Chat to Your Website, on Any Platform

To add chat to your website, you paste a small script from your chat tool onto every page. Every chat tool works this way, and every website builder, from WordPress to Shopify and Wix, has a place to paste it. If you’re still deciding what a good chat widget looks like, start there. The steps below use ZynfoAI’s website chat widget, but the places to paste are the same for any tool.

Before you paste anything, decide who answers. A live chat widget only helps if someone replies. If your team can’t watch it all day, put an AI agent in front that answers from your own pages and turns what it can’t answer into a help-desk ticket for your team.

ZynfoAI is an AI customer service agent for Shopify stores that answers customers on WhatsApp Business and website chat. It costs from $39 a month, with no per-resolution or per-seat fees, and a 7-day free trial with no card.

Last updated: 23 October 2026

Before you paste: set up the agent

Creating a chatbot used to mean drawing a decision tree: if the visitor clicks “Shipping”, show this message. Today you give an AI agent your website and documents and let it answer in its own words. The work moves from writing every reply to choosing good sources and setting clear rules. Have three things ready: the pages people ask about (pricing, delivery, returns, opening hours, FAQ), any documents with answers (price lists, policy PDFs, spec sheets), and your ten most common questions, pulled from your inbox or WhatsApp. You’ll use those to test.

1. Add your sources. Enter your website URL and choose which pages to import, then upload your documents. The crawler respects your robots.txt file. More isn’t better: leave out old pages with outdated prices or services you no longer offer, because the agent can’t tell which version is current.
2. Write the agent’s instructions. Give it a role, a goal and a few plain rules, for example: “You answer questions for Birchwood Kitchens, a kitchen fitter near Reading. Answer only from our sources. If a visitor asks for a quote, collect their name, phone and postcode. Never quote discounts.” Then set a greeting, quick replies for your three most common questions, and a fallback message for when it has no source: “I don’t have that on file. Leave your email and we’ll reply today.”
3. Decide what reaches your team. Questions the agent can’t answer become help-desk tickets with the conversation attached. Live chat handoff to a teammate, with working hours, is on the Pro plan; the human handoff page explains it. If you want leads, keep the in-chat form to the fields you’ll use; the lead capture chatbot guide covers qualifying questions.
4. Make it look like your site. Set the colours, corner, size and font size, and turn on source links so visitors can check answers. Use the live preview for desktop and mobile.
5. Test in the Playground. Ask your ten common questions and check each answer: is it right, does it cite the right page, is it short enough to read on a phone? Then try to break it: ask about something you don’t sell, ask for a discount, ask for a person, ask the same question another way. Nielsen Norman Group’s study of chatbot user experience found people respond well when a bot is honest about not understanding, so check that path as carefully as the answers. When an answer is wrong, the fix is almost always in the sources or the instructions.

How a chat widget works

The script you paste does three things. It draws the chat bubble in the corner of the page. When a visitor sends a message, it passes it to the chat service, where an AI agent or a teammate replies. Then it shows the reply in the same window.

That’s why the setup is the same on every platform. Nothing about your site changes except one script tag.

Step 1: Get your embed code

In ZynfoAI, train your agent on your website and documents, set its greeting and colours, and copy the embed code from the agent’s settings. It looks like this:

<script id="__chatbotSdk__" src="https://app.zynfo.ai/widget/embed.js" data-chatbot-id="YOUR_AGENT_ID" async></script>

The async attribute tells the browser to fetch the script in parallel while the page keeps loading, so the chat never holds up your content.

Step 2: Paste it on your platform

Put the code once, in a place that loads on every page. Just before the closing </body> tag is the usual spot.

Plain HTML site

Paste the line just before </body> in your page template, or in every HTML file if you don’t have a shared template.

WordPress

Use a header-and-footer scripts plugin, or add it to your child theme’s functions.php with the wp_footer hook. Both methods, with code, are in our WordPress chatbot setup guide.

Shopify

Install the ZynfoAI Shopify app. It adds the chat to your storefront and connects your catalog and orders, so the agent can help shoppers find products and look up order status. If you’d rather paste the script, it goes before </body> in your theme’s theme.liquid file. Our ecommerce chatbot guide covers what the agent can do for a store.

Wix

Go to Settings, then Custom Code, and add the line with placement set to “Body – end” on all pages. Wix’s help article on embedding custom code notes that your site must be published with a connected domain first.

Squarespace

Paste the line into the Footer field of the Code Injection panel. Squarespace adds footer code before the closing body tag on every page, and the feature is available on its Core, Plus and Advanced plans.

Webflow

Open your site settings, go to Custom code, and paste the line into the “Footer code” box. Publish the site for it to appear.

React and Next.js

In Next.js, add it to your root layout with the Script component. Next.js lists chat plugins as a good fit for the lazyOnload strategy, which loads them when the browser is idle:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="__chatbotSdk__"
          src="https://app.zynfo.ai/widget/embed.js"
          data-chatbot-id="YOUR_AGENT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

In a plain React app, put the script tag in public/index.html before </body>. Load it once at the top level, not inside a component that mounts on every route.

Step 3: Lock it to your domain

Add your domains under Allowed Domains in the agent’s settings. The widget then only loads on your sites, and nobody can copy your embed code onto theirs. If you test on a staging domain, add that too.

Step 4: Test before you tell anyone

Open your site in a private window, on desktop and on your phone.

• Does the bubble appear, and does it cover anything important?
• Ask your three most common questions. Are the answers right, with a source?
• Ask something your site doesn’t cover. Does the agent say so, or guess?
• Type “I want to talk to a person”. Does it open a ticket and tell the visitor what happens next?

You can also test answers in the ZynfoAI Playground before you publish.

Step 5: Go live and read the first conversations

Publish the agent. Read the first few days of chats closely. Unanswered Questions shows what visitors asked that your content didn’t cover, which is usually the quickest fix.

After that, spend ten minutes a week on it:

1. Open Unanswered Questions in the dashboard. Each one is a gap in your content.
2. Add or fix the page that should have answered it, then click Resync. Sources don’t refresh on their own.
3. Skim a handful of conversations that went wrong and adjust the instructions.

When it doesn’t show up

No bubble at all. Check the code is on the published site, not just a draft, and that your domain is in Allowed Domains. Then check for an ad blocker or a cookie tool that blocks third-party scripts.

It covers another button. Move it to a different corner in the widget’s appearance settings.

Answers are out of date. Sources don’t refresh themselves. After you change a page, click Resync on that source.

Frequently asked questions

How do I integrate chat into my website?

Copy your chat tool’s embed code and paste it once in a place that loads on every page, usually just before the closing body tag. Most builders have a custom code or code injection setting for this.

Can I add chat to just one page?

Yes. Paste the code into that page only instead of the site-wide template. On Wix, choose specific pages when you add the custom code.

Do I need a developer?

No, for WordPress, Shopify, Wix, Squarespace and Webflow. Each has a place to paste code. A custom React or Next.js site needs someone who can edit the layout file.

Will chat slow my site down?

Not if the script loads asynchronously. ZynfoAI’s draws a light bubble first and loads the full chat window when a visitor reaches for it.

Can the chat collect leads?

Yes. The agent can collect a visitor’s name, email and phone in the chat and save them as a lead. See the lead capture chatbot guide.

Should I build a chatbot myself or use a platform?

You can build one from scratch with an AI model’s API. You’ll need to handle crawling and splitting your content, search, the chat interface, conversation storage and protection against misuse. That’s a reasonable project for a software team with time to maintain it. A platform makes sense when you want the agent live this week and would rather spend your time on the answers. ZynfoAI is from $39/month, no per-resolution fees; see pricing.

What happens when it doesn’t know the answer?

It sends your fallback message instead of guessing, and opens a help-desk ticket so your team can reply.

For design choices like placement, colour and greetings, read our chat widget UI design guide. Everything ZynfoAI’s widget can do is on the website chat widget page.