Documentation

Complete guide to integrating PageBot into your website.

Quick Start

Add PageBot to your website with a single line of code:

<script src="https://pagebot.themenonlab.com/widget.js"></script>

That's it! The widget will appear in the bottom-right corner of your page.

AI Providers

PageBot supports multiple AI providers. You can use our default backend or bring your own API key.

Supported Providers

Using Your Own API Key

<script 
  src="https://pagebot.themenonlab.com/widget.js"
  data-provider="openai"
  data-api-key="sk-..."
  data-model="gpt-4o"
></script>

Azure OpenAI

<script 
  src="https://pagebot.themenonlab.com/widget.js"
  data-provider="azure"
  data-api-key="your-azure-key"
  data-azure-endpoint="https://your-resource.openai.azure.com"
  data-azure-deployment="gpt-4o"
></script>

Custom OpenAI-Compatible Endpoint

Use with Ollama, LM Studio, vLLM, or any OpenAI-compatible API:

<script 
  src="https://pagebot.themenonlab.com/widget.js"
  data-provider="custom"
  data-custom-endpoint="http://localhost:11434/v1"
  data-model="llama3.2"
></script>

Configuration Options

JavaScript API

Control the widget programmatically after it loads:

Basic Controls

// Open the chat widget
PageBot.open();

// Close the chat widget
PageBot.close();

// Toggle open/closed
PageBot.toggle();

// Send a message programmatically
PageBot.send("What is this page about?");

Page Context

// Get the current scraped page context
const context = PageBot.getContext();
console.log(context);

// Re-scrape the page (useful for SPAs after navigation)
const newContext = PageBot.rescrape();

Provider Control

// Switch providers at runtime
PageBot.setProvider('openai', 'sk-your-key', 'gpt-4o');

// Clear conversation history
PageBot.clearHistory();

// Access current config
console.log(PageBot.config);

How Page Scraping Works

PageBot automatically extracts content from your page:

• Page title — document.title
• URL — Current page URL
• Meta description — <meta name="description">
• Headings — All h1, h2, h3 tags
• Content — Paragraphs, article text, lists

Content is truncated to ~8,000 characters to fit in the AI context window.

What's Excluded

• Navigation and footer elements
• Scripts and styles
• Hidden elements
• The PageBot widget itself

Single Page Apps (SPAs)

For React, Vue, Next.js, and other SPAs, call rescrape() after navigation:

// React Router example
useEffect(() => {
  if (window.PageBot) {
    window.PageBot.rescrape();
  }
}, [location.pathname]);

Custom Styling

Override widget styles with CSS:

.pagebot-widget-container {
  /* Move widget position */
}

.pagebot-widget-button {
  /* Customize the floating button */
}

.pagebot-widget-chat {
  /* Customize the chat window */
}

.pagebot-widget-message.assistant {
  /* Style assistant messages */
}

.pagebot-widget-message.user {
  /* Style user messages */
}

Self-Hosting

Deploy your own PageBot backend:

1. Clone the repo: git clone https://github.com/menonpg/pagebot-widget
2. Configure cloudflare-worker/wrangler.toml
3. Set secrets: wrangler secret put AZURE_OPENAI_KEY
4. Deploy: wrangler deploy
5. Update widget to use your worker URL: data-api-url="https://your-worker.workers.dev"

FAQ

Why isn't the chatbot seeing my page content?

The widget scrapes content on page load. For SPAs, call PageBot.rescrape() after navigation. Also check that your content isn't inside hidden elements or loaded dynamically after the widget initializes.

Can I use my own AI model?

Yes! Use data-provider="custom" with your OpenAI-compatible endpoint, or any of the supported providers with your own API key.

Is my data stored?

Page content is sent directly to your configured AI provider. PageBot does not store conversation data unless you're using the dashboard analytics features.

Can I remove the "Powered by PageBot" branding?

Yes, with a Pro subscription. Set data-branding="false".