Practical guide
Integrate an AI chatbot in your website (5 ways)
Putting an AI chatbot on your website isn't a developer project. Below: five integration patterns — from the classic floating widget to inline embeds and direct email links — what each one delivers, and which fits which type of site. Includes the no-code steps and what to test before launch.
1. Floating widget bottom-right
The classic. A round button in the corner with a greeting or prompt. Click to open a conversation; close it and it minimises. Works for 80% of webshops and service sites we see.
When to choose
Default. Start here unless you have a specific reason for something else.
2. Inline embed on the support page
The chatbot sits as a regular block on the page, not an overlay. Strong on /support or /faq pages where visitors actively seek help. Advantage: visitors see it's there and type their question right away.
3. Pre-launch trigger on intent
The chatbot opens itself on a specific event: the user scrolls past 70% of a product page, lingers 30 seconds, or moves towards the exit button. Powerful for product pages with a conversion goal — easy to over-trigger.
What you don't do
Auto-open after 3 seconds on the home page. That's advertising, not service. Trigger on intent, not on time.
4. Side panel for long product pages
A fixed panel to the right of the product content, only on specific pages. Works on B2B sites and complex product categories where visitors get questions while reading. The chatbot stays visible as they scroll.
5. Direct link from email or campaign
A URL that opens a chat directly on your site, optionally with a pre-filled question. Strong in newsletters, return confirmations and service emails: one click and the customer is in the conversation with context.
Which form fits which site
| Site type | Recommended | Optional |
|---|---|---|
| Webshop (B2C) | Floating widget | Pre-launch trigger on product page |
| Webshop (B2B) | Floating widget + side panel | Inline on quote page |
| Service / advice | Floating widget | Inline on contact page |
| Docs / knowledge base | Inline embed | Floating widget |
| Campaign landing page | Pre-launch + direct link | — |
The technical bit in 5 minutes (no-code)
- Copy the script from your Chatwize dashboard.
- Paste it in the footer or right before the </body> tag.
- Refresh the page — the widget appears bottom-right.
- In the dashboard, adjust colour, position and welcome message.
- Done. No build step, no deploy, no DNS.
For WordPress, Shopify, Webflow, Wix
All four have a “custom code” or “embed” field in settings where the script fits. No plugin needed — the official embed fields work.
What to test before launch
5 tests before you publish
- Does the chatbot work on mobile (iOS Safari, Android Chrome)? Behaviour differs on smaller screens.
- Close and reopen the conversation — does it remember context within one session?
- Test in incognito — display can shift due to cookie banners.
- Click a link the bot shows — does it open in a new tab or overwrite the page?
- Try it in another language — does it detect and switch correctly?
Frequently asked questions about an AI chatbot on your website
- What script do I put in the HTML?
- A single JavaScript snippet from your dashboard, pasted in the footer (just before </body>). It loads the widget asynchronously, so it doesn't slow down your site. No build, no package manager, no extra dependencies.
- Does this work with WordPress, Shopify, Webflow or Wix?
- Yes, in all four. WordPress: in the theme file or via an “Insert Headers and Footers” plugin. Shopify: in theme.liquid before </body>. Webflow: Project Settings → Custom Code → Footer. Wix: Settings → Custom Code. No marketplace plugin needed.
- How do I match the chatbot to my brand?
- In the dashboard: primary colour, accent colour, corner radius, font, logo, welcome message and optional image. For 95% of sites that's enough to blend seamlessly. Advanced CSS overrides are optional.
- Can I test the chatbot on a single page first?
- Yes. Paste the script only on that specific page (in WordPress per page via a Custom HTML block, in Webflow via per-page custom code). That way you test on a staging page before going site-wide.
- What if the chatbot doesn't load?
- Three most common causes: (1) the script is in the </head> instead of just before </body>, (2) Content Security Policy blocks external scripts, (3) the visitor's ad blocker. The last is a visitor choice, not a bug.
- Does the chatbot slow down my page (and SEO)?
- No, as long as you load the script asynchronously (Chatwize default). The widget initialises after page load, so your Core Web Vitals (LCP, INP, CLS) stay untouched. A good chatbot has <50KB initial payload.
Ready to make this happen for your team?
Book a short demo and we'll show how Chatwize fits your customer questions, channels and processes.