To embed a chatbot widget in one line, copy the script tag from your AI Orchestrator profile after bot generation and paste it once before the closing </body> tag on every page where visitors should see chat, with your chatbot ID, theme, welcome message, and optional calendar-first booking baked into data attributes.

Most teams delay chatbots because they expect API projects, design sprints, and plugin conflicts. AI Orchestrator flips that timeline: submit your public website URL, wait about 10-60 seconds for crawl-based generation, then deploy a hosted widget that talks to our API. You do not provision servers or write backend routes.

This install guide covers the snippet structure, platform-specific steps for WordPress and Webflow, performance practices, Shopify exceptions, and testing checklists for 2026. If you need calendar booking after embed, connect Google Calendar from profile, details are in the Google Calendar booking guide.

How do I embed an AI chatbot on my website?

After AI Orchestrator generates your bot from a website crawl, open your agency profile, copy the full embed block, and paste it immediately before </body> on a layout that loads on all public pages, or inject it site-wide via Google Tag Manager with an all-pages trigger.

The widget loads chatbot-widget.js, passes your unique data-ai-orchestrator-id, and reads styling flags such as theme color, welcome message, and data-show-booking-first="true" when you want scheduling prominent on landing pages.

One snippet per site is the rule. Duplicate tags on the same page can spawn double widgets or race conditions. If you use a staging environment, paste there first, test chat and booking, then promote the same block to production.

New accounts start on the request form at aiorchestratoragency.com. Starter plan includes 2,000 conversations and 3 monthly calendar appointments; see pricing before high-traffic launches.

What does the embed snippet look like?

The snippet is a single deferred <script> tag pointing at chatbot-widget.js with data attributes for chatbot ID, API base URL, theme, placeholder text, welcome message, language behavior, avatar visibility, auto-open, booking-first mode, powered-by text, font, and logo URL.

A representative structure (your IDs and logo URL will differ) looks like this:

<!-- AI Orchestrator Chatbot Widget -->
<script
 src="https://www.aiorchestrator.dev/chatbot-widget.js"
 data-ai-orchestrator-id="YOUR_CHATBOT_ID"
 data-api-key="https://aiorchestrator-vtihz.ondigitalocean.app"
 data-theme="blue"
 data-title="Support"
 data-placeholder="Type your message..."
 data-welcome-message="Welcome! Ask a question or book a time below."
 data-primary-language="auto"
 data-show-avatar="true"
 data-auto-open="true"
 data-show-booking-first="true"
 data-powered-by-text="Powered by AI Orchestrator"
 data-font-family="Inter"
 data-logo="https://aiorchestrator-vtihz.ondigitalocean.app/api/chatbot/YOUR_CHATBOT_ID/logo"
 defer>
</script>

Do not edit the chatbot ID or API URL unless support instructs you. Branding changes should happen in profile so regenerations stay consistent across Shopify and external sites.

Does the one-line embed work on WordPress?

Yes. On WordPress, paste the snippet into a footer injection plugin such as WPCode or Insert Headers and Footers, or add it to a child theme's footer.php immediately before </body>, then clear page cache and test logged out in a private window.

Self-hosted WordPress is the smoothest path because footer plugins are standard. Managed hosts that restrict footer.php edits still allow injection plugins on most plans.

Avoid pasting only inside a single page block if you want site-wide chat. Visitors land on blog posts and service pages from search; the widget should follow them. After saving, purge LiteSpeed, WP Rocket, Cloudflare, or host-level cache so the script appears on HTML served to guests.

WordPress documents adding custom scripts in their Using themes / custom CSS and JS documentation. Prefer footer placement so chat does not block first paint of main content.

How do I install the widget on Webflow, Framer, or Wix?

On Webflow, use Project Settings → Custom Code → Footer code on a paid plan with custom code enabled, publish, and test the production URL. Framer and Wix offer similar site-wide footer or body-end injection on plans that allow custom JavaScript.

Webflow's designer preview can differ slightly from production. Always verify on the live domain after publish. Framer users paste into site custom code settings; confirm the script is not scoped to a single page component unless that is intentional.

Wix requires Settings → Custom Code → Add code with placement Body - end applied to all pages, typically on Business or Premium tiers. Squarespace uses Settings → Advanced → Code Injection → Footer on Business plans or higher.

