Add MagicChat to Any Website

Learn how to integrate MagicChat's AI-powered chat widget into any website using HTML and JavaScript. This guide covers universal integration methods that work with any web platform.

Prerequisites

  • Access to edit your website's HTML
  • A MagicChat account and bot ID (Sign up here)
  • Basic understanding of HTML and JavaScript

Method 1: Script Tag Integration

The simplest way to add MagicChat to any website is by adding our script tag to your HTML.

Add to HTML

Add this code just before the closing </body> tag

<script src="https://script.magicchat.ai/js/commandk.js" id="YOUR_BOT_ID"></script>

Custom Initialization

Optional: Configure the widget with custom settings

<script>
window.MagicChat = {
    botId: 'YOUR_BOT_ID',
    theme: 'light',
    position: 'bottom-right',
    initialMessage: 'Hello! How can I help you today?',
    // Add more configuration options as needed
};
</script>
<script src="https://script.magicchat.ai/js/commandk.js"></script>

Configuration Options

Available Settings

  • theme: 'light' | 'dark' | 'auto'
  • position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  • initialMessage: Custom welcome message
  • customCSS: Custom CSS for styling
  • language: Preferred language code

Event Handling

Available Events

const chat = new MagicChat({
    botId: 'YOUR_BOT_ID',
    onReady: () => console.log('Chat widget ready'),
    onOpen: () => console.log('Chat opened'),
    onClose: () => console.log('Chat closed'),
    onMessage: (message) => console.log('New message:', message),
    onError: (error) => console.error('Error:', error)
});

Need Help?

If you need assistance with integration or have any questions, feel free to: