> ## Documentation Index
> Fetch the complete documentation index at: https://docs.world.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Sage Support

[Sage](https://worldcoin.org/ecosystem/app_5dee2f19cd6eef599eb6ab275a0a7523) is an AI chatbot that lets users ask questions and get answers.

Sage Support enables developers to integrate Sage chats seamlessly into their World Mini Apps. Developers get a white label version of Sage that acts as a support assistant for their Mini App using the context they give it.

## Key Features

* **Seamless Integration**: Easily embed Sage chats within any World Mini App.
* **Custom Context Parameters**: Tailor Sage's responses based on Mini App specific data.
* **Logs and Analytics**: Track and understand what types of questions your users are asking.

<div className="flex gap-4 justify-center">
  <img src="https://mintcdn.com/tfh/vNgKkjbn9HQ46Vw7/images/docs/mini-apps/quick-actions/sage1-qa.png?fit=max&auto=format&n=vNgKkjbn9HQ46Vw7&q=85&s=3634464b6081573f98f5a263c0543178" alt="Sage Developer Dashboard Analytics" className="block" width="300" data-path="images/docs/mini-apps/quick-actions/sage1-qa.png" />

  <img src="https://mintcdn.com/tfh/vNgKkjbn9HQ46Vw7/images/docs/mini-apps/quick-actions/sage2-qa.png?fit=max&auto=format&n=vNgKkjbn9HQ46Vw7&q=85&s=c0a24d088da8ccb817b7c9489b693d76" alt="Sage Developer Dashboard Settings" className="block" width="300" data-path="images/docs/mini-apps/quick-actions/sage2-qa.png" />
</div>

***

## Getting Started

### 1. Create a Sage Developer project

Go to the [Sage Developer dashboard](https://dev-dashboard-gamma.vercel.app) and sign in. Create a new project.

### 2. Customizing Sage to fit your app

With a project created, head over to the project's settings, this page is accessible by going into: **Apps > Your App > Settings**. (Navigation is available through the menu bar on the top right or the top left breadcrumbs)

In this page you can find parameters to fine tune Sage to best interact with your users in the context of your app, a comprehensive description of these parameters is present [below](#app-settings).

### 3. Integrating Sage Support in your app

The final step to integrating Sage Support into your React application is to install and make use of the `SageSupport` component.

Add the npm package with the command:

```bash theme={null}
npm install sage-support
```

Once the dependency installed, the simplest way to integrate Sage Support is:

```tsx theme={null}
import { SageSupport } from "sage-support";

<SageSupport projectId={YOUR_APP_ID} />;
```

Where `YOUR_APP_ID` is the App ID (number) you can find in the [Sage Developer Dashboard](https://dev-dashboard-gamma.vercel.app) (top right).

More configuration options for the component are available [below](#sagesupport-component).

### 4. Sage Support Link

Generate your app's Support Link using the [Support Link wizard](#support-link-generator) and use it as the Support URL under **Worldcoin Developer > Mini App > Configuration > App Store > Support > Link**.

### Analytics

Once you've started using Sage Support in your Mini App, analytics are also available in the [Sage Developer Dashboard](https://dev-dashboard-gamma.vercel.app), allowing you to identify the usage of Sage Support in your app and understand how users are using it. You can find more information about analytics [below](#app-analytics).

<Note>
  This is all you need to get Sage Support working. If you wish to customize it
  further, or better understand the various parameters continue reading below.
</Note>

***

## App Settings

Located at **Apps > Your App > Settings**, the Settings page allows you to fine tune the Sage Support assistant to meet the needs and context of your Mini App.

### `App Name`

This name only lives in the [Sage Developer dashboard](https://dev-dashboard-gamma.vercel.app) universe and serves the purpose of differentiating between multiple Sage Support integrations, it's recommended that this field is set accordingly.

### `App ID`

Uniquely identifies your Sage Developer App and is used to link your `SageSupport` component to the [Sage Developer dashboard](https://dev-dashboard-gamma.vercel.app). This field is automatically generated and cannot be changed.

### `Introduction Message`

Defines the first message to be sent by the Sage assistant once a new chat is created/open by a user. This field is also capable of encompassing a custom variable (`%USER%`) which Sage will replace by the user's username.

### `App Description`

Provide a solid description about your app and what it focuses on, this field is processed by Sage as an additional context parameter, and is useful to keep the assistant behavior and subject within the landscape of your Mini App.

***

## App Analytics

Located at **Apps > Your App > Analytics**, the Analytics page allows you to view statistics and analytic data about the usage of Sage Support within your Mini App.

### `Messages`

See how many messages were sent to Sage Support chats from your Mini App in each of the last 7 days.

### `Users`

See how many users interacted with Sage Support chats from your Mini App in each of the last 7 days.

### `Keywords`

Currently not available.

### `Next Step`

Currently not available.

### `Logs`

See how users chat with Sage Support inside your app, this data is shown anonymously and provides the developer with a more in-depth tool to explore the interactions between users and Sage Support.

***

## `SageSupport` Component

### Installation

To use the Sage Support React component you must first install it using npm (or your package manager of choice).

```bash theme={null}
npm install sage-support
```

### Basic Usage

From the get go you can use Sage Support by using the basic implementation, the only mandatory parameter to be passed to the component is the `projectId`. This ID (App ID) is retrieve from the Settings page in the [Sage Developer dashboard](https://dev-dashboard-gamma.vercel.app).

```tsx theme={null}
import { SageSupport } from "sage-support";

<SageSupport projectId={YOUR_APP_ID} />;
```

### Props & Personalisation

Other props allow you to customize both the aesthetic and behavior of the Sage Support Chat.

<ParamField path="projectId" type="number" required>
  Links your component to your Sage Developer project, used for analytics and
  behavior.
</ParamField>

<ParamField path="returnURI" type="string">
  Allows you to make use of the return button on the top left of the Sage
  Support chat window. The value to be passed to this prop is a [quick action
  URL](https://docs.world.org/mini-apps/sharing/quick-actions).
</ParamField>

<ParamField path="className" type="string">
  Allows you to pass custom CSS classes to affect the fallback default button.
</ParamField>

<ParamField path="children" type="React.ReactNode">
  Allows you to pass a custom React element to replace the default button.
</ParamField>

***

## Support Link

You can also integrate Sage Support directly into your World Mini App by using a Support Link. This allows your users to access Sage's AI-powered support without requiring you to install any additional packages or components.

The Support Link is a quick action URL that opens the Sage Support chat interface directly within the World App. When users click on this link, they'll be able to ask questions and get support related to your Mini App.

This link is particularly useful for developers to use Sage as their Mini App's native Support link, available under **Worldcoin Developer > Mini App > Configuration > App Store > Support > Link**

### Base URL & Parameters

The base URL to access a support chat is:

`https://worldcoin.org/mini-app?app_id=app_5dee2f19cd6eef599eb6ab275a0a7523&path=/support-chat`

This support link, akin to the [`SageSupport` component](#sagesupport-component), accepts and requires some parameters to be passed, in this case URL Query Parameters, for the Support Chat to work like expected.

<ParamField path="devProjectId" type="number" required>
  Links your Support Link to your Sage Developer project, used for analytics and behavior.
</ParamField>

<ParamField path="devReturnURI" type="string">
  Allows you to make use of the return button on the top left of the Sage Support chat window by passing a Mini App quick action URI/URL. Due to some encoding functionalities and implementation caveats, the value to be passed to this parameter has to be formatted accordingly beforehand:

  1. The URL must be submitted to a [UTF-8 encoding](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent).

  2. All ampersand characters (such as the one in `&path`) have to be replaced with the sequence `(amps)`.

  To make this process easier, you can make use of the generator below or inside the [Sage Developer Dashboard](https://dev-dashboard-gamma.vercel.app). Any URIs outside of the `worldcoin.org/mini-app` space are not allowed.
</ParamField>

### Support Link Generator

<Note>
  The Support Link Generator component would be inserted here in the actual
  implementation.
</Note>