AI Chatbot for Website: The Free Setup That Just Works

Embed a trained AI chatbot on any page in under an hour — no card, no code sprint required.

The WaSMS TeamSeptember 21, 20265 min read
Share

Someone lands on your site at 11 PM with a question, and there's nobody at the desk. That's the gap a chatbot is supposed to close, and most of them don't — they either say nothing useful or bounce the visitor to a contact form they'll never fill in. If you're looking for an ai chatbot for website visitors that actually understands your business instead of reciting a script, the setup is simpler than the marketing pages make it sound: connect the AI to your existing WaSMS conversations, paste one snippet into your site, and the widget goes live already trained on how your business actually talks to customers.

What an ai chatbot for website widget looks like

The widget sits as a small chat bubble in the corner of the page, wherever your visitors expect a chat tool to live. Click it and it opens into a chat panel with a greeting message you write, a "typing…" indicator while the AI composes a reply, and full message history if the same visitor comes back later on the same browser. It's not a popup that steals the screen on page load — it waits until someone wants it.

![WaSMS chat widget open on a boutique website, showing a greeting message and an AI reply in progress](IMAGE_NEEDED: screenshot of the website widget open in the bottom-right corner of a demo site, mid-conversation)

Because it's the same AI trained on your WhatsApp, SMS, and email history, the answers on your site match the answers your team already gives — not generic "great question, let me look into that" filler. If you're still weighing whether a bot or a live human should staff that corner of your site, our comparison of chatbots vs. live chat walks through when each one wins.

The widget also remembers context within a session. If a visitor asks about shipping times and then, two messages later, asks "does that include weekends," the AI knows what "that" refers to. It's a small thing, but it's the difference between a chatbot and a keyword-matching FAQ box wearing a chat icon.

Copy-paste embed code

There's no plugin to install and no build step. In Admin → Channels → Website Widget, generate your widget ID, then paste one script tag before the closing </body> tag of your site:

<script
  src="https://cdn.wasms.net/widget.js"
  data-wasms-id="YOUR_WIDGET_ID"
  async
></script>

That's it — on WordPress, Shopify, Webflow, a hand-built site, or anything else that lets you edit the page template. Sarah, who runs a small candle boutique, pasted the same line into her Shopify theme.liquid file and had the widget live before her coffee got cold. No developer, no ticket to an agency, no waiting on a plugin update.

Performance tip: the async attribute matters. It tells the browser to keep rendering your page while the widget script loads in the background, so the chatbot never blocks your page's first paint. If you're chasing a perfect Lighthouse score, the widget also exposes a manual init() call so you can delay loading until the visitor scrolls or has been idle for a few seconds — useful on image-heavy landing pages where every millisecond of initial load counts. For a broader look at free options in this space, see our guide to a free ai chatbot for business.

Styling to match your brand

A chatbot that looks bolted on from a different company undoes the trust it's supposed to build. In the widget settings you can set the accent color, the bubble icon or your logo, the greeting text, and which corner it opens from. There's also a compact mode for sites that already run a cookie banner or a promo bar, so the widget doesn't stack on top of them and block the page.

![Widget appearance settings panel showing color picker, avatar upload, and greeting message field](IMAGE_NEEDED: screenshot of Admin -> Channels -> Website Widget -> Appearance tab)

None of this requires CSS or a design file. If your brand uses a specific shade of blue, that's a hex code typed into a settings field, not a request sent to a developer and forgotten for three weeks.

Routing to WhatsApp or human

Not every visitor wants to keep typing in a browser window, and not every question belongs to a bot. Two escape hatches matter here. First, a "Continue on WhatsApp" button hands the same conversation — and the AI's memory of it — over to WhatsApp, so a visitor can close their laptop and keep talking from their phone on the bus home. Second, when the AI's confidence drops below the threshold you set, it escalates to a human teammate instead of guessing and possibly getting it wrong. Our guide on AI escalation and when to hand off to humans covers how to tune that threshold for your business.

A chatbot that never hands off is a wall. One that hands off too eagerly is just decoration wearing an AI label. The right setting sits in the middle, and it's worth revisiting after your first week of real traffic, not set once and forgotten.

For a wider view of where a website widget fits into your overall support setup, our AI for customer service guide covers the whole picture, not just the widget on its own.

Measuring conversion lift

The dashboard behind your widget shows conversations started, resolution rate (handled without a human touching it), and — once you've set up goal tracking — how many chats led to a booking, a quote request, or a completed order. Give it two full weeks before judging the numbers. Early conversations teach the AI the specific questions your website traffic asks, which are often narrower and more price-focused than the questions it sees over WhatsApp or email.

Watch the resolution rate trend, not the day-one number. A widget that resolves 40% of chats in week one and 65% by week four is doing exactly what it should — learning from every correction your team makes.

If you're still deciding between a full chat widget and a simpler live-chat-only tool, our breakdown of a free live chat alternative compares the tradeoffs directly, including what you give up by skipping the AI layer entirely.

What to read next:

Frequently asked questions

No — the widget script loads asynchronously, so it doesn't block your page's initial render. If you want to go further, you can delay loading until a visitor scrolls or has been idle for a few seconds, which is useful on already-heavy landing pages.

Related articles