# How to Show a Chatbot on Specific Pages (Every Major Platform)

URL: https://instantknowledgebot.com/blog/show-chatbot-on-specific-pages  
Published: 2026-10-15  
Updated: 2026-10-15  
Author: Jonah Abernathy (InstantKnowledgeBot editorial team)  
Category: Website Integrations

> Want your AI chatbot on pricing and support pages but not your blog? Here are the page-level techniques for WordPress, Shopify, Wix, Squarespace, Webflow, plain HTML and Next.js.

## Key takeaways

- The simplest way to show a chatbot on specific pages is to paste the embed code only on those pages instead of adding it site-wide.
- Most website builders offer a page-level custom code box in each page's settings, which is the cleanest no-code option.
- If you can only add code site-wide, a short conditional script can check the page URL and load the chatbot only where you want it.
- Never combine site-wide and page-level embed code, or visitors may see two chat buttons.
- Using separate bots for different sections, such as sales pages and help pages, lets each bot answer from the most relevant documents.
- Always test in a private browser window and clear any caching plugin after changing where the chatbot loads.

To show a chatbot on specific pages, paste its embed code only on the pages where you want it, instead of in your site-wide header or footer. Most website builders, including WordPress, Shopify, Wix, Squarespace and Webflow, have a page-level custom code box or a template condition that makes this easy. If you can only add code site-wide, a short conditional script can check the page address and load the chatbot only where it belongs.

This guide walks through each major platform, step by step. It also covers the common mistakes that cause a chat button to show up twice, or not at all.

## Why would you show a chatbot on specific pages only?

A chatbot on every page is a fine default for many small businesses. But there are good reasons to be more selective.

- **Focus.** A chatbot on your pricing, product and contact pages catches visitors who are ready to ask questions.
- **Fewer distractions.** You may not want a chat button covering a checkout form, a booking widget or a landing page with one clear goal.
- **Better answers.** You can run a sales bot on sales pages and a support bot on help pages, each trained on different documents.
- **Usage control.** If you are on a plan with a monthly message allowance, limiting where the bot appears can help keep conversations to the visitors who need it most.

With InstantKnowledgeBot, the embed code is a single `<script>` tag. That makes page-level placement simple, because you only have to decide where that one line goes.

## What are the main ways to embed a chatbot on only some pages?

There are three general approaches. Which one you use depends on your platform and how comfortable you are with code.

1. **Page-level custom code.** Paste the embed code into the custom code area of each individual page. This is the cleanest no-code option.
2. **Template or theme conditions.** Add the code once to your theme, wrapped in a rule such as "only on product pages." This works well for Shopify and WordPress.
3. **A conditional script.** Add a small piece of JavaScript site-wide that checks the page URL and loads the chatbot only on matching pages.

Here is a quick comparison.

| Method | Best for | Skill level | Watch out for |
|---|---|---|---|
| Page-level custom code | A handful of pages | Beginner | Remembering to add it to new pages |
| Template or theme condition | Whole page types, like all products | Intermediate | Theme updates overwriting edits |
| Conditional script | Many pages matched by URL | Intermediate | Typos in URL paths |

One rule applies to all three: **remove any site-wide copy of the embed code first.** If the code is in both your global footer and a page's custom code, visitors may see two chat buttons.

## How do you show a chatbot on specific pages in WordPress?

WordPress gives you several options. Start with the simplest one that fits your needs. For the basic site-wide install, see our guide on [adding an AI chatbot to WordPress](/guides/add-chatbot-to-wordpress).

### Option 1: Add it to a single page with a Custom HTML block

1. Open the page in the block editor.
2. Add a **Custom HTML** block anywhere on the page.
3. Paste your embed code and update the page.

The floating chat button appears in the corner no matter where you place the block. Repeat this on each page where you want the chatbot.

### Option 2: Use a code snippet plugin with page rules

Many header and footer snippet plugins let you insert code site-wide. Some also let you limit a snippet to certain pages, posts or post types. If yours has page rules, paste the embed code once and choose the pages where it should load.

### Option 3: Use a WordPress conditional tag in your theme

