Bravin AI

Introduction

The Bravin AI widget is a lightweight JavaScript snippet that adds a chat interface to your website. This guide covers installation, customization, and troubleshooting.

Prerequisites:

Access to your website's HTML
Bravin AI API key
Basic knowledge of HTML/CSS (optional)

Basic Installation

Step 1: Get Your API Key Log in to Bravin AI and go to Settings → API Keys.

Step 2: Add the Snippet Paste this code before the closing </body> tag:

Replace YOUR_API_KEY_HERE with your actual API key!

Installation Code

<script>
  (function(w,d,s,o,f,js,fjs){
    w['BravinWidget']=o;
    w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;
    fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','bw','https://widget.bravin.ai/v1/widget.js'));
  
  bw('init', {
    apiKey: 'YOUR_API_KEY_HERE',
    position: 'bottom-right',
    theme: 'light'
  });
</script>

Launcher Positioning

Available Positions:

bottom-right (default)
bottom-left
top-right
top-left

Custom Position: Use CSS to fine-tune placement:

Custom CSS

#bravin-widget {
  bottom: 20px !important;
  right: 20px !important;
  /* Mobile adjustments */
  @media (max-width: 768px) {
    bottom: 10px !important;
    right: 10px !important;
  }
}

Custom Styling

Brand Colors: Match the widget to your brand:

Use your brand's hex colors for primaryColor. The widget automatically generates complementary shades.

Theme Configuration

bw('init', {
  apiKey: 'YOUR_API_KEY',
  theme: {
    primaryColor: '#FF6B00',
    textColor: '#333333',
    backgroundColor: '#FFFFFF',
    launcherIcon: 'chat',
    fontFamily: 'Inter, sans-serif'
  }
});

Advanced Configuration

User Identification: Pass user data for personalized experience:

Identify Users

bw('identify', {
  userId: '12345',
  name: 'John Doe',
  email: 'john@example.com',
  customAttributes: {
    plan: 'enterprise',
    signupDate: '2024-01-15'
  }
});

Advanced Configuration (continued)

Custom Events: Trigger the widget programmatically:

Widget Control

// Open widget
bw('open');

// Close widget
bw('close');

// Send custom event
bw('track', 'page_viewed', { page: 'pricing' });

// Pre-fill message
bw('open', { message: 'I need help with pricing' });

Verify Loading

1. Visual Check:

Widget launcher appears in corner
Clicking opens chat interface
Messages send and receive responses

2. Console Check: Open browser DevTools (F12) → Console. You should see:

No errors? Great! Your widget is working properly.

Expected Console Output

[Bravin AI] Widget loaded successfully
[Bravin AI] Connected to server
[Bravin AI] Agent ready

Troubleshooting

Widget Not Appearing:

Check API key is correct
Verify script is before </body>
Check for JavaScript errors in console
Ensure no ad blockers are interfering

Widget Loads But Doesn't Respond:

Check account has active subscription
Verify agent is published (not draft)
Check network tab for API errors
Ensure firewall isn't blocking widget.bravin.ai

Styling Issues:

Check for CSS conflicts with your site
Use !important to override conflicting styles
Verify theme colors are valid hex codes

Still having issues? Contact support@bravin.ai with your website URL and console errors.

Website Integration: Script & CSS

Introduction

Basic Installation

Launcher Positioning

Custom Styling

Advanced Configuration

Advanced Configuration (continued)

Verify Loading

Troubleshooting

Was this guide helpful?

Next Steps

Customize Agent Voice

Track Performance