If your builder blocks JavaScript on free tiers, upgrade the plan or host a simple landing page on static HTML where you control </body>. The complete chatbot guide includes tables for Squarespace, Google Tag Manager, and static hosts.

Can I deploy the chatbot with Google Tag Manager instead?

Yes. Create a Custom HTML tag in Google Tag Manager, paste the full snippet, set the trigger to All Pages or selected paths, submit the container version, and validate in Preview mode before publishing, mind cookie consent if your CMP requires marketing tags to wait for approval.

GTM is ideal when marketing owns tags but engineering owns the repo. You can roll out chat on Monday and pause it with a container version rollback on Tuesday without redeploying the site.

Pair GTM with consent mode if EU visitors need opt-in before functional chat loads. Policies vary; legal teams often classify conversational widgets as functional or marketing depending on analytics hooks. Document your choice in the privacy policy.

Should I use the embed on Shopify or the official app?

On Shopify storefront themes, use the official AI Orchestrator app embed so the bot loads through Shopify's theme app extension system; on non-Shopify marketing sites, paste the same chatbot ID via the manual snippet for one account across channels.

Merchants who paste the manual snippet on Shopify while also enabling the app embed risk duplicate widgets. Pick the app on the store. Keep the snippet for WordPress blogs, Webflow campaign pages, and partner microsites.

The Shopify AI chatbot guide walks through App Store installation, account linking, and how product questions differ from service-site booking flows.

How do I keep the widget fast for Core Web Vitals?

Load the script with the defer attribute, paste it once at the end of the body, and avoid stacking multiple third-party chat scripts on the same page, the hosted widget lazy-initializes so main content can paint first.

Google's web.dev guidance on efficient script loading recommends deferring non-critical third-party JavaScript. Chat is important for conversion but rarely belongs in the critical rendering path above hero content.

Audit your page after install with Lighthouse or PageSpeed Insights. If cookie banners overlap the bottom-right bubble, adjust banner position or widget offset in theme CSS. Mobile testing matters because fixed elements can cover checkout buttons on commerce templates.

What should I test after pasting the embed?

Publish the site, open an incognito window on desktop and mobile, send a chat message grounded in your site content, and, if Google Calendar is connected, complete a test booking to confirm the event lands on the correct calendar within about a minute.

Checklist:

Widget appears once, bottom-right by default.
Welcome message and branding match profile settings.
Chat answers reflect your actual services, not generic filler.
Booking picker respects timezone and busy blocks if calendar is linked.
No JavaScript errors in the browser console from conflicting plugins.

If nothing appears, confirm you published (not only saved), cleared CDN cache, and did not paste inside a sandboxed iframe block that strips scripts. WordPress optimization plugins that defer all JS sometimes need an exclusion list entry for chatbot-widget.js.

What are common embed mistakes to avoid?

The worst mistakes are duplicating the snippet, editing the chatbot ID manually, pasting only on the homepage, forgetting to upgrade from Starter before traffic spikes, and blocking the script with aggressive CSP headers that omit the widget domain.

Content Security Policy headers must allow the script source and API endpoints your profile specifies. Security-conscious teams can whitelist rather than disable CSP entirely. Coordinate with whoever manages Content-Security-Policy on Netlify, Vercel, or Cloudflare.

Another mistake is testing only while logged into WordPress admin. Some themes hide marketing widgets for authenticated users. Always test as an anonymous visitor.

Starter accounts include 2,000 conversations per month across every domain using the ID. High-traffic launches should review Starter vs Pro plans and upgrade to Pro at $59 per month for 10,000 conversations and unlimited calendar appointments before marketing pushes.

How does embedding fit into the full AI Orchestrator workflow?

Embedding is the last mile: crawl trains the bot, profile holds OAuth and booking windows, and the single script tag makes that assistant visible site-wide, optionally with multilingual chat and calendar booking without a separate scheduling link.

Teams that treat embed as "set and forget" still win if the underlying site content stays accurate. Schedule quarterly reviews of top chat transcripts or profile analytics if available. Update service pages when pricing changes so grounded answers stay trustworthy.

For strategic context, when AI first line support beats human-only chat, read best AI chatbot for small business in 2026. When you are ready, request your chatbot, copy the snippet from profile, and go live in one paste.

Embed a chatbot widget in one line: install guide [2026]