BH

Docs

Dashboard

Script Tag Integration

The easiest way to add BotHarbor to your website. Just add a script tag and you're ready to go.

Basic Implementation

Add this script tag anywhere in your HTML document. We recommend placing it just before the closing </body> tag.

Basic Script Tag
<script 
  src="https://botharbor.ai/embed.js" 
  data-bot-id="your-bot-id">
</script>

Configuration Object Method

For more advanced configuration, use the global configuration object before loading the script:

Configuration Object Method
<script>
window.BOTHARBOR_CONFIG = {
  botId: 'your-bot-id',
  theme: 'light',
  position: 'bottom-right',
  primaryColor: '#14B8A6',
  greeting: 'Hello! How can I help you?'
};
</script>
<script src="https://botharbor.ai/embed.js"></script>

Complete HTML Example

Here's a complete HTML page with BotHarbor integration using the configuration object:

Complete HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>BotHarbor Chat Embed</title>
  <!-- ✅ Correct Config Object -->
  <script>
    window.BOTHARBOR_CONFIG = {
      botId: '301988f2-ea17-4b1d-81fc-ab5f2db2dfd9',
      position: 'bottom-right',
    };
  </script>
  <!-- Embed script -->
  <script src="https://botharbor.ai/embed.js" async></script>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>The BotHarbor chatbot should appear in the bottom-right corner.</p>
</body>
</html>

Data Attributes Method

Alternatively, you can use data attributes directly on the script tag:

Data Attributes Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BotHarbor Chatbot Embed</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page embeds the BotHarbor chatbot using a script tag.</p>
  
  <!-- BotHarbor Embed Script -->
  <script 
    src="https://botharbor.ai/embed.js"
    data-bot-id="301988f2-ea17-4b1d-81fc-ab5f2db2dfd9"
    data-position="bottom-right">
  </script>
</body>
</html>

Available Configuration Options

Required Options
botId

Your unique bot ID from the BotHarbor dashboard

Appearance Options
theme

Theme mode:

light
dark
auto

position
bottom-right
bottom-left
top-right
top-left
primaryColor

Primary color in hex format (e.g., #14B8A6)

greeting

Custom greeting message

Async Loading

For better page performance, load the widget asynchronously:

Async Loading
<!-- Async loading for better performance -->
<script>
  window.BOTHARBOR_CONFIG = {
    botId: 'your-bot-id',
    theme: 'light',
    position: 'bottom-right',
    primaryColor: '#14B8A6'
  };
</script>
<script src="https://botharbor.ai/embed.js" async></script>

Event Handling

Listen to widget events to integrate with your application:

Event Listeners
<script>
  // Listen for widget events
  window.addEventListener('botharbor:ready', function() {
    console.log('BotHarbor widget is ready');
  });

  window.addEventListener('botharbor:open', function() {
    console.log('Chat widget opened');
  });

  window.addEventListener('botharbor:close', function() {
    console.log('Chat widget closed');
  });

  window.addEventListener('botharbor:message', function(event) {
    console.log('New message:', event.detail);
  });
</script>

JavaScript API

Control the widget programmatically using the JavaScript API:

JavaScript API Methods
<script>
  // Control the widget programmatically
  
  // Open the chat widget
  if (window.BotHarbor) {
    window.BotHarbor.open();
  }
  
  // Close the chat widget
  if (window.BotHarbor) {
    window.BotHarbor.close();
  }
  
  // Send a message programmatically
  if (window.BotHarbor) {
    window.BotHarbor.sendMessage('Hello from the website!');
  }
  
  // Update widget settings
  if (window.BotHarbor) {
    window.BotHarbor.updateSettings({
      theme: 'dark',
      primaryColor: '#10b981'
    });
  }
</script>

Next Steps

Now that you have the basic script tag setup, explore other integration methods or framework-specific guides.

iFrame Integration →
React Guide →