Integration Guide

🚀 Getting Started

Integrating your MakeMyBot chatbot is simple and takes less than 60 seconds. Follow these steps to get your chatbot live on your website.

🌐 Web Integration (HTML/JavaScript)

The simplest way to add your chatbot to any website using vanilla HTML and JavaScript.

Basic Integration

Add this code snippet to your HTML file, just before the closing </body> tag:

<!-- MakeMyBot Chatbot Integration -->
<script>
  window.MakeMyBotConfig = {
    botId: 'YOUR_BOT_ID',
    name: 'Customer Support Bot',
    avatar: '🤖',
    color: '#667eea',
    position: 'bottom-right',
    welcomeMessage: 'Hi! How can I help you today?'
  };
</script>
<script src="https://cdn.MakeMyBot.com/widget.js" async></script>
<!-- End MakeMyBot Integration -->

Advanced Configuration

Customize your chatbot's behavior with additional options:

window.MakeMyBotConfig = {
  botId: 'YOUR_BOT_ID',
  name: 'Customer Support Bot',
  avatar: '🤖',
  color: '#667eea',
  position: 'bottom-right',
  welcomeMessage: 'Hi! How can I help you today?',
  
  // AI Configuration (Your own LLM API)
  aiProvider: 'openai',        // 'openai', 'anthropic', 'google', 'cohere', or 'custom'
  apiKey: 'YOUR_API_KEY',      // Your LLM provider API key
  model: 'gpt-4',              // Model to use (optional)
  temperature: 0.7,            // Creativity level (0-1)
  
  // Advanced options
  autoOpen: false,              // Auto-open chat on page load
  openDelay: 3000,              // Delay before auto-open (ms)
  showOnMobile: true,           // Show on mobile devices
  language: 'en',               // Language code
  theme: 'light',               // 'light' or 'dark'
  
  // Custom styling
  customCSS: {
    fontSize: '14px',
    borderRadius: '12px',
    zIndex: 9999
  }
};

⚛️ React Integration

Integrate MakeMyBot into your React application with our official component.

npm install @MakeMyBot/react-widget

yarn add @MakeMyBot/react-widget

<script src="https://cdn.MakeMyBot.com/react-widget.js"></script>

Usage in React Component

import React from 'react';
import { MakeMyBotWidget } from '@MakeMyBot/react-widget';

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <MakeMyBotWidget
        botId="YOUR_BOT_ID"
        name="Customer Support Bot"
        avatar="🤖"
        color="#667eea"
        position="bottom-right"
        welcomeMessage="Hi! How can I help you today?"
      />
    </div>
  );
}

export default App;

📝 WordPress Integration

Add your chatbot to WordPress using our plugin or manual integration.

Method 1: WordPress Plugin (Recommended)

Method 2: Manual Integration

Add the integration code to your theme's footer:

📱 Mobile App Integration

Integrate MakeMyBot into your iOS and Android applications.

pod 'MakeMyBotSDK'

import MakeMyBotSDK

func application(_ application: UIApplication, 
                didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    
    MakeMyBot.initialize(botId: "YOUR_BOT_ID")
    MakeMyBot.setName("Customer Support Bot")
    MakeMyBot.setColor("#667eea")
    
    return true
}

dependencies {
    implementation 'com.MakeMyBot:android-sdk:1.0.0'
}

import com.MakeMyBot.sdk.MakeMyBot

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        
        MakeMyBot.initialize(this, "YOUR_BOT_ID")
        MakeMyBot.setName("Customer Support Bot")
        MakeMyBot.setColor("#667eea")
    }
}

npm install @MakeMyBot/react-native

import { MakeMyBotWidget } from '@MakeMyBot/react-native';

function App() {
  return (
    <MakeMyBotWidget
      botId="YOUR_BOT_ID"
      name="Customer Support Bot"
      color="#667eea"
    />
  );
}

🎨 Customization Options

Customize your chatbot's appearance and behavior to match your brand.

🔌 API Reference

Programmatically control your chatbot using JavaScript API.

MakeMyBot.open();

MakeMyBot.close();

MakeMyBot.sendMessage('Hello, I need help!');

MakeMyBot.setUser({
  name: 'John Doe',
  email: 'john@example.com',
  customData: {
    plan: 'premium',
    userId: '12345'
  }
});

// Listen for chat opened
MakeMyBot.on('open', () => {
  console.log('Chat opened');
});

// Listen for chat closed
MakeMyBot.on('close', () => {
  console.log('Chat closed');
});

// Listen for new messages
MakeMyBot.on('message', (message) => {
  console.log('New message:', message);
});

🔧 Troubleshooting

Common issues and how to resolve them.