Skip to content

Add new overview page explaining Mintlify functionality #389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Add new overview page explaining Mintlify functionality #389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 1 addition & 119 deletions advanced/widget/chat.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1 @@
---
title: "Chat Widget"
---

Integrate the Mintlify widget into your products to offer users quick access to AI-powered chat with your docs content as the knowledge base.

![widget](https://mintlify-assets.b-cdn.net/widget/hero.webp)

## Getting started

First, generate an API key in [the Mintlify dashboard](https://dashboard.mintlify.com/chat/widget-auth).

![widget](https://mintlify-assets.b-cdn.net/widget/key.webp)

## Installation

Add the widget by adding these script tags into your site's `<head>...<head/>` tag.

```html
<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>
```

To use the widget in React and Next.js apps, use the React component from the `@mintlify/widget-react` [package](https://www.npmjs.com/package/@mintlify/widget-react). Here is a basic example of how to use the component in your React application:

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

## Usage

In the first script tag or the React component props, you can customize the appearance and other settings of the widget. `mintlifyWidgetSettings` accepts the following props:

| Prop | Type | Description |
| ------------ | ------------------------------------------------------------------- | ---------------------------------------------------------- |
| `connection` | [MintlifyWidgetConnectionProps](#mintlifywidgetconnectionProps) | Information needed to connect to our API. Required. |
| `display?` | [MintlifyWidgetDisplayProps](#mintlifywidgetdisplayProps) | Configurations for the widget appearance and interactions. |
| `tracking?` | [MintlifyWidgetTrackingFunctions](#mintlifywidgettrackingfunctions) | Callback functions for tracking analytics. |

### MintlifyWidgetConnectionProps

| Prop | Type | Description |
| -------- | -------- | ----------------------------------------------------------- |
| `apiKey` | `string` | Widget API key generated from Mintlify dashboard. Required. |
| `url?` | `string` | Used for internal testing only |

### MintlifyWidgetDisplayProps

| Prop | Type | Description |
| ------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------- |
| `trigger?` | [MintlifyWidgetDisplayTriggerProps](#mintlifywidgetdisplaytriggerprops) | Appearance of the trigger. |
| `colors?` | [MintlifyWidgetDisplayColorsProps](#mintlifywidgetdisplaycolorsprops) | Colors used across the widget. |
| `chat?` | [MintlifyWidgetDisplayChatProps](#mintlifywidgetdisplaychatprops) | Configs specific to AI chat. |
| `isDarkMode?` | `boolean` | Controlled dark mode appearance. Defaults to OS preference. |

#### MintlifyWidgetDisplayTriggerProps

| Prop | Type | Description |
| ------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| `type?` | `'button'`\|`'input'` | Type of the trigger to display. Defaults to `button`. |
| `label?` | `string` | Label displayed in the trigger. Defaults to `Get help` for the button trigger and `Ask anything...` for the input trigger. |
| `buttonIcon?` | `'chat'`\|`'sparkles'`\|`'mintlify'` | Icon used in the trigger. Only available for the `button` trigger. Defaults to `chat`. |
| `iconOnly?` | `boolean` | Only show icon in the trigger or not. Defaults to `false`. |

Here is an overview of what the trigger looks like with different configurations.

| `type='input'` | |
| -------------- | ------------------------------------------------------------ |
| | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/input.png"/> |

| `type='button'` | `'chat'` | `'sparkles'` | `'mintlify'` |
| ---------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| `iconOnly=false` | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-chat.png"/> | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-sparkles.png"/> | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-mintlify.png"/> |
| `iconOnly=true` | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-chat-iconOnly.png"/> | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-sparkles-iconOnly.png"/> | <img style={{height:'80px'}} src="https://mintlify-assets.b-cdn.net/widget/button-mintlify-iconOnly.png"/> |

#### MintlifyWidgetDisplayColorsProps

| Prop | Type | Description |
| --------------- | -------- | -------------------------------------------------------- |
| `primary?` | `string` | Primary color used in the widget. Defaults to `#0D9373`. |
| `primaryLight?` | `string` | Primary color in dark mode. Defaults to `#55D799`. |

#### MintlifyWidgetDisplayChatProps

| Prop | Type | Description |
| ------------------------ | ---------- | ------------------------------------------------------------------ |
| `openCitationInSameTab?` | `boolean` | Open the citation url in the same tab or not. Defaults to `false`. |
| `exampleQueries?` | `string[]` | Example queries to prompt the user to ask. Defaults to `[]`. |

### MintlifyWidgetTrackingFunctions

| Prop | Type | Description |
| --------------------- | ------------------------------------------ | -------------------------------------------------- |
| `trackChatEnter` | `()=> void` | Triggered when the user opens the chat widget. |
| `trackCitationClick` | `(title: string, url: string)=> void` | Triggered when the user clicks on a citation. |
| `trackChatThumbsUp` | `(query: string, response: string)=> void` | Triggered when the user thumbs up on a response. |
| `trackChatThumbsDown` | `(query: string, response: string)=> void` | Triggered when the user thumbs down on a response. |
| `trackChatFollowup` | `(query: string)=> void` | Triggered when the user asks a question. |
| `trackChatClose` | `(queriesCount: number)=> void` | Triggered when the user exits the chat widget. |
null
38 changes: 38 additions & 0 deletions introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Introduction to Mintlify

Mintlify is a modern documentation platform that helps teams create beautiful, user-friendly, and maintainable documentation sites with ease. It transforms your markdown and MDX files into a polished documentation website, complete with powerful features and customization options.

## What Mintlify Does

### Simple Documentation Creation
- Write documentation in Markdown or MDX
- Automatic conversion to a beautiful, responsive website
- Support for rich content including code blocks, images, and interactive components

### Developer-Friendly Features
- Version control integration
- API documentation support
- Code syntax highlighting
- Interactive API playgrounds

### Customization and Branding
- Customizable themes and layouts
- Brand color integration
- Flexible navigation structure
- Custom components and widgets

### Collaboration and Deployment
- Easy team collaboration
- Continuous deployment
- Automatic updates
- Search functionality

## Getting Started

To begin using Mintlify, you can:
1. Initialize your documentation project
2. Write your content in Markdown/MDX
3. Configure your settings
4. Deploy your documentation

For detailed setup instructions, check out our [Quick Start](/quickstart) guide.
19 changes: 14 additions & 5 deletions mint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,8 @@
},
{
"group": "Advanced",
"pages": [{
"pages": [
{
"icon": "code",
"group": "Custom Scripts",
"pages": [
Expand Down Expand Up @@ -196,7 +197,10 @@
},
{
"group": "SDKs",
"pages": ["integrations/sdks/speakeasy", "integrations/sdks/stainless"]
"pages": [
"integrations/sdks/speakeasy",
"integrations/sdks/stainless"
]
},
{
"group": "Support",
Expand All @@ -208,7 +212,10 @@
},
{
"group": "Privacy",
"pages": ["integrations/privacy/overview", "integrations/privacy/osano"]
"pages": [
"integrations/privacy/overview",
"integrations/privacy/osano"
]
},
{
"group": "Components",
Expand Down Expand Up @@ -240,7 +247,9 @@
},
{
"group": "Changelog",
"pages": ["changelog/overview"]
"pages": [
"changelog/overview"
]
}
],
"footer": {
Expand Down Expand Up @@ -324,4 +333,4 @@
"publicApiKey": "pk_76a6caa274e800f3ceff0b2bc6b9b9d82ab8"
}
}
}
}