diff --git a/advanced/widget/chat.mdx b/advanced/widget/chat.mdx index 216179a7..ec747fa4 100644 --- a/advanced/widget/chat.mdx +++ b/advanced/widget/chat.mdx @@ -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 `...` tag. - -```html - - -``` - -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 - -``` - -## 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'` | | -| -------------- | ------------------------------------------------------------ | -| | | - -| `type='button'` | `'chat'` | `'sparkles'` | `'mintlify'` | -| ---------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -| `iconOnly=false` | | | | -| `iconOnly=true` | | | | - -#### 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 \ No newline at end of file diff --git a/introduction.mdx b/introduction.mdx new file mode 100644 index 00000000..06c55169 --- /dev/null +++ b/introduction.mdx @@ -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. \ No newline at end of file diff --git a/mint.json b/mint.json index 0636b031..b6e13a7d 100644 --- a/mint.json +++ b/mint.json @@ -122,7 +122,8 @@ }, { "group": "Advanced", - "pages": [{ + "pages": [ + { "icon": "code", "group": "Custom Scripts", "pages": [ @@ -196,7 +197,10 @@ }, { "group": "SDKs", - "pages": ["integrations/sdks/speakeasy", "integrations/sdks/stainless"] + "pages": [ + "integrations/sdks/speakeasy", + "integrations/sdks/stainless" + ] }, { "group": "Support", @@ -208,7 +212,10 @@ }, { "group": "Privacy", - "pages": ["integrations/privacy/overview", "integrations/privacy/osano"] + "pages": [ + "integrations/privacy/overview", + "integrations/privacy/osano" + ] }, { "group": "Components", @@ -240,7 +247,9 @@ }, { "group": "Changelog", - "pages": ["changelog/overview"] + "pages": [ + "changelog/overview" + ] } ], "footer": { @@ -324,4 +333,4 @@ "publicApiKey": "pk_76a6caa274e800f3ceff0b2bc6b9b9d82ab8" } } -} +} \ No newline at end of file