How to Add an AI Chatbot to Any Website: Introducing Shoply AI Site Chat

Rui Jiang - Feb 23, 2026

Most AI chatbots are built for specific platforms — Shopify, Intercom, Zendesk. But what if your website isn’t a store? What if you run a documentation site, a university program, a non-profit, or any other content-rich website and want visitors to get instant answers without hunting through pages?

Shoply AI Site Chat makes this possible. Think of it like Google’s site search, but fully conversational: point it at your website, give it a simple JSON config specifying which pages to crawl, and it builds a chatbot that can answer any question based on your content — automatically, with no manual Q&A writing required.

You can see it live on our demos page , where we’ve built chatbots for documentation sites, university programs, and more.

How It Works

Shoply AI Site Chat works in three steps:

Configure — provide a JSON config that tells Shoply which website and pages to index
Crawl & Index — Shoply automatically crawls your content, builds an AI search index, and keeps it up to date
Embed — add a few lines of JavaScript to your site to render the chat widget

No manual Q&A writing. No retraining. When your content changes, the index updates automatically.

Step 1: Configure Your Site

Send us a JSON config specifying your site’s domain and the pages you want indexed. For example:


{
  "start_urls": [
    "https://usaco.org/"
  ],
  "keep_params": [
    "page",
    "cpid"
  ],
  "exclude_patterns": [
    "/current/current",
    "/current/data",
    "viewproblem2"
  ],
}

The store_key is usually your website’s domain — this is the unique identifier Shoply uses to associate your content with your chatbot. The start_urls list tells Shoply which pages (and their sub-pages) to crawl and index.

Shoply will crawl all sub-pages reachable from the provided URLs and build a searchable AI knowledge base from your content.

Step 2: Automatic Crawling and Indexing

Once configured, Shoply handles the rest:

Initial crawl — Shoply fetches and indexes all the pages reachable from your configured URLs. Depending on the size of your site, this typically completes within minutes to a few hours.
Automatic updates — Shoply periodically re-crawls your pages so the index stays current as your content changes. No manual reindexing needed.
AI understanding — content is indexed with semantic understanding, not just keywords. The chatbot can answer questions even when the wording doesn’t exactly match anything on your pages.

Step 3: Embed the Chatbot on Your Website

Adding the chatbot to your site takes two small additions to your HTML.

Configure your site key

Add a script block that sets window.shopily_data with your site’s store_key:


<script type="text/javascript">
    window.shopily_data = {
        store_key: "yourwebsite.com",
    }
</script>

Load the Shoply AI script


<script src="https://assets.shoplyai.ai/shoplyjs/shoply_chat_core.js" type="text/javascript" defer="defer"></script>

That’s it. The chat widget will appear as a floating button in the corner of your page, ready to answer visitor questions.

Complete Example

Here’s a full working HTML page. You can also find this file hosted at shoplyai.ai/sitechat_example.html


<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            Hello World!
        </div>
        <script type="text/javascript">
            window.shopily_data = {
                store_key: "usaco.org",
            }
        </script>
        <script src="https://assets.shoplyai.ai/shoplyjs/shoply_chat_core.js" type="text/javascript" defer="defer"></script>
    </body>
</html>

Works with Any Framework

Since the integration is plain HTML and JavaScript, it works with any tech stack:

Next.js / React: Add the <script> tags in your layout or use next/script with strategy="afterInteractive"
Vue / Nuxt: Add to your app template or use a plugin to inject the scripts
Gatsby: Add in gatsby-ssr.js or use the <Helmet> component
Static sites / plain HTML: Paste the snippet directly into your page

The only requirement: window.shopily_data must be set before the Shoply AI script loads.

What Can the Chatbot Answer?

The chatbot answers questions based entirely on your site’s content — whatever pages you configured for crawling. Examples:

A documentation site: “How do I configure OAuth?” → answered from your docs
A university program: “What are the application requirements?” → answered from your program pages
A non-profit: “Where does my donation go?” → answered from your about/impact pages

The chatbot will not hallucinate or make up answers beyond your content. If it doesn’t know, it says so — and you can customize its personality to direct users to contact you for further help.

Get Started

Site Chat is currently available by contacting us directly. We’ll set up the config, run the initial crawl, and you’ll have a working chatbot within minutes.

Reach out to get started:

Email: customer-obsession@shoplyai.ai
WhatsApp: +1 (425) 233-8343
Or book a meeting and we’ll walk you through it live

Want to see it in action first? Visit our demos page to try live Site Chat examples on real websites.