If you or your developer edit theme files, WordPress has built-in [conditional tags](https://developer.wordpress.org/themes/basics/conditional-tags/) such as `is_page()`, `is_front_page()` and `is_singular()`. You can hook into the footer and print the embed code only when a condition is true. For example, a check like `is_page( array( 'pricing', 'contact' ) )` targets two pages by their slugs.

Always make theme edits in a child theme. Otherwise, a theme update can erase your changes.

## How do you add page level custom code in Shopify?

Shopify themes are built with Liquid, a template language that knows what kind of page is loading. That makes it easy to target page types. Our guide to [adding an AI chatbot to Shopify](/guides/add-chatbot-to-shopify) covers the standard install.

To limit the chatbot to certain pages:

1. In your Shopify admin, go to **Online Store > Themes**, then choose **Edit code** on your theme.
2. Open `theme.liquid` (usually in the Layout folder).
3. Find your embed code near the closing body tag, or paste it there.
4. Wrap it in a Liquid condition.

Common conditions include:

- `{% if request.page_type == 'product' %}` to show the chatbot on product pages only.
- `{% if template contains 'collection' %}` for collection pages.
- `{% if page.handle == 'contact' %}` for one specific page by its handle.

Close the condition with `{% endif %}` after the embed code. Duplicate your theme before editing so you have a backup. Shopify's [Help Center](https://help.shopify.com) explains theme editing in more detail.

Many stores choose to keep the chatbot off the cart and checkout steps. That way the chat button never covers payment fields.

## How do you show a chatbot on certain pages in Wix?

Wix has a built-in way to choose pages for custom code. As of 2026, it lives in your site's dashboard settings under **Custom Code**, though menu names can shift over time.

1. In your Wix dashboard, open **Settings**, then **Custom Code**.
2. Click **Add Custom Code** and paste your embed code.
3. Under the page options, choose **specific pages** instead of all pages.
4. Select the pages you want and set the code to load in the body.
5. Save and publish your site.

Wix may require a premium plan and a connected domain to use custom code. Avoid using the Embed HTML element for the chatbot, since it places code inside a framed box rather than on the page itself. See our full guide to [adding an AI chatbot to Wix](/guides/add-chatbot-to-wix).

## How do you add a chatbot to one page in Squarespace?

Squarespace supports code injection for individual pages on plans that include it.

1. Hover over the page in the Pages panel and click the **gear icon** for Page Settings.
2. Open the **Advanced** tab.
3. Paste your embed code into **Page Header Code Injection**.
4. Save, then repeat for each page that needs the chatbot.

If you previously added the code under the site-wide **Code Injection** settings, remove it there first. Our guide on [adding an AI chatbot to Squarespace](/guides/add-chatbot-to-squarespace) covers the site-wide setup and plan considerations.

## How do you add page level custom code in Webflow?

Webflow lets you add code to individual pages through page settings.

1. In the Designer, open the **Pages** panel.
2. Click the **settings icon** next to the page you want.
3. Scroll to **Custom code** and paste the embed code in the **Before body tag** field.
4. Save and publish.

If you add code to a **CMS template page**, it applies to every item in that collection. For example, code on a blog post template appears on every blog post. Webflow typically requires a paid site plan for custom code. Learn more in our guide to [adding an AI chatbot to Webflow](/guides/add-chatbot-to-webflow).

## What about plain HTML sites and Next.js or React?

### Plain HTML websites

On a hand-built site, each page is its own file. Paste the embed code only into the HTML files where you want the chatbot, just before the closing body tag. If your pages share a footer include, use a conditional script instead (see the next section). The basics are in our guide on [adding a chatbot to an HTML website](/guides/add-chatbot-to-html-website).

### Next.js and React apps

In a React or Next.js app, load the chatbot inside the layout or page component for the routes that need it, rather than in the root layout. In the Next.js App Router, a route group with its own layout is a clean way to cover a set of pages.

Single-page apps change pages without a full reload. A widget loaded on one route may stay visible after a visitor navigates elsewhere. Test navigation carefully. Our [Next.js and React guide](/guides/add-chatbot-to-react-nextjs) covers the details.

## How do you use a conditional script to load the chatbot by URL?

Sometimes you can only add code site-wide. Or you want to match many pages at once, such as everything under `/help/`. A conditional script solves this. It reads the current address using the browser's [window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) and loads the chatbot only when the path matches.

Here is a simple example. Wrap it in a script tag if your platform expects one, and replace the placeholder with the `src` value from your own embed code.

```js
(function () {
  var allowedPaths = ['/pricing', '/contact', '/help'];
  var path = window.location.pathname;

  var match = allowedPaths.some(function (p) {
    return path === p || path.indexOf(p + '/') === 0;
  });

  if (!match) return;

  var s = document.createElement('script');
  s.src = 'PASTE-THE-SRC-FROM-YOUR-EMBED-CODE';
  s.async = true;
  // If your embed code has extra attributes, copy each one, e.g.:
  // s.setAttribute('data-example', 'value');
  document.body.appendChild(s);
})();
```

A few tips for this approach:

- **Copy every attribute.** If your embed code includes attributes beyond `src`, add each one with `setAttribute` so the widget knows which bot to load.
- **Mind trailing slashes.** Some sites use `/pricing/` and others `/pricing`. The example above handles both.
- **Flip it to exclude pages.** To show the chatbot everywhere except checkout, change the logic to return early when the path matches.

If this feels too technical, stick with page-level custom code. It does the same job with no JavaScript.

## Should you use different bots on different pages?

Often, yes. Once you can control placement, you can match each page to the right bot.

- A **sales bot** on pricing and product pages, trained on plans, features and policies.
- A **support bot** on help pages, trained on troubleshooting docs and FAQs.
- A **location or service bot** on individual service pages, trained on that service's details.

Each bot answers only from its uploaded knowledge. It says so when the answer is not there, and you can set a custom fallback message. Narrower knowledge helps each bot stay on topic.

As of now, the Free plan includes 1 bot, Starter includes 3 and Pro includes 10. Compare the details on our [pricing page](/pricing). Pro and Agency also include lead capture, which works well on sales pages. Our [industry templates](/templates) give you a head start for common business types.

## How do you test that the chatbot shows on the right pages?

After any change, check your work before you call it done.

1. **Open a private browser window.** This avoids cached versions and logged-in admin views.
2. **Visit a page that should have the chatbot.** Confirm the chat button appears and opens.
3. **Visit a page that should not.** Confirm there is no button.
4. **Clear caches.** Caching plugins and CDNs can serve old pages for a while. Purge them after edits.
5. **Check for duplicates.** If you see two chat buttons, the code is loading twice. Search your global header, footer, theme files and plugins.
6. **Test on a phone.** Make sure the button does not cover key buttons or forms.

If the chatbot never appears, confirm the full embed code was pasted without changes. Some editors "smart quote" or trim code, so paste into a plain code field whenever possible.

## Next steps

Choosing where your chatbot appears is a small change that can make it feel more helpful and less intrusive. Start with your highest-intent pages, such as pricing, contact and product pages, then expand as you see which questions visitors ask.

Ready to try it? [Create your free chatbot](/signup) in a few minutes. No credit card is needed, and a 14-day Pro trial starts automatically with your first bot. If you would rather have someone handle the setup and placement for you, our [done-for-you setup service](/setup-service) is a one-time $199. For more how-tos, browse our [Website Integrations articles](/blog/category/website-integrations).

## Frequently asked questions

**Does adding the chatbot to only a few pages make my other pages faster?**

Usually yes, slightly. Pages without the embed code do not download the chatbot script at all. The chat widget is lightweight, so the difference is often small, but it is a clean way to keep pages like checkout or landing pages as lean as possible.

**Can I show a different chatbot on different pages?**

Yes. Create a separate bot for each section, such as a sales bot and a support bot, and paste each bot's embed code only on its pages. On InstantKnowledgeBot, the Free plan includes one bot, Starter includes three and Pro includes ten.

**Why does my chatbot still appear on pages where I removed it?**

The most common causes are leftover site-wide code, a caching plugin or CDN serving an old version of the page, or a theme that injects code globally. Search your site settings and theme for the embed code, clear all caches and test again in a private browser window.

**Can I hide the chatbot on mobile but show it on desktop?**

You can, with a conditional script that checks the screen width before loading the embed code, for example using window.matchMedia. Keep in mind that many visitors browse on phones, so hiding the chatbot on mobile may mean fewer questions answered.

**Do I need a paid website plan to add page-level code?**

It depends on your website builder. Some platforms only allow custom code or code injection on certain paid plans. Check your builder's plan details, and if custom code is not available, a shareable chat page link is a code-free alternative.

**Will the chatbot keep its conversation when a visitor moves between pages?**

That depends on how the page loads. On traditional websites, each page loads fresh, so pages without the embed code will not show the widget. If you are unsure how your setup behaves, test a short conversation across a few pages before going live.