> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bubblav.com/llms.txt
> Use this file to discover all available pages before exploring further.
# AI Page
> Add a full-page AI chat interface to your website
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:
Add a container div where you want the AI Page to appear:
```html theme={null}
```
Add the AI Page script with your configuration:
```html theme={null}
```
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
### Static HTML
Add to your HTML page:
```html theme={null}
AI Help Center
```
### React / Next.js
**Using next/script (Recommended for Next.js):**
```jsx theme={null}
// app/ai-help/page.tsx
import Script from 'next/script';
export default function AIHelpPage() {
return (
);
}
```
**Using useEffect (Alternative):**
```jsx theme={null}
// 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 ;
}
```
### WordPress
**Option 1: Using a Plugin**
1. Install a "Custom HTML" or "Insert HTML" plugin
2. Create a new page (e.g., "AI Help Center")
3. Add a Custom HTML block with:
```html theme={null}
```
**Option 2: Page Template**
Create a custom page template in your theme:
```php theme={null}
```
### Webflow
1. Create a new page (e.g., "AI Help")
2. Add an Embed element anywhere on the page
3. Paste the following code:
```html theme={null}
```
4. Set the page body to have no padding/margin for full-screen experience
### Framer
1. Create a new page
2. Add a Code component from the components panel
3. Set it to "Custom Code" and paste:
```html theme={null}
```
4. 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:
```css theme={null}
#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:**
```html theme={null}
data-theme="light"
```
**Dark Theme:**
```html theme={null}
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:
```html theme={null}
data-title="How can I help you today?"
```
### Custom Placeholder
Change the input placeholder:
```html theme={null}
data-placeholder="Type your question here..."
```
***
## How It Works
1. **Script loads**: The ai-page.js loader fetches the latest version
2. **Widget initializes**: React component mounts in the container
3. **User sends message**: Chat streams responses in real-time
4. **Sources displayed**: AI responses include citations from your knowledge base
5. **Conversation history**: Chat persists during the session
***
## Best Practices
The AI Page is designed for full-page experiences. Use it on dedicated routes like `/help`, `/support`, or `/ai-chat`.
Choose light or dark theme based on your website's design for seamless integration.
Customize the title and placeholder to match the purpose of your page (e.g., "Product Support" vs "Sales Assistant").
Ensure your API endpoint is accessible and properly configured before going live.
The AI Page uses your plan's message limits. Monitor usage in your dashboard.
***
## Troubleshooting
* 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)
* 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
* 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
* 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
***
## Comparison: AI Page vs Widget
| 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.
***
## Next Steps
Add content for the AI to reference
Customize your chatbot appearance