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

​
Setup

  1. Generate an API key in the Mintlify dashboard
  2. 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:

PropDescription
connectionAPI connection settings (required)
displayWidget appearance and interaction settings
trackingAnalytics 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.

Was this page helpful?

VercelIntroduction