Inline Chat Setup

This guide explains how to configure the Botsplash Chat Widget to display inline within your webpage content rather than as a floating overlay.

Overview

The Botsplash Chat Widget supports inline display mode, allowing you to embed the chat interface directly into your page layout. This is useful for:

Dedicated chat pages
Contact forms replacement
Embedded customer support sections
Landing page integrations

Setup Methods

There are two ways to configure inline chat:

Admin Configuration - Set chat theme to “Inline” in Botsplash Admin
Script Configuration - Configure inline mode directly in the widget script

Method 1: Admin Configuration

Step 1: Configure in Botsplash Admin

Log in to your Botsplash Admin panel at app.botsplash.com
Navigate to Settings → Chat Widget
Select your chat widget configuration
In the Display section, set the theme to “Inline”
Save your configuration

Step 2: Prepare HTML Container

Create a container element where the chat will be embedded:

<style>
  .chat-container {
    width: 400px;
    height: 600px;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
  }
</style>

<div class="chat-container">
  <div id="botsplash-chat-root"></div>
</div>

<script type="text/javascript">
window.BOTSPLASH_APP_ID="YOUR_ACCOUNT_ID_HERE";
(function(){d=document;s=d.createElement("script");s.src="https://chatcdn.botsplash.com/x.js";s.async=true;d.getElementsByTagName("head")[0].appendChild(s);})();
</script>

Method 2: Script Configuration

Dynamic Inline Chat Loading

Use the following JavaScript function to dynamically load inline chat:

<script>
function launchChat(customer) {
  var params = {
    appParams: {
      routingKey: 'quick-chat',
      visitor: {
        clientVisitorId : customer.id,
        email           : customer.email,
        firstName       : customer.firstName,
        lastName        : customer.lastName,
        phoneNumber     : customer.phoneNumber,
        state           : customer.state,
        custom: {
          rateProgram : 'Refinance',
          rateTerm    : '30yr program'
        }
      }
    },
    displayType: window.$botsplash.DisplayType.Inline
  };

  if (window.$botsplash) {
    // Clear any existing chat window
    window.$botsplash.remove(true);
    // Launch inline chat
    window.$botsplash.open(params);
  }
}
</script>

Complete Implementation Examples

