> ## 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.

# Starter Templates

> Quick-start templates for integrating BubblaV into your Next.js, Nuxt, or Angular applications

Starter templates provide a quick way to integrate BubblaV into your project. Use our official templates for Next.js, Nuxt, and Angular to get started in minutes.

***

## Next.js Template

Get started with BubblaV in your Next.js application.

### Repository

[github.com/bubblav-org/nextjs-template](https://github.com/bubblav-org/nextjs-template)

### Features

* Pre-configured BubblaV widget integration
* Environment variable setup
* TypeScript support
* Example usage components

### Quick Start

```bash theme={null}
# Clone the template
git clone https://github.com/bubblav-org/nextjs-template.git my-bubblav-app

# Navigate to the project
cd my-bubblav-app

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

# Edit .env.local and add your website ID
# NEXT_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id

# Start the development server
npm run dev
```

### Project Structure

```
nextjs-template/
├── app/
│   ├── layout.tsx      # Root layout with BubblaV provider
│   └── page.tsx        # Home page with example usage
├── components/
│   └── bubblav-widget.tsx  # Widget component
├── .env.example        # Environment variables template
└── README.md           # Setup instructions
```

### Configuration

Add your website ID in `.env.local`:

```env theme={null}
NEXT_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id
```

***

## Nuxt Template

Get started with BubblaV in your Nuxt application.

### Repository

[github.com/bubblav-org/nuxt-template](https://github.com/bubblav-org/nuxt-template)

### Features

* Nuxt 3 compatible
* Auto-imports for BubblaV composables
* Environment variable configuration
* TypeScript support

### Quick Start

```bash theme={null}
# Clone the template
git clone https://github.com/bubblav-org/nuxt-template.git my-bubblav-app

# Navigate to the project
cd my-bubblav-app

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env

# Edit .env and add your website ID
# NUXT_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id

# Start the development server
npm run dev
```

### Project Structure

```
nuxt-template/
├── app.vue             # Root component with BubblaV integration
├── components/
│   └── BubblaVWidget.vue  # Widget component
├── composables/
│   └── useBubblaV.ts   # BubblaV composable
├── .env.example        # Environment variables template
└── README.md           # Setup instructions
```

### Configuration

Add your website ID in `.env`:

```env theme={null}
NUXT_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id
```

***

## Angular Template

Get started with BubblaV in your Angular application.

### Repository

[github.com/bubblav-org/angular-template](https://github.com/bubblav-org/angular-template)

### Features

* Angular 21 with standalone components
* Tailwind CSS with CSS variable theming
* Dark/light theme toggle with localStorage persistence
* Pre-configured BubblaV widget integration
* TypeScript support
* Environment variable setup via `set-env.cjs` script

### Quick Start

```bash theme={null}
# Clone the template
git clone https://github.com/bubblav-org/angular-template.git my-bubblav-app

# Navigate to the project
cd my-bubblav-app

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

# Edit .env.local and add your website ID
# ANGULAR_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id

# Start the development server
npm run start
```

Open [http://localhost:4200](http://localhost:4200) to view your app.

### Project Structure

```
angular-template/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── header.component.ts       # Navigation with theme toggle and "Ask AI" button
│   │   │   └── theme-toggle.component.ts # Dark/light mode switcher
│   │   └── app.component.ts              # Root component with BubblaV widget
│   ├── environments/
│   │   ├── environment.template.ts       # Environment template (git tracked)
│   │   └── environment.prod.template.ts  # Production template (git tracked)
│   └── styles.css                        # CSS variables and theme definitions
├── set-env.cjs                           # Environment file generator script
├── .env.example                          # Environment variables template
└── README.md                             # Setup instructions
```

### Configuration

Add your website ID in `.env.local`:

```env theme={null}
ANGULAR_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id
```

**How it works:**

* The `set-env.cjs` script reads your `.env.local` file and generates `src/environments/environment.ts` at build time
* Run `npm run start` - the script runs automatically before the dev server
* For Vercel deployment, set `ANGULAR_PUBLIC_BUBBLAV_WEBSITE_ID` in your project's Environment Variables

***

## Deploy to Vercel

Deploy your BubblaV-powered application to Vercel in a few clicks.

### Prerequisites

* A [Vercel account](https://vercel.com/signup)
* Your BubblaV website ID
* Git repository (GitHub, GitLab, or Bitbucket)

### Deploy Next.js Template

#### Option 1: One-Click Deploy (Recommended)

The fastest way to deploy your Next.js application to Vercel:

<a href="https://vercel.com/new/clone?repository-url=https://github.com/bubblav-org/nextjs-template&env=NEXT_PUBLIC_BUBBLAV_WEBSITE_ID&envDescription=Your%20BubblaV%20website%20ID%20from%20the%20dashboard" target="_blank">
  <img src="https://vercel.com/button" alt="Deploy with Vercel" noZoom />
</a>

#### Option 2: Deploy with Vercel CLI

```bash theme={null}
# Install Vercel CLI
npm install -g vercel

# Navigate to your project
cd my-bubblav-app

# Deploy
vercel
```

#### Option 3: Deploy via Vercel Dashboard

1. **Push your code to GitHub**
   ```bash theme={null}
   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/your-username/my-bubblav-app.git
   git push -u origin main
   ```

2. **Import to Vercel**
   * Go to [vercel.com/new](https://vercel.com/new)
   * Click "Import Git Repository"
   * Select your repository
   * Configure the project:
     * **Framework Preset**: Next.js (auto-detected)
     * **Root Directory**: `./` (default)
     * **Build Command**: `npm run build` (default)
     * **Output Directory**: `.next` (default)

3. **Add Environment Variables**
   * In the Vercel dashboard, go to **Settings** → **Environment Variables**
   * Add `NEXT_PUBLIC_BUBBLAV_WEBSITE_ID` with your website ID
   * Click "Save"

4. **Deploy**
   * Click "Deploy"
   * Vercel will build and deploy your application

***

### Deploy Nuxt Template

#### Option 1: One-Click Deploy (Recommended)

The fastest way to deploy your Nuxt application to Vercel:

<a href="https://vercel.com/new/clone?repository-url=https://github.com/bubblav-org/nuxt-template&env=NUXT_PUBLIC_BUBBLAV_WEBSITE_ID&envDescription=Your%20BubblaV%20website%20ID%20from%20the%20dashboard" target="_blank">
  <img src="https://vercel.com/button" alt="Deploy with Vercel" noZoom />
</a>

#### Option 2: Deploy with Vercel CLI

```bash theme={null}
# Install Vercel CLI
npm install -g vercel

# Navigate to your project
cd my-bubblav-app

# Deploy
vercel
```

#### Option 3: Deploy via Vercel Dashboard

1. **Push your code to GitHub**
   ```bash theme={null}
   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/your-username/my-bubblav-app.git
   git push -u origin main
   ```

2. **Import to Vercel**
   * Go to [vercel.com/new](https://vercel.com/new)
   * Click "Import Git Repository"
   * Select your repository
   * Configure the project:
     * **Framework Preset**: Nuxt.js (auto-detected)
     * **Root Directory**: `./` (default)
     * **Build Command**: `npm run build` (default)
     * **Output Directory**: `.output` (default)

3. **Add Environment Variables**
   * In the Vercel dashboard, go to **Settings** → **Environment Variables**
   * Add `NUXT_PUBLIC_BUBBLAV_WEBSITE_ID` with your website ID
   * Click "Save"

4. **Deploy**
   * Click "Deploy"
   * Vercel will build and deploy your application

***

### Deploy Angular Template

#### Option 1: One-Click Deploy (Recommended)

The fastest way to deploy your Angular application to Vercel:

<a href="https://vercel.com/new/clone?repository-url=https://github.com/bubblav-org/angular-template&env=ANGULAR_PUBLIC_BUBBLAV_WEBSITE_ID&envDescription=Your%20BubblaV%20website%20ID%20from%20the%20dashboard" target="_blank">
  <img src="https://vercel.com/button" alt="Deploy with Vercel" noZoom />
</a>

#### Option 2: Deploy with Vercel CLI

```bash theme={null}
# Install Vercel CLI
npm install -g vercel

# Navigate to your project
cd my-bubblav-app

# Deploy
vercel
```

#### Option 3: Deploy via Vercel Dashboard

1. **Push your code to GitHub**
   ```bash theme={null}
   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/your-username/my-bubblav-app.git
   git push -u origin main
   ```

2. **Import to Vercel**
   * Go to [vercel.com/new](https://vercel.com/new)
   * Click "Import Git Repository"
   * Select your repository
   * Configure the project:
     * **Framework Preset**: Angular (auto-detected)
     * **Root Directory**: `./` (default)
     * **Build Command**: `npm run build` (default)
     * **Output Directory**: `dist/angular-template/browser` (default)

3. **Add Environment Variables**
   * In the Vercel dashboard, go to **Settings** → **Environment Variables**
   * Add `ANGULAR_PUBLIC_BUBBLAV_WEBSITE_ID` with your website ID
   * Click "Save"

4. **Deploy**
   * Click "Deploy"
   * Vercel will build and deploy your application

***

## Environment Variables

| Variable                            | Description                                          | Required      |
| ----------------------------------- | ---------------------------------------------------- | ------------- |
| `NEXT_PUBLIC_BUBBLAV_WEBSITE_ID`    | Your website ID from the BubblaV dashboard (Next.js) | Yes (Next.js) |
| `NUXT_PUBLIC_BUBBLAV_WEBSITE_ID`    | Your website ID from the BubblaV dashboard (Nuxt)    | Yes (Nuxt)    |
| `ANGULAR_PUBLIC_BUBBLAV_WEBSITE_ID` | Your website ID from the BubblaV dashboard (Angular) | Yes (Angular) |

### Finding Your Website ID

1. Log in to your [BubblaV dashboard](https://www.bubblav.com/dashboard)
2. Go to **Chat Widget** → **Installation**
3. Copy your Website ID

***

## Customization

After deploying, you can customize the widget:

<CardGroup cols={2}>
  <Card title="Widget Design" icon="palette" href="/user-guide/widget-design">
    Customize colors, position, and behavior
  </Card>

  <Card title="SDK Reference" icon="code" href="/developer-guide/sdk-reference">
    Programmatic control with the SDK
  </Card>
</CardGroup>

***

## Troubleshooting

### Widget Not Showing

1. **Check your Website ID**: Ensure the environment variable is set correctly (`NEXT_PUBLIC_BUBBLAV_WEBSITE_ID` for Next.js, `NUXT_PUBLIC_BUBBLAV_WEBSITE_ID` for Nuxt, `ANGULAR_PUBLIC_BUBBLAV_WEBSITE_ID` for Angular)
2. **Verify deployment**: Check Vercel deployment logs for errors
3. **Clear cache**: Clear your browser cache and reload
4. **For Angular**: Verify the `set-env.cjs` script ran correctly by checking `src/environments/environment.ts` contains your Website ID

### Environment Variables Not Working

1. **Redeploy after adding variables**: Environment variables require a redeploy
2. **Check variable scope**: Ensure variables are set for all environments (Preview, Production)
3. **Verify variable name**: Make sure you're using the correct prefix (`NEXT_PUBLIC_` for Next.js, `NUXT_PUBLIC_` for Nuxt, `ANGULAR_PUBLIC_` for Angular)
4. **For Angular**: Ensure you're using `set-env.cjs` to generate environment files before running `npm run start` or `npm run build`

***

## Next Steps

<CardGroup cols={3}>
  <Card title="Installation Guide" icon="download" href="/user-guide/installation">
    Learn different installation methods
  </Card>

  <Card title="SDK Reference" icon="code" href="/developer-guide/sdk-reference">
    Programmatic control with the SDK
  </Card>

  <Card title="Widget Design" icon="palette" href="/user-guide/widget-design">
    Customize widget appearance
  </Card>
</CardGroup>