What are the two ways to add a chatbot script to BigCommerce?
BigCommerce gives store owners two paths for injecting custom JavaScript: the Script Manager in the control panel, and direct editing of the theme's footer.html file via the Stencil theme editor. Script Manager is the recommended approach for chatbot embeds because scripts stored there persist independently of theme files and survive theme updates, reinstalls, and switches.
| Method | Technical skill | Survives theme update? | Page targeting? | Best for |
|---|---|---|---|---|
| Script Manager (recommended) | None — control panel UI | Yes | Storefront, Checkout, All Pages, Order Confirmation | All store owners |
| Edit theme footer.html (Stencil) | Basic HTML + Handlebars | No — overwritten on theme update | Yes, via Handlebars conditionals | Developers needing page-level targeting |
For almost every BigCommerce merchant, Script Manager is the right call. It requires no code knowledge, cannot be accidentally overwritten, and takes under 5 minutes to set up. The only reason to reach into footer.html is if you need to conditionally load the widget on specific page templates — a use case that rarely applies to a standard storefront chatbot.
How do you add a chatbot via Script Manager?
Script Manager is the control-panel counterpart of BigCommerce's Scripts API. It lets you inject third-party scripts into your storefront without opening a single theme file. The following steps apply to all Stencil-based stores (the current default for all BigCommerce accounts).
- 1
Open Script Manager
Log in to your BigCommerce control panel. In the left sidebar, navigate to Storefront > Script Manager. On stores with multi-channel management enabled, go to Channels, select your storefront channel, then click Script Manager.
- 2
Click "Create a Script"
Click the Create a Script button in the top-right corner. A form opens with fields for name, description, location, pages, and script contents.
- 3
Name your script
Enter a clear name such as "Knobot Chat Widget" and an optional description. You will see this name in the Script Manager list, so make it descriptive enough to identify later.
- 4
Set Location to Footer
Under the Location field, select Footer. This places the script before the closing </body> tag, which is better for page performance than Header placement — the page content renders before the widget initializes.
- 5
Set Pages to "All Storefront Pages"
Under the Pages field, select All Storefront Pages. In BigCommerce's visibility model, "storefront" means all pages that are not checkout or order confirmation — your homepage, collection pages, product pages, and static pages. This keeps the widget off your checkout flow, which is the correct choice for PCI compliance.
- 6
Leave Kind set to "Script" and paste your snippet
In the Script Contents text area, paste your chatbot embed tag. For Knobot it looks like: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script>. Replace YOUR_KEY with the key from your Knobot dashboard.
- 7
Save and verify
Click Save. BigCommerce deploys immediately. Open your live store in a new browser tab — not the control-panel preview — and confirm the chat bubble appears in the corner.
What do the Script Manager location and visibility options mean?
When you create a script in Script Manager, two dropdown fields control where and when it loads. BigCommerce's Scripts API documentation defines the visibility options as storefront, checkout, all_pages, and order_confirmation.
| Setting | Options | Notes |
|---|---|---|
| Location | Header / Footer | Footer is recommended for chatbots — loads after page content, better for Core Web Vitals |
| Pages | All Storefront Pages | Loads on all pages except checkout and order confirmation — the right choice for chat widgets |
| Pages | All Pages | Loads everywhere including checkout — not recommended for chatbots (PCI risk) |
| Pages | Checkout | Only loads on checkout — requires Optimized One-Page Checkout to be enabled |
| Pages | Order Confirmation | Only loads on the post-purchase confirmation page |
| Kind | Script / URL | Choose Script to paste inline code; choose URL to reference an external .js file |
For a chatbot widget, the correct combination is Footer + All Storefront Pages. This puts the widget on every browsing page while keeping it off payment pages — and it loads after the store's critical content, so it does not affect your store's Largest Contentful Paint score.
How do you embed Knobot specifically on a BigCommerce store?
Knobot requires no BigCommerce app, no plugin installation, and no developer work. Knobot's paid plans include a single embed snippet — one <script> tag — that you paste directly into Script Manager. The widget is trained on your site content via RAG (Retrieval-Augmented Generation using Voyage embeddings and Gemini Flash 2.5), so it answers questions from your actual product pages and policies rather than from generic responses.
- 1
Create your Knobot account and train the bot
Sign up at knobot.org. After creating a business profile, Knobot crawls your BigCommerce storefront URL and builds an initial knowledge base from your product descriptions, FAQ pages, and policy content. You get 100 free preview messages before committing to a paid plan.
- 2
Customize the widget in the dashboard
Set a primary color, welcome message, and lead-capture fields (name, email, phone number) to match your store brand. Customizations update the live widget automatically — you do not need to re-paste the script tag after changing colors or copy.
- 3
Copy your embed snippet
In the Knobot dashboard, navigate to Widget > Embed and copy the one-line script tag. It looks like: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script>
- 4
Paste into BigCommerce Script Manager
Follow the Script Manager steps above: Storefront > Script Manager > Create a Script > Footer > All Storefront Pages > paste the snippet > Save.
- 5
Register your storefront domain
In the Knobot dashboard, go to Widget > Install and add your BigCommerce store domain (both apex and www versions, e.g. yourstore.com and www.yourstore.com). This tells Knobot which domains are authorized to load the widget.
- 6
Test lead capture
Open a product page, trigger the chatbot, answer a visitor question, and then submit a test lead. Confirm it appears in the Knobot dashboard under Conversations. Leads also route to the email address and webhook URL you configure in Settings.
Should you add the chatbot to the BigCommerce checkout page?
The "All Storefront Pages" visibility option in Script Manager specifically excludes checkout and order-confirmation pages. Selecting it is the safest and simplest way to comply with PCI DSS 6.4.3 without any additional configuration.
What is the alternative method — editing the Stencil theme footer?
If you need to restrict the chatbot to specific page types (for example, only product pages), you can edit your Stencil theme's footer.html file directly and wrap the script in a Handlebars conditional. This method requires more technical confidence than Script Manager and carries one significant downside: edits to theme files are overwritten when you update or reinstall the theme. That means you will need to re-add the snippet after every theme update.
- 1
Open the theme editor
In your BigCommerce control panel, go to Storefront > Themes. On your active theme, click the dropdown (three dots or "Advanced") and select Edit Theme Files. This opens the Stencil file editor.
- 2
Locate footer.html or base.html
In the file tree on the left, expand the templates/layout/ directory. Open footer.html (some themes use base.html). Scroll to the bottom of the file, near the closing </body> tag.
- 3
Paste your script before </body>
Add your chatbot script tag on the line immediately above the closing </body> tag. Include the async attribute: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script>
- 4
Optional: wrap in a Handlebars conditional for page-level targeting
To load the widget on product pages only, wrap the script tag: {{#if page_type "product"}}<script ...></script>{{/if}}. Common BigCommerce page types include "product", "category", "home", and "page".
- 5
Save and preview
Click Save. BigCommerce provides a preview mode — use it to confirm the widget appears before publishing changes to your live store.
- 6
Note: re-add after theme updates
Keep a copy of your script snippet somewhere accessible. After any theme update, check footer.html to confirm the snippet is still in place — reinstating it takes under a minute.
What should you check if the chatbot does not appear on your BigCommerce store?
If the script is saved in Script Manager but the chat widget is not visible on your live store, these are the most common causes.
How do you fix z-index conflicts between the chatbot and BigCommerce themes?
BigCommerce Stencil themes vary in how they handle sticky headers, mobile navigation overlays, and promotional banners. If the chatbot bubble appears underneath one of these elements, a z-index conflict is the cause. Modern browsers enforce stacking context rules that can cause third-party widgets to sit below native UI elements when their z-index is lower.
The fix is a CSS override. In your BigCommerce control panel, go to Storefront > Themes > Customize > Custom CSS (location varies by theme) and add:
[data-knobot-widget] {
z-index: 99999 !important;
}Knobot's widget wrapper uses the data-knobot-widget attribute. This override forces the widget above BigCommerce's own UI layers without touching theme files. If your theme does not have a Custom CSS editor, add the rule to a <style> block in your Script Manager script entry alongside the chatbot snippet.
Does BigCommerce enforce HTTPS — and does that affect chatbot embeds?
Yes. BigCommerce enforces HTTPS on all storefront pages by default. Any third-party script served over plain HTTP will be blocked by the browser as mixed content — this is a browser-level restriction, not a BigCommerce restriction. All reputable chatbot providers, including Knobot, serve their widget scripts over HTTPS, so this is not a practical concern for most stores.
A separate concern is Content Security Policy (CSP). CSP headers instruct the browser to block scripts, images, or frames from origins not explicitly listed in the policy. Standard BigCommerce storefronts do not apply a restrictive CSP by default — Script Manager scripts load without modification. The risk is higher on headless BigCommerce setups (Catalyst or custom Next.js frontends) where a developer may have added strict CSP headers server-side. If you are on a headless storefront, confirm that https://www.knobot.org is included in your script-src and connect-src directives.