Example 1: Contact Page Integration

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us - Your Company</title>
    <style>
        .contact-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 40px;
        }

        .contact-info {
            padding: 20px;
        }

        .chat-container {
            width: 100%;
            height: 600px;
            position: relative;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            background: white;
        }

        @media (max-width: 768px) {
            .contact-section {
                grid-template-columns: 1fr;
            }
            .chat-container {
                height: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="contact-section">
        <div class="contact-info">
            <h1>Contact Us</h1>
            <p>Get in touch with our support team using the chat widget on the right, or use the contact information below:</p>

            <div class="contact-details">
                <h3>Office Hours</h3>
                <p>Monday - Friday: 9:00 AM - 6:00 PM EST</p>

                <h3>Phone</h3>
                <p>1-800-BOTSPLASH</p>

                <h3>Email</h3>
                <p>support@yourcompany.com</p>
            </div>
        </div>

        <div class="chat-container">
            <div id="botsplash-chat-root"></div>
        </div>
    </div>

    <!-- Botsplash Widget Script -->
    <script type="text/javascript">
    window.BOTSPLASH_APP_PARAMS = {
        routingKey: "contact_page_support",
        visitor: {
            custom: {
                page_type: "contact",
                priority: "standard"
            }
        }
    };
    window.BOTSPLASH_APP_ID="YOUR_ACCOUNT_ID_HERE";
    (function(){d=document;s=d.createElement("script");s.src="https://chatcdn.botsplash.com/x.js";s.async=true;d.getElementsByTagName("head")[0].appendChild(s);})();
    </script>
</body>
</html>

Example 2: Dynamic Inline Chat with Button Trigger

<!DOCTYPE html>
<html>
<head>
    <title>Mortgage Calculator - Get Expert Help</title>
    <style>
        .calculator-page {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .chat-toggle-section {
            margin: 30px 0;
            text-align: center;
        }

        .chat-container {
            width: 100%;
            height: 500px;
            margin: 20px 0;
            border: 2px solid #007bff;
            border-radius: 10px;
            background: #f8f9fa;
            display: none; /* Hidden by default */
        }

        .chat-container.active {
            display: block;
        }

        .launch-chat-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .launch-chat-btn:hover {
            background: #0056b3;
        }

        .close-chat-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            margin: 10px 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="calculator-page">
        <h1>Mortgage Calculator</h1>

        <!-- Your mortgage calculator form here -->
        <div class="calculator-form">
            <p>Use our calculator to estimate your monthly payments...</p>
            <!-- Calculator inputs would go here -->
        </div>

        <div class="chat-toggle-section">
            <h3>Need Help with Your Calculation?</h3>
            <p>Chat with one of our mortgage experts for personalized assistance.</p>
            <button class="launch-chat-btn" onclick="toggleInlineChat()">
                💬 Chat with Mortgage Expert
            </button>
        </div>

        <div class="chat-container" id="chat-container">
            <button class="close-chat-btn" onclick="closeInlineChat()">✕ Close Chat</button>
            <div id="botsplash-chat-root"></div>
        </div>
    </div>

    <!-- Botsplash Widget Script -->
    <script type="text/javascript">
    window.BOTSPLASH_APP_ID="YOUR_ACCOUNT_ID_HERE";
    (function(){d=document;s=d.createElement("script");s.src="https://chatcdn.botsplash.com/x.js";s.async=true;d.getElementsByTagName("head")[0].appendChild(s);})();
    </script>

    <script>
    let chatLaunched = false;

    function toggleInlineChat() {
        const container = document.getElementById('chat-container');

        if (!chatLaunched) {
            launchMortgageChat();
            container.classList.add('active');
            chatLaunched = true;
        } else {
            container.style.display = container.style.display === 'none' ? 'block' : 'none';
        }
    }

    function closeInlineChat() {
        const container = document.getElementById('chat-container');
        container.classList.remove('active');

        if (window.$botsplash) {
            window.$botsplash.remove(true);
        }
        chatLaunched = false;
    }

    function launchMortgageChat() {
        const visitorId = 'mortgage_' + Date.now();

        const params = {
            appParams: {
                routingKey: 'mortgage_expert_chat',
                sessionKey: 'inline-mortgage-chat',
                visitor: {
                    clientVisitorId: visitorId,
                    custom: {
                        page_type: 'mortgage_calculator',
                        lead_source: 'calculator_page',
                        chat_trigger: 'expert_help_button'
                    }
                }
            },
            displayType: window.$botsplash.DisplayType.Inline
        };

        if (window.$botsplash) {
            window.$botsplash.remove(true);
            window.$botsplash.open(params);
        }
    }
    </script>
</body>
</html>

Customization Options

Container Styling

Customize the chat container to match your design:

/* Responsive chat container */
.chat-container {
    width: 100%;
    max-width: 450px;
    height: 600px;
    min-height: 400px;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    overflow: hidden;
    background: white;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .chat-container {
        height: 500px;
        margin: 10px;
        border-radius: 8px;
    }
}

/* Dark theme container */
.chat-container.dark-theme {
    background: #2c3e50;
    border: 1px solid #34495e;
}

Multiple Chat Instances

You can have multiple inline chat widgets on the same page:

<div class="support-chat">
    <h3>Technical Support</h3>
    <div class="chat-container">
        <div id="botsplash-chat-root-support"></div>
    </div>
</div>

<div class="sales-chat">
    <h3>Sales Inquiries</h3>
    <div class="chat-container">
        <div id="botsplash-chat-root-sales"></div>
    </div>
</div>

Best Practices

1. Container Sizing

Minimum width: 320px for mobile compatibility
Recommended width: 400-450px for optimal experience
Minimum height: 400px to show meaningful conversation
Recommended height: 500-600px for comfortable scrolling

2. Responsive Design

.chat-container {
    width: 100%;
    max-width: 400px;
    height: clamp(400px, 60vh, 600px);
}

3. Error Handling

function launchInlineChat() {
    try {
        if (!window.$botsplash) {
            console.error('Botsplash widget not loaded');
            return;
        }

        // Your chat launch code here

    } catch (error) {
        console.error('Error launching inline chat:', error);
        // Show fallback contact form
    }
}

Troubleshooting

Common Issues:

Chat not displaying inline
- Verify displayType: window.$botsplash.DisplayType.Inline is set
- Check that the container element exists
- Ensure widget script has loaded before calling launch functions
Container sizing issues
- Set explicit width and height on parent container
- Use CSS position: relative on container
- Avoid conflicting CSS that might affect layout
Multiple chat instances conflicting
- Use unique routingKey for each instance
- Call window.$botsplash.remove(true) before launching new instances
- Ensure different container IDs for each chat

For additional support with inline chat setup, contact Botsplash support with your specific implementation requirements.

Botsplash Inline Chat Widget Setup