Starter Templates

​

Next.js Template

​

Repository

​

Features

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

​

Quick Start

# 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

NEXT_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id

​

Nuxt Template

​

Repository

​

Features

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

​

Quick Start

# 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

NUXT_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id

​

Angular Template

​

Repository

​

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

# 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

​

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

ANGULAR_PUBLIC_BUBBLAV_WEBSITE_ID=your-website-id

• 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

​

Prerequisites

• A Vercel account
• Your BubblaV website ID
• Git repository (GitHub, GitLab, or Bitbucket)

​

Deploy Next.js Template

​

Option 1: One-Click Deploy (Recommended)

​

Option 2: Deploy with Vercel CLI

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

   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
   • 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)

​

Option 2: Deploy with Vercel CLI

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

   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
   • 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)

​

Option 2: Deploy with Vercel CLI

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

   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
   • 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

​

Finding Your Website ID

1. Log in to your BubblaV dashboard
2. Go to Chat Widget → Installation
3. Copy your Website ID

​

Customization

​

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