Skip to main content

Embedding Your Chatbot

Learn how to embed your ChatMaven chatbot into your website, application, or other platforms. This guide covers various integration methods and best practices for optimal deployment.

Website Integration​

JavaScript Snippet​

  1. Basic Installation

    <script>
      window.chatmavenConfig = {
        botId: 'YOUR_BOT_ID',
        apiKey: 'YOUR_PUBLIC_API_KEY'
      };
    </script>
    <script src="https://cdn.chatmaven.ai/widget.js" async></script>

  2. Configuration Options

    window.chatmavenConfig = {
      botId: 'YOUR_BOT_ID',
      apiKey: 'YOUR_PUBLIC_API_KEY',
      position: 'bottom-right',
      theme: 'light',
      defaultOpen: false,
      language: 'en'
    };

HTML Element​

<!-- Embed in specific element -->
<div id="chatmaven-container"></div>
<script>
  window.chatmavenConfig = {
    botId: 'YOUR_BOT_ID',
    apiKey: 'YOUR_PUBLIC_API_KEY',
    container: '#chatmaven-container'
  };
</script>

Framework Integration​

React​

import { ChatMavenWidget } from '@chatmaven/react';

function App() {
  return (
    <ChatMavenWidget
      botId="YOUR_BOT_ID"
      apiKey="YOUR_PUBLIC_API_KEY"
      position="bottom-right"
    />
  );
}

Vue.js​

<template>
  <ChatMavenWidget
    :bot-id="botId"
    :api-key="apiKey"
    :options="options"
  />
</template>

<script>
import { ChatMavenWidget } from '@chatmaven/vue';

export default {
  components: { ChatMavenWidget },
  data() {
    return {
      botId: 'YOUR_BOT_ID',
      apiKey: 'YOUR_PUBLIC_API_KEY',
      options: {
        position: 'bottom-right',
        theme: 'light'
      }
    };
  }
};
</script>

Mobile Integration​

React Native​

import { ChatMavenView } from '@chatmaven/react-native';

function ChatScreen() {
  return (
    <ChatMavenView
      botId="YOUR_BOT_ID"
      apiKey="YOUR_PUBLIC_API_KEY"
      style={styles.chat}
    />
  );
}

iOS (Swift)​

import ChatMavenSDK

class ChatViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let chatView = ChatMavenView(
            botId: "YOUR_BOT_ID",
            apiKey: "YOUR_PUBLIC_API_KEY"
        )
        view.addSubview(chatView)
    }
}

Android (Kotlin)​

import ai.chatmaven.sdk.ChatMavenView

class ChatActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val chatView = ChatMavenView(this).apply {
            setBotId("YOUR_BOT_ID")
            setApiKey("YOUR_PUBLIC_API_KEY")
        }
        setContentView(chatView)
    }
}

Advanced Configuration​

Custom Events​

// Listen for chat events
window.chatmaven.on('message:received', (message) => {
  console.log('New message:', message);
});

// Trigger custom actions
window.chatmaven.trigger('open');
window.chatmaven.trigger('close');

Styling Options​

window.chatmavenConfig = {
  styles: {
    widget: {
      height: '500px',
      width: '350px',
      borderRadius: '12px'
    },
    header: {
      backgroundColor: '#007bff'
    },
    messages: {
      fontFamily: 'Arial, sans-serif'
    }
  }
};

Security Considerations​

API Key Safety​

  1. Public vs. Private Keys

    • Use public keys for frontend
    • Secure private keys
    • Implement key rotation
    • Monitor usage

  2. Domain Restrictions

    • Whitelist domains
    • CORS settings
    • Referrer checking
    • Rate limiting

Best Practices​

Performance​

  1. Loading Optimization

    • Async loading
    • Resource minification
    • Lazy initialization
    • Cache management

  2. Error Handling

    • Connection issues
    • Fallback content
    • Error messages
    • Retry logic

User Experience​

  1. Responsiveness

    • Mobile-first design
    • Touch optimization
    • Keyboard handling
    • Screen readers

  2. Initialization

    • Loading states
    • Graceful fallback
    • Error recovery
    • Status indicators

Troubleshooting​

Common Issues​

  1. Integration Problems

    • Script loading
    • Configuration errors
    • API key issues
    • CORS problems

  2. Performance Issues

    • Loading time
    • Memory usage
    • Network errors
    • Browser compatibility

Getting Help​

  • Check documentation
  • Review console logs
  • Contact support
  • Community forums

Next Steps​