Deployment

Deployment Overview

Chatislav provides multiple ways to embed your AI agents into websites and applications. Choose the method that best fits your technical requirements and integration preferences.

JavaScript Embedding (Recommended)

JavaScript embedding is the recommended deployment method as it provides full SDK functionality, better performance, and seamless integration with your website.

Chat Widget - JavaScript:

<script>
  (function (w, d, o, f) {
    w[o] =
      w[o] ||
      function (config) {
        var js = d.createElement("script");
        js.src = f;
        js.async = true;
        js.onload = function () {
          var e = d.createElement("div");
          e.id = o;
          d.body.appendChild(e);
          w.init_chatislav
            ? w.init_chatislav(o, config)
            : console.error("chatislav init function not available.");
        };
        d.body.appendChild(js);
      };
  })(window, document, "ctslv_bbl", "https://chatislav.ai/api/static/chat-bot/index.js");
  
  ctslv_bbl({ 
    base_url: "https://chatislav.ai/api", 
    token: "your-widget-token" 
  });
</script>

Voice Widget - JavaScript:

<script>
  (function (w, d, o, f) {
    w[o] =
      w[o] ||
      function (config) {
        var js = d.createElement("script");
        js.src = f;
        js.async = true;
        js.onload = function () {
          var e = d.createElement("div");
          e.id = o;
          d.body.appendChild(e);
          w.init_voice_chatislav
            ? w.init_voice_chatislav(o, config)
            : console.error("voice chatislav init function not available.");
        };
        d.body.appendChild(js);
      };
  })(window, document, "ctslv_bbl", "https://chatislav.ai/api/static/voice-assistant/index.js");
  
  ctslv_bbl({ 
    base_url: "https://chatislav.ai/api", 
    token: "your-voice-widget-token" 
  });
</script>

iFrame Embedding

iFrame embedding provides a simple integration method but with limited SDK functionality. Use this when you need basic widget functionality without advanced integrations.

Chat Widget - iFrame:

<iframe
    id="chatislaviframe"
    src="https://chatislav.ai/api/static/chat-bot/index.html?base_url=https://chatislav.ai/api&token=your-widget-token"
    width="100%"
    style="height: 100%; min-height: 700px"
    frameborder="0"
    allowtransparency="true"
    allow="microphone;">
</iframe>

Voice Widget - iFrame:

<iframe
    id="chatislaviframe"
    src="https://chatislav.ai/api/static/voice-assistant/index.html?base_url=https://chatislav.ai/api&token=your-voice-widget-token"
    width="100%"
    style="height: 100%; min-height: 700px"
    frameborder="0"
    allowtransparency="true"
    allow="microphone;">
</iframe>

Configuration Parameters

The base_url is always https://chatislav.ai/api. You only need to provide:

Parameter	Description	Required
`token`	Your widget authentication token	Yes
`config`	Widget appearance and behavior settings	No

Basic Configuration Example:

ctslv_bbl({ 
  base_url: "https://chatislav.ai/api", 
  token: "your-widget-token",
  config: {
    main_color: "#2563eb",
    welcome_message: "Hello! How can I help you today?",
    position: "bottom-right",
  }
});

Getting Your Token

Your widget token can be copied from Settings → Deploy in your Chatislav dashboard.

Configuration Options

All configuration options are optional and can be passed in the config object:

Basic Settings

Field	Type	Description
`language`	string	Widget language
`company_name`	string	Your company name
`bot_name`	string	Name of your bot
`title`	string	Widget title
`subtitle`	string	Widget subtitle

Visual Customization

Field	Type	Description
`main_color`	string	Primary widget color (hex format)
`main_color_blur`	number	Blur amount for main color
`main_text_color`	string	Main text color (hex format)
`accent_color`	string	Accent/secondary color (hex format)
`accent_text_color`	string	Accent text color (hex format)
`user_bubble_color`	string	User message bubble color (hex format)
`user_bubble_text_color`	string	User message text color (hex format)

Layout & Positioning

Field	Type	Description
`position`	string	Widget position (e.g., "bottom-right", "bottom-left")
`chat_button_size`	number	Size of the chat button
`width`	number	Widget width in pixels
`height`	number	Widget height in pixels

Messages & Interaction

Field	Type	Description
`welcome_message`	string	Initial greeting message
`input_placeholder`	string	Placeholder text for input field
`server_error_message`	string	Error message to display on server errors

Features & Behavior

Field	Type	Description
`show_sources`	boolean	Whether to show information sources
`chat_form_open_by_default`	boolean	Open chat widget automatically
`show_floating_welcome_message`	boolean	Display floating welcome message
`show_floating_starter_questions`	boolean	Show floating starter questions
`hide_floating_items_on_mobile`	boolean	Hide floating elements on mobile devices
`show_form_fields`	boolean	Enable custom form fields
`form_fields`	array	Array of custom form field objects
`chat_feedback_query`	boolean	Enable feedback collection

Starter Questions

Field	Type	Description
`starter_questions`	array	Array of starter question objects

Starter Question Object Structure:

{
  position: number,      // Display order
  title: string,         // Question title
  question: string,      // The actual question text
  answer: string,        // Suggested answer
  icon: string
}

Example Configuration

ctslv_bbl({ 
  base_url: "https://chatislav.ai/api", 
  token: "your-widget-token-from-settings",
  config: {
    language: "en",
    company_name: "Your Company",
    bot_name: "Assistant",
    title: "Chat Support",
    subtitle: "We're here to help",
    
    main_color: "#2563eb",
    main_text_color: "#ffffff",
    accent_color: "#10b981",
    user_bubble_color: "#f3f4f6",
    
    position: "bottom-right",
    chat_button_size: 60,
    width: 400,
    height: 600,
    
    welcome_message: "Hello! How can I help you today?",
    input_placeholder: "Type your message...",
    
    show_sources: true,
    chat_form_open_by_default: false,
    show_floating_welcome_message: true,
    show_floating_starter_questions: true,
    
    starter_questions: [
      {
        position: 1,
        title: "Get Started",
        question: "How do I get started?",
        answer: "I can help you get started with our services!",
        icon: null
      },
      {
        position: 2,
        title: "Pricing",
        question: "What are your pricing options?",
        answer: "Let me show you our pricing plans.",
        icon: null
      }
    ]
  }
});

Custom Instance ID

By default, widgets use the instance ID ctslv_bbl. You can customize this for multiple widgets or specific styling:

Custom Instance ID Example:

<script>
  (function (w, d, o, f) {
    w[o] = w[o] || function (config) {
      // ... embedding code ...
    };
  })(window, document, "my-custom-chat", "https://chatislav.ai/api/static/chat-bot/index.js");
  
  my_custom_chat({ 
    base_url: "https://chatislav.ai/api", 
    token: "your-widget-token" 
  });
</script>

Deploy multiple widgets with different configurations:

<!-- Sales Chat Widget -->
<script>
  (function (w, d, o, f) {
    w[o] = w[o] || function (config) {
      // ... embedding code ...
    };
  })(window, document, "sales_chat", "https://chatislav.ai/api/static/chat-bot/index.js");
  
  sales_chat({ 
    base_url: "https://chatislav.ai/api", 
    token: "sales-widget-token",
    config: {
      main_color: "#10b981",
      welcome_message: "Sales team here! How can we help?"
    }
  });
</script>

<!-- Support Chat Widget -->
<script>
  (function (w, d, o, f) {
    w[o] = w[o] || function (config) {
      // ... embedding code ...
    };
  })(window, document, "support_chat", "https://chatislav.ai/api/static/chat-bot/index.js");
  
  support_chat({ 
    base_url: "https://chatislav.ai/api", 
    token: "support-widget-token",
    config: {
      main_color: "#dc2626",
      welcome_message: "Support team ready to assist!"
    }
  });
</script>

Performance Optimization

1. Async Loading The JavaScript embedding method loads asynchronously by default, preventing blocking of your page load.

2. Lazy Loading Consider implementing lazy loading for widgets that appear below the fold:

// Load widget when user scrolls or after delay
window.addEventListener('scroll', function() {
  if (!window.chatWidgetLoaded && shouldLoadWidget()) {
    loadChatWidget();
    window.chatWidgetLoaded = true;
  }
});

3. Conditional Loading Load widgets only when needed:

// Load widget only on specific pages
if (window.location.pathname.includes('/support')) {
  ctslv_bbl({ 
    base_url: "https://chatislav.ai/api", 
    token: "support-widget-token" 
  });
}

Testing Your Deployment

1. Verify Widget Loading Check browser console for any loading errors or warnings.

2. Test Functionality

Send test messages
Verify responses
Test on different devices and browsers

3. Performance Testing

Measure page load impact
Test with slow network connections
Verify mobile responsiveness

4. Integration Testing If using SDK features:

Test event listeners
Verify client-side actions
Check user session handling

Common Issues & Solutions

Widget Not Loading:

Verify your token is correct
Check browser console for errors
Ensure HTTPS is used in production

Multiple Widget Conflicts:

Use unique instance IDs for each widget
Ensure different variable names in embedding scripts

CSP Violations:

Update Content Security Policy to allow Chatislav domains
Whitelist necessary script and connection sources

Mobile Display Issues:

Test widget responsiveness
Verify touch interactions work properly
Check viewport meta tag is present

Best Practices

1. Use JavaScript Embedding - Provides full functionality and better performance 2. Implement Error Handling - Handle widget loading failures gracefully
3. Test Across Devices - Ensure compatibility on desktop and mobile 4. Monitor Performance - Track impact on page load times 5. Keep Tokens Secure - Protect authentication tokens and rotate regularly 6. Use HTTPS - Always deploy with secure connections in production

Deployment

Deployment Overview

JavaScript Embedding (Recommended)

iFrame Embedding

Configuration Parameters

Widget Configuration

Getting Your Token

Configuration Options

Custom Instance ID

Multiple Widget Deployment

Performance Optimization

Testing Your Deployment

Common Issues & Solutions

Best Practices

Deployment Overview​

JavaScript Embedding (Recommended)​

iFrame Embedding​

Configuration Parameters​

Widget Configuration​

Getting Your Token​

Configuration Options​

Custom Instance ID​

Multiple Widget Deployment​

Performance Optimization​

Testing Your Deployment​

Common Issues & Solutions​

Best Practices​

Deployment Overview

JavaScript Embedding (Recommended)

iFrame Embedding

Configuration Parameters

Widget Configuration

Getting Your Token

Configuration Options

Custom Instance ID

Multiple Widget Deployment

Performance Optimization

Testing Your Deployment

Common Issues & Solutions

Best Practices