BH

Docs

Dashboard

iFrame Integration

Embed BotHarbor as an iframe for full control over positioning, styling, and integration with your existing layout.

Full Control

Complete control over size, position, and styling of the chat interface.

Responsive

Easily make the chat interface responsive and mobile-friendly.

Customizable

Pass configuration options via URL parameters for customization.

Basic Implementation

The simplest way to embed BotHarbor as an iframe:

Basic iFrame
<iframe 
  src="https://botharbor.ai/widget?bot_id=your-bot-id" 
  width="400" 
  height="600"
  frameborder="0"
  title="BotHarbor Chat">
</iframe>

Responsive iFrame

Make your chat widget responsive and mobile-friendly:

Responsive iFrame with CSS
<div class="botharbor-container">
  <iframe 
    src="https://botharbor.ai/widget?bot_id=your-bot-id&theme=light&greeting=Hello!" 
    frameborder="0"
    title="BotHarbor Chat">
  </iframe>
</div>

<style>
.botharbor-container {
  position: relative;
  width: 100%;
  height: 600px;
  max-width: 400px;
  margin: 0 auto;
}

.botharbor-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .botharbor-container {
    height: 500px;
    max-width: 100%;
  }
}
</style>

URL Parameters

Customize the chat interface by adding parameters to the iframe URL:

Required Parameters
bot_idYour unique bot ID from BotHarbor dashboard
Appearance Parameters
themelight, dark, or auto
primaryColorHex color code (e.g., %2314B8A6)
greetingURL-encoded greeting message
Layout Parameters
fullscreentrue or false - removes padding and borders
hideHeadertrue or false - hides the chat header

Full-Page Chat

Create a dedicated chat page using iframe:

Full-Page Chat Implementation
<!DOCTYPE html>
<html>
<head>
  <title>Customer Support Chat</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .chat-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      background: #f8fafc;
      padding: 1rem;
      border-bottom: 1px solid #e2e8f0;
    }
    .chat-frame {
      flex: 1;
      border: none;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <div class="header">
      <h1>Customer Support</h1>
      <p>Chat with our AI assistant for instant help</p>
    </div>
    <iframe 
      class="chat-frame"
      src="https://botharbor.ai/widget?bot_id=your-bot-id&theme=light&fullscreen=true"
      title="Customer Support Chat">
    </iframe>
  </div>
</body>
</html>

Dynamic iFrame Creation

Create and configure iframes dynamically with JavaScript:

Dynamic iFrame Creation
<script>
function createBotHarborIframe(containerId, botId, options = {}) {
  const container = document.getElementById(containerId);
  if (!container) return;

  // Build query parameters
  const params = new URLSearchParams({
    bot_id: botId,
    theme: options.theme || 'light',
    greeting: options.greeting || 'Hello! How can I help you?',
    primaryColor: options.primaryColor || '#14B8A6',
    ...options
  });

  // Create iframe
  const iframe = document.createElement('iframe');
  iframe.src = `https://botharbor.ai/widget?${params.toString()}`;
  iframe.width = options.width || '400';
  iframe.height = options.height || '600';
  iframe.frameBorder = '0';
  iframe.title = options.title || 'BotHarbor Chat';
  iframe.style.borderRadius = '12px';
  iframe.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';

  container.appendChild(iframe);
}

// Usage
createBotHarborIframe('chat-container', 'your-bot-id', {
  theme: 'dark',
  greeting: 'Welcome to our support chat!',
  primaryColor: '#10b981',
  width: '100%',
  height: '700'
});
</script>

<div id="chat-container"></div>

Best Practices

Responsive Design
  • • Use percentage-based widths for mobile compatibility
  • • Set appropriate min/max dimensions
  • • Test on different screen sizes
  • • Consider touch-friendly sizing on mobile
Performance
  • • Use loading="lazy" for below-the-fold iframes
  • • Set explicit width and height to prevent layout shift
  • • Consider intersection observer for conditional loading
  • • Monitor iframe load times

When to Use iFrame

iFrame integration is ideal when you need full control over the chat interface positioning, want to create dedicated chat pages, or need to integrate with complex layouts.

Script Tag Integration ←
Framework Guides →