AI Page

The AI Page is a full-page, conversational AI interface that provides an immersive chat experience. Unlike the floating widget, the AI Page takes over the entire viewport, making it perfect for dedicated help pages, support portals, or AI-powered landing pages.

What is the AI Page?

The AI Page provides:

Full-page experience: Immersive chat interface that fills the entire browser window
Conversational AI: Interactive chat with streaming responses
Source citations: AI responses include links to relevant content from your knowledge base
Customizable appearance: Light and dark themes to match your brand
Lazy loading: Optimized performance with code splitting

Use Cases

The AI Page is ideal for:

Dedicated help centers: /help or /support pages
AI-powered landing pages: Interactive product demos or onboarding
Knowledge base search: Full-page search interface for documentation
Internal tools: Employee support portals or FAQ pages
Customer portals: Integrated chat in customer dashboard areas

Installation

Basic Setup

Add the AI Page to your website in two simple steps:

Create Container

Add a container div where you want the AI Page to appear:

<div id="bubblav-ai-page"></div>

Add Script Tag

Add the AI Page script with your configuration:

<script
  src="https://www.bubblav.com/ai-page.js"
  data-site-id="YOUR_SITE_ID"
  data-theme="dark"
  defer
></script>

The AI Page will automatically create the container if you don’t provide one, but we recommend adding it explicitly for better control.

Configuration Options

Required Attributes

Attribute	Description	Example
`src`	Script URL	`https://www.bubblav.com/ai-page.js`
`data-site-id`	Your unique website identifier	`812b25b4-02df-40fa-9f68-3a99b372b1a1`

Optional Attributes

Attribute	Description	Default
`data-theme`	Visual theme (`light` or `dark`)	`light`
`data-title`	Header text for the chat	`"What can I help with?"`
`data-placeholder`	Input placeholder text	`"Ask me anything..."`

Platform-Specific Instructions

HTML
React
WordPress
Webflow
Framer

Static HTML

Add to your HTML page:

<!DOCTYPE html>
<html>
<head>
  <title>AI Help Center</title>
  <style>
    body { margin: 0; padding: 0; }
    #bubblav-ai-page {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="bubblav-ai-page"></div>
  <script
    src="https://www.bubblav.com/ai-page.js"
    data-site-id="YOUR_SITE_ID"
    data-theme="dark"
    defer
  ></script>
</body>
</html>

React / Next.js

Using next/script (Recommended for Next.js):

// app/ai-help/page.tsx
import Script from 'next/script';

export default function AIHelpPage() {
  return (
    <div className="min-h-screen">
      <div id="bubblav-ai-page"></div>
      <Script
        src="https://www.bubblav.com/ai-page.js"
        data-site-id="YOUR_SITE_ID"
        data-theme="dark"
        strategy="afterInteractive"
      />
    </div>
  );
}

Using useEffect (Alternative):

// components/AIPage.jsx
import { useEffect } from 'react';

export default function AIPage() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.bubblav.com/ai-page.js';
    script.dataset.siteId = 'YOUR_SITE_ID';
    script.dataset.theme = 'dark';
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div id="bubblav-ai-page" style={{ height: '100vh' }} />;
}

WordPress

Option 1: Using a Plugin

Install a “Custom HTML” or “Insert HTML” plugin
Create a new page (e.g., “AI Help Center”)
Add a Custom HTML block with:

<div id="bubblav-ai-page"></div>
<script
  src="https://www.bubblav.com/ai-page.js"
  data-site-id="YOUR_SITE_ID"
  data-api-key="YOUR_API_KEY"
  data-api-url="/api/chat"
  data-theme="dark"
  defer
></script>

Option 2: Page TemplateCreate a custom page template in your theme:

<?php
/* Template Name: AI Help Center */
get_header();
?>
<div id="bubblav-ai-page"></div>
<script
  src="https://www.bubblav.com/ai-page.js"
  data-site-id="YOUR_SITE_ID"
  data-api-key="YOUR_API_KEY"
  data-api-url="/api/chat"
  data-theme="dark"
  defer
></script>
<?php
get_footer();
?>

Webflow

Create a new page (e.g., “AI Help”)
Add an Embed element anywhere on the page
Paste the following code:

<div id="bubblav-ai-page"></div>
<script
  src="https://www.bubblav.com/ai-page.js"
  data-site-id="YOUR_SITE_ID"
  data-api-key="YOUR_API_KEY"
  data-theme="dark"
  defer
></script>
<style>
  #bubblav-ai-page {
    width: 100%;
    height: 100vh;
  }
