How to Add an AI Chatbot to Your Website (Embed, Hosted Page or Custom Domain)

To add an AI chatbot to your website, you usually paste a short script snippet into your site’s footer or theme so a chat widget appears on every page. If you can’t edit the site, you can instead link to a hosted chatbot page, or serve that page on your own custom domain. Whichever you choose, the bot should be branded to match the site, placed where it doesn’t block anything important, and opened with a welcome message that tells visitors what it can help with.

This guide covers the three delivery options, how to install a script embed on common website setups, placement and UX, performance, and the welcome message.

Three ways to add a chatbot to a website

Many businesses use more than one: the widget on the website, plus a hosted link in email signatures and printed materials.

Option 1: Adding the chatbot with a script embed

A script embed is a few lines of HTML, usually a <script> tag, provided by your chatbot platform. When the page loads, the script adds the chat bubble and window to the page.

General steps

1. Configure and test your chatbot first. (Don’t embed an untested bot; see our pre-launch chatbot testing checklist.)
2. Copy the embed snippet from your chatbot platform.
3. Paste it into a place that loads on every page, typically just before the closing </body> tag, or in a “footer scripts” or “custom code” setting.
4. Publish or save the site, then clear any caching plugin or CDN cache.
5. Open the site in a private browser window and on a phone to confirm the widget appears.

Where to paste the script on common website setups

These are general pointers; exact menu names change, so check your platform’s current documentation for “adding custom code” or “footer scripts.” None of these require a dedicated chatbot plugin; a plain script embed works wherever you can add custom HTML.

• WordPress: add the snippet through your theme’s footer or custom code settings, or with a general-purpose “insert headers and footers” style plugin. Avoid editing theme files directly unless you use a child theme, or updates may erase it.
• Shopify: add the snippet to your theme’s layout file (commonly theme.liquid) before </body>, or via the theme’s custom code option if available. Duplicate the theme first so you can roll back.
• Webflow, Wix, Squarespace and similar builders: look for site-wide custom code settings (often “footer code” or “code injection”). Some features may depend on your plan.
• Custom-built sites and frameworks: add the script to the shared layout or template that wraps all pages. For single-page apps, include it once in the root HTML file so it doesn’t reload on every route change.
• Tag managers: you can deploy the snippet as a custom HTML tag if that’s how your team manages scripts, but test carefully, since tag managers can change load order.

Showing the bot on some pages only

If the bot should only appear on certain pages (for example, support pages but not checkout), add the snippet to those page templates instead of site-wide, or use your platform’s page-level code settings.

Option 2: A hosted chatbot page

A hosted bot page is a standalone page, provided by the chatbot platform, that shows only the chat interface. You link to it from wherever you like:

• A “Help” or “Ask us” link in your site navigation
• Email signatures and newsletters
• QR codes on packaging, menus, signage or brochures
• Social media profiles
• A client’s website when they can’t install scripts yet

Hosted pages are the fastest route to launch, with no website changes needed, and are useful as a fallback while a web team schedules the embed.

Option 3: Hosting on a custom domain

A custom domain puts the hosted bot page on an address you own, such as help.yourbrand.com or ask.yourbrand.com. It keeps the experience on-brand and makes the link easier to trust and remember. Setup usually involves adding a DNS record (often a CNAME) at your domain registrar or DNS provider, following your platform’s instructions. For agencies, a custom domain per client is a strong way to make a white-label chatbot feel fully the client’s own.

Placement and UX best practices

• Bottom-right is the convention. Visitors look for chat there. Choose bottom-left only if something important already occupies the right.
• Don’t cover key actions. Check that the bubble doesn’t sit on top of “Add to cart,” cookie banners, back-to-top buttons or other widgets.
• Avoid aggressive auto-open. A chat window that pops open on every page load is often perceived as intrusive, especially on mobile. Let visitors open it.
• Match the brand. Use the site’s colors and a clear bot name. A widget that looks foreign reduces trust.
• Check contrast. Make sure text in the widget is readable against its background colors, including for visitors with low vision.
• Test on real phones. Chat windows often take up most of a mobile screen. Check that the close button is easy to reach and the on-screen keyboard doesn’t hide the input field.
• Make sources visible. If your bot shows citations, keep them visible so visitors can check answers. Read more on why source citations matter.

Performance considerations

A chat widget is third-party JavaScript, so treat it like any other script:

• Load it once, site-wide, rather than pasting it into multiple sections of the same page.
• Place it at the end of the page body or load it asynchronously if your platform’s snippet supports it, so it doesn’t block the main content from rendering.
• Measure before and after. Run a page-speed test (such as Lighthouse in Chrome DevTools) with and without the widget to see its real impact.
• Watch for conflicts. Two chat widgets on one page, or a bot plus an old live-chat script, can clash visually and slow the page. Remove what you no longer use.
• Mind your cookie and privacy setup. If you use a consent tool, check how it treats the widget script and update your privacy notice to mention the chatbot if needed. Get proper advice for your jurisdiction.

What to put in the welcome message

The welcome message sets expectations. A good one is short and does three things:

1. Says what the bot is. “Hi, I’m the Acme assistant.”
2. Says what it can help with. “I can answer questions about our services, pricing and bookings.”
3. Invites a question. “What would you like to know?”

Useful additions:

• Two or three suggested questions visitors can click or copy, if your platform supports them
• A note that answers come from the business’s own website and documents
• A pointer to the contact page for anything the bot can’t help with

Avoid overpromising (“I can help with anything!”) and avoid pretending to be a human.

Adding a chatbot with Techvia AI Bot

Techvia AI Bot supports all three delivery options: an embeddable chat widget via script embed, a hosted bot page, and custom-domain hosting. Widget branding and colors can be customized to match the site. The bot answers from website content and PDF, DOCX and Markdown documents with source citations. Agencies can manage each client’s bot in its own workspace. Techvia AI Bot uses a standard script embed rather than platform-specific plugins, so it goes wherever your site lets you add custom code.

Frequently asked questions

Do I need a developer to add an AI chatbot to my website?

Not usually. If your website builder or CMS has a custom code or footer scripts setting, you can paste the snippet yourself. If you can’t edit the site at all, a hosted bot page needs no website changes.

Will a chatbot widget slow down my website?

Any script adds some load. A well-built widget loaded once, at the end of the page or asynchronously, typically has a modest impact. Measure page speed before and after to know for sure.

Can I add the chatbot to only some pages?

Yes. Paste the script into specific page templates or use page-level code settings instead of the site-wide footer.

What’s the difference between a hosted chatbot page and an embedded widget?

An embedded widget appears on top of your existing pages, so visitors can chat without leaving. A hosted page is a separate page dedicated to the chat, useful for links, QR codes and sites you can’t edit.

Next step

If you’d like to see the widget, hosted page and custom-domain options working on a real site, book a demo of Techvia AI Bot and confirm pricing and onboarding for your setup.