Chat Widget

Integrate the Mintlify widget to provide AI-powered chat functionality using your docs as the knowledge base.

Setup

1. Generate an API key in the Mintlify dashboard
2. Add the widget to your site:

HTML Integration

<script>
    window.mintlifyWidgetSettings = {
        connection: {
            apiKey: 'Your API key here'
        },
    };
</script>
<script>
    (function () {
        if (!document.getElementById('mintlify-widget')) {
            var script = document.createElement('script');
            script.id = 'mintlify-widget';
            script.src = 'https://unpkg.com/@mintlify/widget@^0';
            script.onload = () => MintlifyWidget.init();
            document.head.appendChild(script);
        }
    })();
</script>

React Integration

<MintlifyWidget
    connection={{
        apiKey: 'Your API key here',
    }}
/>

Configuration

The widget accepts the following main configuration props:

Prop	Description
connection	Required. API connection settings (apiKey required)
display	Optional. Widget appearance and interaction settings
tracking	Optional. Analytics callback functions

Display Options

• Trigger Types: Choose between button or input types
• Colors: Customize primary and primaryLight colors
• Chat Settings: Configure example queries and citation behavior
• Appearance: Control dark mode and trigger appearance

For detailed configuration options and tracking callbacks, visit our GitHub repository.