Adding chat to a website takes three steps. Decide who will answer, a chatbot, people or both. Then paste your chat provider’s install snippet into every page, usually just before </body>, or install its plugin or app. Finally, test the widget on real devices before you tell anyone. The paste takes minutes. Deciding what chat should answer, and who picks up when it can’t, takes longer and matters more.
Before you install: four decisions
- Who answers
- A chatbot, your team, or a chatbot first with handoff to your team. If you’re unsure, read chatbot vs live chat.
- When
- Your opening hours, and what visitors see outside them. An honest away message beats a chat that looks live but isn’t.
- What it can answer
- The help articles, policies and product pages a chatbot may use. Gather them before you start, and check they’re current.
- Where it appears
- Every page, or only where it helps, such as pricing, checkout and support pages.
Step 1: Get the install snippet
Every chat tool gives you a short piece of code, usually in its settings under “Install” or “Widget”. It normally looks something like this:
<!-- Chat widget: paste before </body> on every page -->
<script src="https://chat.example.com/widget.js"
data-widget="YOUR-WIDGET-ID" async></script>The async attribute lets the page load without waiting for the chat. Keep the snippet exactly as your provider gives it, with your own ID, and add it once per page.
data-launcher="none" to the snippet and put data-conecto-open on any element that should open the chat. Check your provider’s documentation for the equivalent.Step 2: Add it to your site
Where the snippet goes depends on how your site is built. If your chat provider offers a plugin or app for your platform, that’s usually the easiest route.
| Platform | Where the snippet goes | Good to know |
|---|---|---|
| Plain HTML | Paste the snippet just before the closing </body> tag on every page, or in a shared footer include if your site has one. | Upload the changed files and clear any caching layer or CDN. |
| WordPress | Install your chat provider’s WordPress plugin if it has one. If not, use a header-and-footer plugin such as WPCode and paste the snippet into the footer area. | Editing theme files directly works too, but a theme update can overwrite the change. Use a child theme if you go that way. |
| Shopify | If your chat provider has a Shopify app, install it and switch it on under Online Store → Themes → Customize → App embeds. Otherwise go to Online Store → Themes → … → Edit code and paste the snippet before </body> in theme.liquid. | Duplicate your theme first so you have a backup. App embeds survive theme changes; code edits don’t move with a new theme. |
| Squarespace | Open the Code Injection panel and paste the snippet into the Footer field. Squarespace adds it before </body> on every page. | Code injection is available on the Core, Plus and Advanced plans and some legacy plans. |
| Wix | In your site’s dashboard, go to Settings → Custom Code (under Development & integrations), select Add Custom Code, choose Body – end and apply it to all pages. | Your site must be published and have a connected domain before custom code runs. |
| Webflow | In Site settings → Custom code, paste the snippet into the Footer code field, save, and publish the site. | Custom code needs a paid site plan. Changes appear only after you publish. |
| Google Tag Manager | Create a new tag, choose Custom HTML, paste the snippet, set the trigger to all pages, then submit and publish the container. | Useful when you can’t edit the site directly. Check that your consent settings don’t block the tag unexpectedly. |
Step 3: Configure before you go live
- Greeting. Say what you can help with. The greeting generator has welcome, away and handoff messages to adapt.
- Opening hours and away message. Tell visitors when a person will reply, and ask for an email if they might leave.
- Chatbot knowledge. Add only content you’re happy to see quoted back to customers. Review what was imported, and test answers before switching the chatbot on.
- Handoff and notifications. Decide which requests go to a person, who gets notified, and how fast you’ll reply.
- Appearance. Match your colors, and position the launcher where it won’t cover checkout or cookie buttons on mobile.
- Privacy notice. Update your privacy policy to mention chat, and tell visitors not to share sensitive details.
Step 4: Test it like a visitor
Run these checks on the live site, on a laptop and on a phone. Use the demo to see how each chatbot check should look when it passes.
| Test | How | Pass if |
|---|---|---|
| Shows on every page | Open your home page, a product or pricing page, and a blog post. | The launcher appears on each, in the same place. |
| Works on a phone | Open the site on a real phone. Start a chat and type a message. | The input isn’t hidden by the keyboard, and the launcher doesn’t cover buttons or your cookie banner. |
| Keyboard and screen reader | Use Tab to reach the launcher, Enter to open it, and a screen reader to read the first message. | Everything is reachable without a mouse, and the launcher has a spoken label. |
| Messages reach the team | Send a test message during opening hours. | It arrives in the inbox and notifies the right person. |
| After-hours behavior | Send a message outside opening hours. | The visitor sees when they’ll get a reply and can leave a way to be contacted. |
| A documented question | Ask something your help content answers, such as your returns policy. | The answer matches your policy word for word on the facts that matter. |
| A question it can’t answer | Ask something your content doesn’t cover. | The chatbot says it doesn’t know, instead of guessing. |
| A request for a person | Ask to talk to someone, then ask for a refund exception. | The conversation is handed over with its history, and the visitor is told what happens next. |
| Page speed | Run a speed test before and after installing. | The snippet loads asynchronously and doesn’t delay your main content. |
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| The widget doesn’t appear | The snippet isn’t on the page, a caching or optimization plugin is serving an old version, or a consent tool is blocking it. | View the page source and search for the snippet. Clear caches. Check your consent tool’s settings for the chat script. |
| It appears twice | It’s installed in two places, for example through a plugin and a manual snippet. | Remove one of them. |
| It only shows on some pages | The snippet was added to one template instead of the shared layout. | Move it to the site-wide footer or layout file. |
| It covers other buttons | The launcher position clashes with a cookie banner, a “back to top” button or a mobile checkout bar. | Move the launcher or adjust its offset in your chat settings. |
| Blocked by the browser console | A Content Security Policy doesn’t allow the chat provider’s domains. | Add the provider’s script, connection and frame domains to your policy. |
| Nothing changes after editing | The change isn’t published yet, or you edited an unpublished theme. | Publish the site or the theme you edited. |
Privacy and consent
A chat widget processes what visitors type, and it may set cookies or use browser storage to remember a conversation. Mention chat in your privacy policy, check whether your consent tool needs to manage the chat script, and ask visitors not to share passwords, card numbers or health details in chat. Requirements differ by country, so check with whoever advises you on privacy. This guide isn’t legal advice.
Sources and review
Platform steps were checked against each platform’s own documentation on September 23, 2026: Shopify’s guides to app embeds and editing theme code, Squarespace’s code injection article, Wix’s article on embedding custom code, Google’s Tag Manager custom tags help, and the WPCode plugin page. Webflow’s help center couldn’t be reached for this review, so check its current steps before relying on that row. Menu names change, so if a step doesn’t match what you see, your platform’s help center has the latest version.
Test before you install
See how a chatbot should answer, clarify and hand over, then pick a tool that does the same.