# How to customize your app

{% embed url="<https://youtu.be/kCad4Pi6ntY?si=up8axkK-Yc339_7w>" %}
Quick 'How-to' video with steps to customize your app
{% endembed %}

Below is a step-by-step guide on how to set up and customize your app for optimal user interaction.

### **1. App overview** <a href="#id-1.-app-overview" id="id-1.-app-overview"></a>

The app overview section displays the public link to your ZBrain app, provides the embed script for website integration, and shows a live preview of the chat interface. It allows users to manage basic settings like user info collection and provides quick navigation to configuration and performance sections.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FGQL15EBspBEtHvbqPu3h%2Fimage.png?alt=media&#x26;token=f147bca4-ca02-459d-a456-7364f9b698a5" alt=""><figcaption></figcaption></figure>

#### **Sharing your app** <a href="#sharing-your-app" id="sharing-your-app"></a>

Once created, you'll find a link to your app on the overview page. Share this link with others to grant access to your app outside of the platform.

#### **Adding a conversational widget to your website** <a href="#adding-a-conversational-widget-to-your-website" id="adding-a-conversational-widget-to-your-website"></a>

Users can integrate a conversational widget into their website by pasting the provided code into the head section. This widget will appear at the bottom right corner of the page, allowing users to engage with the bot.

#### **Collecting user information** <a href="#collecting-user-information" id="collecting-user-information"></a>

Toggle the ‘Collect User Info’ option to prompt users to provide information when interacting with the bot. Users can specify the type of information to collect and provide a title for the user information form. After toggling, click ‘Save’ to apply the changes.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FuyEXtSR2ZQnLOZ6rRL1S%2Fimage.png?alt=media&#x26;token=29357d1f-2d55-4de2-ba91-4b5f2ef0eaa8" alt="" width="533"><figcaption></figcaption></figure>

#### **Editing appearance** <a href="#editing-appearance" id="editing-appearance"></a>

Click on the 'Edit your appearance' button to access the appearance tab, where you can configure your bot's welcome message, app name, description, sample questions, logo, theme, and bot name. The preview panel on the right displays how your chatbot will appear to users in real-time. After making your desired changes, click 'Save and update preview' to apply all modifications.

### **2. Configuring your bot** <a href="#id-2.-configuring-your-bot" id="id-2.-configuring-your-bot"></a>

Navigate to the ‘Configure your bot’ tab to access customization options that tailor the bot’s behavior and interface to your specific needs.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FLoJQkdC1fKFhSVYBLGn4%2Fimage.png?alt=media&#x26;token=4973adca-1df3-46f1-a70f-b711c78f425c" alt=""><figcaption></figcaption></figure>

#### **Orchestration method** <a href="#orchestration-method" id="orchestration-method"></a>

* **Modify your orchestration method**: You can modify the existing orchestration method as part of the customization process.
  * **Adding resources**\
    **For knowledge base**: Include relevant knowledge bases your bot will refer to for information. Additionally, select the schema to structure the knowledge base for optimal retrieval and presentation of information.\
    **For Flow**: If opting for Flow, integrate the necessary predefined Flow that your bot will follow during interactions to ensure smooth and guided user experiences.

**Note:** *Knowledge Base orchestration requires configuring system instructions, adjusting bot settings, and adding golden questions for evaluation, while Flow orchestration only requires adding golden questions since conversation paths are predefined.*

#### **Edit the existing instructions** <a href="#edit-the-existing-instructions" id="edit-the-existing-instructions"></a>

Provide specific instructions or guidelines that the bot should follow during user interactions.

1. Click ‘Generate’ to create instructions by entering the details you want to update, then click ‘Create’ to finalize them.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FsYGa4H9Mk4mMoaJuvHOo%2Fimage.png?alt=media&#x26;token=bf1af466-fa5a-4a14-bf9f-91da37d4f7c9" alt=""><figcaption></figcaption></figure>

2. Alternatively, click Library to manually create a new prompt or generate one automatically. Click ‘Save’ to store your prompt for future use, then click ‘Use’ to apply the saved prompt in the app.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FgOWFv8kPqKx00b2gDD02%2Fimage.png?alt=media&#x26;token=e7212091-baa1-4509-85bc-57f8a1ef3540" alt=""><figcaption></figcaption></figure>

3. To add a prompt from the Prompt Library, search for a template and select the desired prompt.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2F2thRfJHE8wtD3Iqyve9k%2Fimage.png?alt=media&#x26;token=c5c760ee-3f6b-4e5e-88aa-965592d1fb62" alt=""><figcaption></figcaption></figure>

#### **Evaluate bot settings** <a href="#evaluate-bot-settings" id="evaluate-bot-settings"></a>

Define golden questions and responses to effectively assess and enhance your bot's performance.

1. Enter the question and corresponding answer in the provided fields.
2. Click ‘Add’ to include more golden questions for evaluation.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FAKJhBzlndvndz5Iaxu5f%2Fimage.png?alt=media&#x26;token=7ab8bf1a-b82c-4059-b83c-31b06b1941b0" alt=""><figcaption></figcaption></figure>

#### **Bot settings** <a href="#bot-settings" id="bot-settings"></a>

View and manage the current configurations of your bot, including model selection, response customization, and optimization settings.

**Current settings**

Check key parameters under bot settings, including model name, temperature, and content max token. For parameter details, refer Customizing application settings and parameters section of the documentation - [How to create a new app](https://docs.zbrain.ai/zbrain-documentation/zbrain-builder/app/how-to-create-a-new-app/how-to-leverage-knowledge-base-s-for-app-creation)

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2F0ucy3pxe6DvosDkcXsy4%2Fimage.png?alt=media&#x26;token=ba504d60-2c89-49f7-b47e-f74be4a169d6" alt=""><figcaption></figcaption></figure>

Click ‘View All Settings’ to access additional parameters.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2Frlm7YIDnd5nNpcPqJq2Q%2Fimage.png?alt=media&#x26;token=cfd23885-c6d1-4ad6-ba6c-c153a10977ba" alt="" width="428"><figcaption></figcaption></figure>

**Editing model parameters**

1. Click the pencil icon to edit settings.
2. Select the preferred AI model.
3. Adjust parameters using the provided controls.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FTBB0LPEHo0V81uNgw2lf%2Fimage.png?alt=media&#x26;token=e351e12b-bc2d-452f-a12e-ac327e07add2" alt=""><figcaption></figcaption></figure>

4. Use sliders to configure the model parameters.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FzUTTTKf8wJmlYEuwkj38%2Fimage.png?alt=media&#x26;token=866a54a7-a94e-4630-a75c-6aabf6e71a39" alt=""><figcaption></figcaption></figure>

5. Enable or disable features as needed.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FdJj5IFkOf9P7FMuua57K%2Fimage.png?alt=media&#x26;token=8d13843b-26e4-41a9-8674-f0ad8cf51fa7" alt=""><figcaption></figcaption></figure>

**Saving and reverting settings**

* **Update settings** – Click to save your customized configurations.
* **Default settings** – Click to revert to the original system configurations.

**Manual and auto configuration**

* **Manual configuration:** To make advanced changes, click the ‘Edit’ button in the Manual Configure box. (This option is for advanced users only.)
  * After creating an App, users can return to the Guardrail section and change the selected evaluation model (e.g., from Clade to Gemini or Groq) through manual configuration.
  * Click 'Edit,' and a panel titled 'Edit Bot Settings' will appear on the right side.
  * The model dropdown reflects the current selection and allows editing. Choose the model from the dropdown and click 'Update Settings'.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FR8YJHn39GLYjEizJYT5P%2F38621b67-cb59-47d8-820a-030b7a710f5b.png?alt=media&#x26;token=e6d03bd4-e7fb-4e19-af80-f43b98ae9bfe" alt=""><figcaption></figcaption></figure>

* Once updated and saved, the newly selected model is used for all Guardrail evaluations moving forward.
* **Auto configuration:** Click ‘Start’ to let the system automatically optimize settings for your app. This process takes 10-15 minutes, and you can track configuration accuracy under ‘Bot Performance.’

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FNnnHNJnoIvw66HoIdVWN%2Fimage.png?alt=media&#x26;token=fa3a611b-2f5b-4d05-a463-7d1909967450" alt=""><figcaption></figcaption></figure>

After completing all the necessary adjustments and configurations, click the ‘Save’ button to apply and save your settings.

### **3. Bot performance** <a href="#id-3.-bot-performance" id="id-3.-bot-performance"></a>

* After configuring the bot, click ‘Test Bot Performance’ to check the bot's performance report.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FGvOykpE8NFquQwD8mFyn%2Fimage.png?alt=media&#x26;token=387f5188-97be-4733-818a-54148242c446" alt=""><figcaption></figcaption></figure>

After initiating the test, you can review the performance report generated from the test. Detailed report includes:

* **Accuracy of each answer**: See the accuracy score for each individual question, including the ZBrain answer and the correct answer provided by you.
* **Default settings in use**: View the current settings used during the test.
* **Current version**: Identify the version of the bot configuration used for the test.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FkSY3j87236T0um9hXWX8%2Fimage.png?alt=media&#x26;token=b325054a-fd29-4387-98db-cfecca0ebd63" alt=""><figcaption></figcaption></figure>

* If needed, you can adjust the accuracy by clicking the ‘+’ button in the accuracy column. This will make the ‘Edit’ button appear, allowing you to make changes.
* Click the ‘Update’ button to adjust and save the accuracy.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FYO0xXNW16lSrJiCI1WqW%2Fimage.png?alt=media&#x26;token=5e26e544-a3f0-4d85-bd2b-b23af2c47c14" alt=""><figcaption></figcaption></figure>

* To delete a specific version, click the ‘Delete this Version’ button in the version settings to remove it from the list.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FT4Wf5Yzmi6NbBBzXsIIN%2Fimage.png?alt=media&#x26;token=0b09401f-d6ef-4454-bc17-2df73b61e390" alt=""><figcaption></figcaption></figure>

* Click the download icon to save the bot performance report.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FPZrCLSxwjf2E8wkYlwWj%2Fimage.png?alt=media&#x26;token=c6253812-960a-405d-bbe4-67920f53e871" alt=""><figcaption></figcaption></figure>

### 4. Query history <a href="#id-4.-query-history" id="id-4.-query-history"></a>

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FrEZITVi1g4gsCEDHtKRh%2Fimage.png?alt=media&#x26;token=882de833-a9f3-47ad-8994-fbb265395e2b" alt=""><figcaption></figcaption></figure>

The ‘Query History’ tab provides valuable insights into the interactions users have had with your bot. Here's how you can leverage this feature:

* Navigate to the ‘Query History’ tab on your dashboard.
* On the ‘Query History’ page, you will find the following information:
  * **Session IDs**: Each interaction session with the bot is assigned a unique session ID, allowing for easy tracking and reference.
  * **User information**: Users' names and email addresses associated with each session are displayed, providing context for the queries.
  * **Prompt count**: The number of prompts or interactions within each session is recorded, giving an indication of user engagement and interaction depth.
  * **Session time**: The duration of each session is logged, helping to analyze the duration of user engagements and overall bot usage patterns.

#### **Viewing session details** <a href="#viewing-session-details" id="viewing-session-details"></a>

Click on any session to explore the full conversation history. In the session view, you'll find:

* The session name displayed prominently at the top
* User information (if enabled in the “Collect User Info” settings)
* A complete session timeline with timestamps
* Sorting options: Newest first or Oldest first

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FpGDAGKQR1OJ0LG5ZGnMf%2Fimage.png?alt=media&#x26;token=f086e518-2151-4fbe-b2da-c1afee738f00" alt=""><figcaption></figcaption></figure>

#### **Reviewing bot responses** <a href="#reviewing-bot-responses" id="reviewing-bot-responses"></a>

Each bot response in the conversation includes several action options:

* **Copy output**: Quickly copy the response for reference
* **View conversation log**: Access a detailed breakdown of the exchange
* **Edit annotation reply**: Modify the bot’s response for accuracy
* **Provide feedback**: Use the thumbs-down icon to flag issues

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2F1frqdTrgW2Jc07HcChXv%2Fimage.png?alt=media&#x26;token=085baf1c-b88c-4690-b677-2f5cea353cc7" alt=""><figcaption></figcaption></figure>

#### **Conversation log features** <a href="#conversation-log-features" id="conversation-log-features"></a>

Clicking ‘Conversation log’ opens two key tabs:

**1. Overview tab**

Get a high-level summary of the interaction:

* Conversation status
* Total elapsed time
* Tokens used (input and output)
* Input query and bot response
* Metadata including:
  * Model used
  * Temperature settings
  * Input/output token count
  * Number of chunks retrieved
  * Applied instructions
* Click the ‘Monitor’ button to actively monitor your app

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2Fw02l6VfpUxgsGCiiRHoO%2Fimage.png?alt=media&#x26;token=61d04d20-905a-47af-8a6f-6b5fed5a54a1" alt=""><figcaption></figcaption></figure>

**2. Context tab**

Dive deeper into the information behind the response:

* View all referenced chunks
* Matching scores for each chunk
* Click individual chunks to view full details

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2Fe0C5Fo5zss4h6b370tkE%2Fimage.png?alt=media&#x26;token=50f676d9-eab3-4242-b635-2b0328cd6a00" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FHzpdalJMvPAuH3J5Yprl%2Fimage.png?alt=media&#x26;token=8acc6025-1624-41de-b970-76c94782bba3" alt=""><figcaption></figcaption></figure>

#### **Editing annotations** <a href="#editing-annotations" id="editing-annotations"></a>

To improve or correct a bot response:

1. Scroll to the feedback section beneath the query and response
2. Click the pencil icon
3. Enter your corrected version of the response
4. Click ‘Save’ to update the annotation

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2Fr1h0WQeaY24xbyczKA6S%2Fimage.png?alt=media&#x26;token=98946a27-a0bb-402a-9db7-abfe9d1abdab" alt=""><figcaption></figcaption></figure>

This comprehensive view of user interactions allows you to understand how users engage with your bot, identify common questions, analyze response quality, and continuously improve your bot's performance through annotation and feedback.
