Chat Widget - Mintlify

Integrate the Mintlify chat widget into your products to provide AI-powered search through your documentation.

Setup

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

HTML Sites

Add to your site’s <head> tag:

<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/Next.js

Install and use the widget component:

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

Configuration

The widget can be customized using the following props:

Prop	Description
`connection`	API connection settings (required)
`display`	Widget appearance and interaction settings
`tracking`	Analytics tracking callbacks

Display Options

Trigger Types: Choose between button or input display
Colors: Customize primary colors for light/dark modes
Chat Settings: Configure example queries and citation behavior

For detailed configuration options, visit our API Reference.