How to Add an AI Chatbot to Your Website (5-Minute Guide)

The embed snippet

Every bot has its own embed script on the Widget tab, already scoped to that bot's ID. It loads asynchronously, so it never blocks the rest of the page from rendering, and it renders a floating chat bubble in the corner of the screen once loaded.

Restricting the widget to your own domains

The widget's config settings include an allowed-domains list — once set, the bot will only render on those origins, even if someone copies the script tag elsewhere. This matters more than it might seem: without it, anyone who views your page source could paste the same snippet onto an unrelated site and have your bot answer questions there too. Setting the allow-list once closes that off.

Matching it to your brand

Widget settings cover the visual details that make it feel native to your site: theme (light or dark), position (which corner it docks to), a primary color that carries through the bubble and message bubbles, and the greeting and placeholder text shown before a visitor types anything. Custom CSS is available for anything the settings don't cover directly.

None of this requires a rebuild or redeploy on your end — widget settings are read live each time the script loads, so a color or greeting change takes effect the next time a visitor loads the page.

Install the chatbot in three steps

First, create a bot and add the pages, documents, or question-and-answer pairs it should use. Next, open that bot's Widget tab and copy its script snippet with the bot ID already included. Finally, paste the snippet into the shared footer or site-wide code area immediately before the closing body tag, save, and publish your website.

If your site has separate staging and production domains, add the domains that should display the widget to the bot's allowed-domains settings. After publishing, open a public page in a private browser window, check that the chat button appears, and ask a question whose answer is present in the content you added. Use the same source material on the website and in the chatbot to keep answers aligned.

The script-tag snippet

Copy the exact snippet from the Widget tab whenever possible. The example below uses a placeholder bot ID; replace it with the ID from your own dashboard. Keep the script asynchronous and add it once to the shared layout so it is not injected repeatedly on every component render.

<script src="https://api.primewebkit.com/widget.js" data-bot-id="YOUR_BOT_ID" async></script>

Use an iframe or full-page chat link

A floating widget is not the only option. If you want chat inside an existing page, use the embed URL and bot identifier supplied by the dashboard or integration instructions to build an iframe. Set a useful title for accessibility, give the frame enough height, and test it at mobile widths. Do not guess endpoint parameters; copy the supported URL from your bot's Widget tab.

Every bot also has a full-page conversation URL in the form `https://chat.primewebkit.com/chat?id={botId}`. Link to it from a navigation item, support page, email, or QR code when a dedicated chat destination is easier to find than a floating bubble. Verify the URL with your bot ID and check that the chat page has the intended branding and knowledge sources before sharing it publicly.

Choose the install route for your platform

For a custom HTML site, add the script to the shared HTML layout. For WordPress, use the theme footer or a trusted header/footer script plugin; for Shopify, add it to the shared theme layout. The exact menus can change by platform version, so follow your platform's current editor instructions and test after publishing.

The general install guide documents the currently supported plain HTML, WordPress, and Shopify paths. Platform-specific guides for other builders are being developed; until they are published, use the platform's official custom-code area only if your plan and editor support it, or ask your site administrator to add the script in the shared layout.

Prepare the chatbot before adding it to your site

Create the bot and review its content before installation. Add current public pages or approved documents, configure the welcome message and appearance, and confirm the fallback instruction for questions outside the knowledge base. A new widget that loads correctly can still harm trust if it answers from outdated content, so test several representative questions in the dashboard before putting it in front of visitors.

Choose where it should appear and who is responsible for maintaining the snippet. A site-wide footer is convenient for general support, while a dedicated product or help page can be a better fit if visitors need more context. Coordinate with the person who controls the site's theme, content-security policy, and release process so the script is added once and can be removed or updated deliberately.

Check accessibility and mobile behavior

After installation, test the widget with a keyboard: move focus to its launch control, open it, navigate the messages and input, send a question, and close it without a mouse. Confirm that focus remains visible, the control has an understandable accessible name, and text is readable at the browser's zoom settings. The widget should not cover essential navigation or consent controls.

Check common phone widths and rotate the device if your audience uses landscape mode. Confirm the chat panel stays within the viewport, the input is not hidden behind the keyboard, and the close control remains reachable. If the widget overlaps a persistent cookie banner or a store checkout button, adjust the placement in its supported settings or choose a page-specific display approach.

Plan for site changes and snippet ownership

Theme upgrades, redesigns, and a switch to a new CMS can remove a script that was pasted into a theme file. Record where the snippet was added and include it in the website's deployment checklist. Keep the source snippet in the appropriate site configuration rather than scattering copies across individual pages, which makes later updates easier to review.

When changing the bot, update content and settings in its dashboard and verify the published page still loads the expected bot ID. If you replace a bot, remove the old snippet and test for duplicate launch buttons. A small maintenance check after a theme release can catch a missing widget before visitors rely on it.

Verify platform-specific code placement

On a plain HTML site, place the snippet in the shared document template so it appears only once per page. On WordPress, the documented route is the theme footer or a script-insertion plugin; consider whether a theme update will overwrite a direct edit. In Shopify, use the shared theme layout rather than an individual product template if the widget should appear throughout the storefront.

Preview modes are not always equivalent to the published site. Some editors sanitize script tags, delay them until a page interaction, or render a different template for logged-in users. After publishing, inspect the public page source and browser network panel. If the script is missing, review the platform's current custom-code policy and your site's content-security rules instead of pasting the same snippet into multiple pages.

Troubleshooting when the widget does not appear

First verify that the script was saved in the published page source, the bot ID is correct, and the script URL is reachable. Check the browser console and network panel for a blocked request, a content-security-policy restriction, an invalid ID, or a JavaScript error. If the website uses a caching or optimization plugin, clear its cache and temporarily test whether script deferral or minification changed the tag.

If the widget appears only for logged-in administrators, check whether the public page template differs from the editor preview. Confirm the published domain is on the bot's allowed-domain list, including the `www` variant if it is used. Make one change at a time, then retest in a private window so cached configuration does not hide the result.

Before you call it done

Load the page in a private window to confirm the bubble appears without any cached state, send a real question that should hit your knowledge base and confirm the answer is accurate, and check that the allowed-domains list includes every domain and subdomain the site is actually served from (including a staging domain, if you test there too). If lead capture is on, send a message that should trigger it and confirm the lead appears on the Leads page.

Check keyboard access, visible focus, readable contrast, and whether the widget obscures a mobile page control. Test a narrow phone width and a tablet as well as desktop, then verify the chat can be opened, used, and closed without preventing access to the underlying page.