How do I add an AI chat widget to my website?

Copy the widget's embed script and paste it into your site before the closing body tag, or into your site builder's custom-code or footer-scripts box. It loads on every page automatically, with no developer required.

Do I need a developer to install a chat widget?

No. On WordPress, Shopify, Webflow, Squarespace, and Wix you can paste the snippet into a settings or custom-code box yourself in a few minutes.

Will a chat widget slow down my website?

A well-built widget loads asynchronously, so it does not block your page from rendering and has a negligible effect on load speed.

How to Add an AI Chat Widget to Your Website

Adding an AI chat widget to your website is a one-line code change: you copy a small script and paste it into your site before the closing </body> tag - or into your site builder’s custom-code box. It then loads on every page automatically. No developer, no plugin maze. Below are the exact steps for WordPress, Shopify, Webflow, Squarespace, Wix, and custom sites, plus the part most guides skip: the setup that actually makes the widget useful.

The 60-second version

Every modern AI chat widget gives you a snippet that looks like this:

<script src="https://app.yourprovider.com/widget/loader.js" data-key="YOUR_PUBLIC_KEY" async></script>

Paste it once, site-wide, before </body>. That is it - the widget appears in the corner of every page. The platform-specific steps below are just where to paste it.

Keep the async attribute. It tells the browser to load the widget without blocking your page, so your site stays fast.

WordPress

Two easy options:

Without a plugin: In your theme, go to Appearance > Theme File Editor and add the snippet to footer.php just before </body>. (Use a child theme so updates do not overwrite it.)
With a plugin (recommended): Install a “header and footer scripts” plugin (for example, WPCode or Insert Headers and Footers), open it, paste the snippet into the Footer box, and save. Done - no theme editing.

Shopify

From your admin, go to Online Store > Themes.
On your live theme, click … > Edit code.
Open theme.liquid, scroll to the bottom, and paste the snippet right before </body>.
Save. It is now live across your storefront.

Webflow

Open Site settings > Custom code.
Paste the snippet into the Footer Code box (before </body>).
Save, then Publish the site.

For a single page only, use the page’s own Settings > Custom code instead.

Squarespace

Go to Settings > Advanced > Code Injection.
Paste the snippet into the Footer box.
Save.

(Code Injection is available on Business and Commerce plans.)

Wix

In your dashboard, open Settings > Custom Code (under Advanced).
Click Add Custom Code, paste the snippet, and name it.
Set it to load on All pages, place it in the Body - end, and apply.

Custom, React, or Next.js sites

Plain HTML: paste the snippet before </body> in your template.
React: load it in a top-level component with a useEffect that appends the script, or use your framework’s script helper.
Next.js: use next/script with strategy="afterInteractive" in your root layout so it loads on every route without blocking.

The part that actually matters

Installing the widget is the easy 5 minutes. The setup that decides whether it works is feeding it your real business information - your hours, services, pricing, service area, and FAQs - so its answers are accurate instead of generic. A widget grounded in your business answers “do you cover my area on weekends?” correctly. A generic one guesses, and a wrong answer is worse than no widget. Good onboarding walks you through this; budget more time for it than for the install.

Two more things worth setting before you go live:

Lead routing. Make sure captured leads land where your team already works - ideally one shared inbox with your text and email replies, not a separate tool.
Hand-off rules. Decide when the AI should bring in a human, so visitors who need a person get one.

Verify it is working

Open your site in an incognito window and confirm the widget appears.
Ask it a real question only your business would know (“what are your Saturday hours?”) and check the answer.
Run through a capture: give it a name and number and confirm the lead shows up in your inbox.
Check it on mobile - that is where most visitors are.

Frequently asked questions

Paste the widget’s embed script before your closing </body> tag, or into your site builder’s custom-code/footer box. It loads site-wide automatically.

Do I need a developer?

No. On WordPress, Shopify, Webflow, Squarespace, and Wix you paste the snippet into a settings box yourself in a few minutes.

Will it slow down my site?

No - a well-built widget loads asynchronously, so it does not block your page from rendering.

Can I show it on some pages only?

Yes. Most builders let you scope custom code to specific pages, and most widgets let you target which pages they appear on.

The bottom line

Adding an AI chat widget is a paste-one-snippet job on every major platform. The work that earns you leads is what comes after the install: grounding the widget in your real business, routing leads to one inbox, and setting clean hand-off rules. Do those, and the widget starts catching leads the same day.

Get a widget that is easy to install and grounded in your business: Marqeable’s AI website chat is a single snippet, answers from your real business info, and drops qualified leads into one shared inbox.

Marqeable is the AI marketing platform that helps you generate more leads and qualify them instantly - across website chat, text, email, and social. Website chat and SMS replies land in one inbox with automatic STOP/opt-out handling and quiet-hours sending; for founding customers, AI-drafted replies and email replies in the same inbox are live too. Request founding access to lock in beta-tier pricing.