Developer Resources

<script>
  window.botblySettings = {
    apiKey: "YOUR_API_KEY",
    botId: "YOUR_BOT_ID",
    theme: "light",
    position: "bottom-right"
  };
</script>
<script src="https://cdn.botbly.com/widget.js" async></script>

2. Customize the widget appearance

<script>
  window.botblySettings = {
    apiKey: "YOUR_API_KEY",
    botId: "YOUR_BOT_ID",
    theme: "light", // "light", "dark", or "auto"
    position: "bottom-right", // "bottom-right", "bottom-left", "top-right", "top-left"
    primaryColor: "#6366F1", // Your brand color
    greeting: "Hi there! How can I help you today?",
    title: "Customer Support",
    subtitle: "We typically reply in a few minutes"
  };
</script>

3. Trigger the widget programmatically

// Open the chat widget
botbly.open();

// Close the chat widget
botbly.close();

// Toggle the chat widget
botbly.toggle();

// Send a message programmatically
botbly.sendMessage("I'd like to book a demo");

// Set user information
botbly.setUser({
  id: "user-123",
  name: "John Doe",
  email: "john@example.com",
  metadata: {
    plan: "premium",
    signupDate: "2023-04-01"
  }
});

View Full Documentation

Common Integration Scenarios

Basic Website Integration

Add a chat widget to your website with minimal code.

<script>
  window.botblySettings = { apiKey: "YOUR_API_KEY", botId: "YOUR_BOT_ID" };
</script>
<script src="https://cdn.botbly.com/widget.js" async></script>

Single Page Application (React)

Integrate the botbly chat widget into a React application.

import { useEffect } from 'react';

function BotblyChat() {
  useEffect(() => {
    // Load botbly script
    const script = document.createElement('script');
    script.src = 'https://cdn.botbly.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    // Configure botbly
    window.botblySettings = {
      apiKey: 'YOUR_API_KEY',
      botId: 'YOUR_BOT_ID',
    };
    
    return () => {
      // Cleanup on component unmount
      document.body.removeChild(script);
    };
  }, []);
  
  return null; // This component doesn't render anything
}

export default BotblyChat;

Server-Side Integration (Node.js)

Use the botbly API on your server to handle chatbot interactions.

const axios = require('axios');

async function getChatbotResponse(message, sessionId) {
  try {
    const response = await axios.post('https://api.botbly.com/v1/chat/completions', {
      bot_id: 'YOUR_BOT_ID',
      session_id: sessionId,
      messages: [{ role: 'user', content: message }]
    }, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    });
    
    return response.data;
  } catch (error) {
    console.error('Error getting chatbot response:', error);
    throw error;
  }
}

// Example usage
app.post('/api/chat', async (req, res) => {
  try {
    const { message, sessionId } = req.body;
    const botResponse = await getChatbotResponse(message, sessionId);
    res.json(botResponse);
  } catch (error) {
    res.status(500).json({ error: 'Failed to get chatbot response' });
  }
});

Need Help with Integration?

Our team is ready to assist you with any integration challenges or custom requirements.

Contact Developer Support Create Free Account