</style>

Set the page body to have no padding/margin for full-screen experience

Framer

Create a new page
Add a Code component from the components panel
Set it to “Custom Code” and paste:

<div id="bubblav-ai-page"></div>
<script
  src="https://www.bubblav.com/ai-page.js"
  data-site-id="YOUR_SITE_ID"
  data-theme="dark"
  defer
></script>

Set the page layout to fill the screen for best results

Styling & Layout

Container Styling

The AI Page fills its parent container. For best results:

#bubblav-ai-page {
  width: 100%;
  height: 100vh;  /* Full viewport height */
  margin: 0;
  padding: 0;
  overflow: hidden;  /* Prevent scrollbars */
}

Theme Options

Choose between two built-in themes: Light Theme:

data-theme="light"

Dark Theme:

data-theme="dark"

The theme controls the color scheme of the entire interface including the chat sidebar, message bubbles, and input area.

Advanced Configuration

Custom Titles

Change the header text:

data-title="How can I help you today?"

Custom Placeholder

Change the input placeholder:

data-placeholder="Type your question here..."

How It Works

Script loads: The ai-page.js loader fetches the latest version
Widget initializes: React component mounts in the container
User sends message: Chat streams responses in real-time
Sources displayed: AI responses include citations from your knowledge base
Conversation history: Chat persists during the session

Best Practices

Dedicated pages work best

The AI Page is designed for full-page experiences. Use it on dedicated routes like /help, /support, or /ai-chat.

Match your brand theme

Choose light or dark theme based on your website’s design for seamless integration.

Provide context

Customize the title and placeholder to match the purpose of your page (e.g., “Product Support” vs “Sales Assistant”).

Test API connectivity

Ensure your API endpoint is accessible and properly configured before going live.

Monitor message limits

The AI Page uses your plan’s message limits. Monitor usage in your dashboard.

Troubleshooting

AI Page not appearing

Verify the container div with id="bubblav-ai-page" exists
Check browser console for JavaScript errors
Ensure your API key is correct
Confirm the script URL is loading (check Network tab)

API connection errors

Verify data-api-url points to a valid endpoint
Check CORS settings on your API
Ensure your API key is valid and not expired
Review browser console for specific error messages

Styling issues

Ensure parent container has defined height
Check for CSS conflicts from your site’s stylesheets
Verify overflow: hidden on the container
Test in different browsers

Slow loading

The widget uses lazy loading for optimal performance
Initial load may take 1-2 seconds
Subsequent loads are faster due to browser caching
Check your network connection

Feature	AI Page	Widget
Layout	Full-page immersion	Floating bubble
Best for	Dedicated help pages	Site-wide support
Screen usage	100% viewport	Minimal footprint
User experience	Focused conversation	Quick assistance
Installation	Per page	Site-wide

Use both! Install the widget sitewide for quick help, and add the AI Page to your dedicated support page for in-depth conversations.

Account & Billing

Knowledge Setup

Integrations

Live Support

Reports

What is the AI Page?

Use Cases

Installation

Basic Setup

Configuration Options

Required Attributes

Optional Attributes

Platform-Specific Instructions

Static HTML

React / Next.js

WordPress

Webflow

Framer

Styling & Layout

Container Styling

Theme Options

Advanced Configuration

Custom Titles

Custom Placeholder

How It Works

Best Practices

Troubleshooting

Comparison: AI Page vs Widget

Next Steps

Knowledge Base

Widget Design

Account & Billing

Knowledge Setup

Integrations

Live Support

Reports

​What is the AI Page?

​Use Cases

​Installation

​Basic Setup

​Configuration Options

​Required Attributes

​Optional Attributes

​Platform-Specific Instructions

​Static HTML

​React / Next.js

​WordPress

​Webflow

​Framer

​Styling & Layout

​Container Styling

​Theme Options

​Advanced Configuration

​Custom Titles

​Custom Placeholder

​How It Works

​Best Practices

​Troubleshooting

​Comparison: AI Page vs Widget

​Next Steps

Knowledge Base

Widget Design

What is the AI Page?

Use Cases

Installation

Basic Setup

Configuration Options

Required Attributes

Optional Attributes

Platform-Specific Instructions

Static HTML

React / Next.js

WordPress

Webflow

Framer

Styling & Layout

Container Styling

Theme Options

Advanced Configuration

Custom Titles

Custom Placeholder

How It Works

Best Practices

Troubleshooting

Comparison: AI Page vs Widget

Next Steps