Documentation
DocumentationDocumentation

Vanilla JavaScript SDK

Universal chatbot integration for any website or application

JavaScript
Universal
Lightweight
What is the Vanilla JavaScript SDK?

Our Vanilla JavaScript SDK is a lightweight, framework-agnostic solution for integrating AI chatbots into any website or web application. With zero dependencies and universal compatibility, it works with any technology stack including HTML, WordPress, Shopify, and more.

Key Features
Zero Dependencies

No external libraries required

Lightweight

Minimal file size for fast loading

Universal Compatibility

Works with any website or framework

Easy Integration

Simple script tag installation

Cross-Browser Support

Works in all modern browsers

Mobile Responsive

Optimized for mobile devices

1
Quick Setup

Add the chatbot to your website with just two lines of code.

Include SDK Script

<!-- Include Vanilla JavaScript SDK -->
<script src="https://asrochat.app/sdk/chatbot-sdk.js"></script>

Initialize Chatbot

<script>
  // Initialize the Vanilla JS SDK
  AsroChatSDK.init({
    apiKey: 'your-api-key-here',
    botId: 'your-bot-id-here'
  });
</script>
2
Complete HTML Example

Here's a complete HTML page with the chatbot integrated.

Full HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website with Chatbot</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This website has an AI chatbot powered by our SDK.</p>
    
    <!-- Include SDK -->
    <script src="https://asrochat.app/sdk/chatbot-sdk.js"></script>
    <script>
        AsroChatSDK.init({
            apiKey: 'your-api-key-here',     // Replace with your actual API key
            botId: 'your-bot-id-here',       // Replace with your actual bot ID
            theme: 'light',
            position: 'bottom-right'
            // baseUrl is automatically set to use secure proxy
        });
    </script>
</body>
</html>
3
Advanced Configuration

Customize the chatbot with advanced configuration options and event callbacks.

Advanced Options

<script>
  // Advanced configuration options
  AsroChatSDK.init({
    apiKey: 'your-api-key-here',
    botId: 'your-bot-id-here',
    
    // Appearance
    theme: 'light', // 'light' or 'dark'
    position: 'bottom-right', // 'bottom-right', 'bottom-left'
    primaryColor: '#3b82f6',
    
    // Behavior
    autoOpen: false,
    showWelcomeMessage: true,
    welcomeMessage: 'Hello! How can I help you today?',
    placeholder: 'Type your message...',
    
    // Features
    enableTyping: true,
    enableSounds: false,
    enableFileUpload: true,
    maxMessages: 100,
    
    // Callbacks
    onOpen: function() {
        console.log('Chatbot opened');
    },
    onClose: function() {
        console.log('Chatbot closed');
    },
    onMessage: function(message) {
        console.log('New message:', message);
    }
  });
</script>
Appearance:
  • • Theme (light/dark)
  • • Position
  • • Primary color
  • • Custom styling
Behavior:
  • • Auto-open settings
  • • Welcome messages
  • • Typing indicators
  • • File uploads
Events:
  • • onOpen callback
  • • onClose callback
  • • onMessage callback
  • • Custom handlers
4
API Methods

Control the chatbot programmatically using these JavaScript methods.

Available Methods

// Available SDK methods
AsroChatSDK.open();           // Open the chatbot
AsroChatSDK.close();          // Close the chatbot
AsroChatSDK.toggle();         // Toggle chatbot visibility
AsroChatSDK.sendMessage('Hello'); // Send a message programmatically
AsroChatSDK.clearHistory();   // Clear chat history
AsroChatSDK.destroy();        // Remove chatbot from page

// Get chatbot state
const isOpen = AsroChatSDK.isOpen();
const messageCount = AsroChatSDK.getMessageCount();
Control Methods:
  • open(): Open chatbot
  • close(): Close chatbot
  • toggle(): Toggle visibility
Utility Methods:
  • sendMessage(): Send message
  • clearHistory(): Clear chat
  • isOpen(): Check state
5
Custom Styling

Override default styles with custom CSS to match your brand perfectly.

CSS Customization

/* Custom CSS for additional styling */
.chatbot-widget {
  /* Custom widget styles */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.chatbot-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.chatbot-message-user {
  background-color: #3b82f6;
  border-radius: 18px 18px 4px 18px;
}

.chatbot-message-bot {
  background-color: #f1f5f9;
  border-radius: 18px 18px 18px 4px;
}
SDK Resources
JavaScript SDK URL
https://asrochat.app/sdk/chatbot-sdk.js
Next Steps

Configuration Guide

Learn about all available configuration options.

Read Guide

Test Your Integration

Use our testing interface to verify your setup.

Open Tester