BUTLER Widget Embed Example

This page demonstrates how to embed the BUTLER chatbot widget on any website.

For Dallas County IT: Add the code below to any page where you want the chatbot to appear.

Basic Usage

<!-- Add before closing </body> tag -->
<script src="https://butler-api.dallascounty.org/widget/butler-widget.js"></script>
<script>
    BUTLER.init({
        apiUrl: 'https://butler-api.dallascounty.org'
    });
</script>

Full Configuration

<script src="https://butler-api.dallascounty.org/widget/butler-widget.js"></script>
<script>
    BUTLER.init({
        // Required: API URL
        apiUrl: 'https://butler-api.dallascounty.org',

        // Optional: Theme ('dallas-blue', 'light', 'dark')
        theme: 'dallas-blue',

        // Optional: Position ('bottom-right', 'bottom-left')
        position: 'bottom-right',

        // Optional: Custom welcome message
        welcomeMessage: 'Hello! How can I help you today?',

        // Optional: Custom placeholder text
        placeholder: 'Type your question...',

        // Optional: Custom title
        title: 'John',

        // Optional: Custom subtitle
        subtitle: 'Dallas County Clerk Virtual Assistant'
    });
</script>

JavaScript API

// Open the chat window programmatically
BUTLER.open();

// Close the chat window
BUTLER.close();

// Toggle the chat window
BUTLER.toggle();

// Get current state
const state = BUTLER.getState();
console.log(state.isOpen, state.conversationId);

// Get configuration
const config = BUTLER.getConfig();

Live Demo

Click the chat button in the bottom-right corner to test the widget.