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

# Widget Configuration

> Complete guide to configuring your widget's design, AI behavior, and data sources

## Overview

Widget configuration is where you customize your widget's appearance, behavior, and capabilities. This comprehensive guide covers all configuration options including design customization, AI system prompts, data source connections, and deployment settings.

## Key Configuration Areas

<CardGroup cols={2}>
  <Card title="Design Customization" icon="palette">
    Customize colors, branding, and visual appearance to match your brand
  </Card>

  <Card title="AI Configuration" icon="brain">
    Set system prompts and configure AI behavior for your specific use case
  </Card>

  <Card title="Data Sources" icon="database">
    Connect knowledge bases and storage connectors for contextual responses
  </Card>

  <Card title="Deployment Settings" icon="globe">
    Configure domain restrictions and access controls for your widget
  </Card>
</CardGroup>

## Getting Started

<Steps>
  <Step title="Access Configuration">
    After creating your widget, you'll be automatically taken to the configuration section
  </Step>

  <Step title="Design Settings">
    Customize colors, branding, and visual elements to match your brand identity
  </Step>

  <Step title="AI Configuration">
    Set system prompts and configure how the AI should behave and respond
  </Step>

  <Step title="Connect Data Sources">
    Link your knowledge bases and storage connectors for enhanced responses
  </Step>
</Steps>

## Video Tutorial

<div className="relative aspect-video my-8">
  <img src="https://mintcdn.com/stepsai/bk8ntUWjoqlJB9Px/logo/light.svg?fit=max&auto=format&n=bk8ntUWjoqlJB9Px&q=85&s=a3b792588a8a597e6307250f257a3ef0" alt="Steps AI Logo" className="w-full aspect-video rounded-xl bg-white dark:bg-gray-900 object-contain p-8" width="708" height="404" data-path="logo/light.svg" />
</div>

## Design Configuration

### Primary and Secondary Colors

* **Primary Color**: Set your main brand color for buttons, highlights, and primary elements
* **Secondary Color**: Choose a complementary color for secondary elements and accents
* **Color Preview**: See real-time preview of how colors will appear in your widget

### Widget Name and Branding

* **Widget Name**: Update the display name that appears in the chat interface
* **Welcome Message**: Customize the initial greeting message users see
* **Brand Elements**: Add your logo or brand imagery if supported

## AI Configuration

#### Use Default System Prompt

* Leverage AIDE's optimized default prompts
* Suitable for general customer support and information queries
* Automatically updated with best practices

#### Custom System Prompt

* Write your own system prompt for specific use cases
* Define exactly how the AI should behave and respond
* Include specific instructions, tone, and response guidelines

<Tip>
  **Plan Your Purpose**: Define exactly what your widget will help users with and accordingly set the custom prompt
</Tip>

## Data Source Configuration

### Knowledge Base Connection

* **Select Knowledge Bases**: Choose which knowledge bases to connect
* **Content Access**: Determine what information the widget can access
* **Update Frequency**: Set how often content should be refreshed

### Storage Connectors

* **Google Drive**: Connect specific folders or documents
* **Slack**: Link relevant channels or workspaces
* **Gmail**: Connect email accounts for email-related queries
* **Other Connectors**: Add any other available data sources

### Data Source Management

* **Priority Settings**: Set importance levels for different data sources
* **Access Control**: Configure what information each source provides
* **Sync Status**: Monitor the connection status of all data sources

<Tip>
  **Start with Defaults**: Begin with default settings and customize gradually based on needs
</Tip>

## FAQ

<AccordionGroup>
  <Accordion title="Can I change the configuration after deploying?">
    Yes! You can modify any configuration settings at any time. Changes will be reflected immediately after saving.
  </Accordion>

  <Accordion title="What's the difference between default and custom system prompts?">
    Default prompts are optimized for general use cases, while custom prompts allow you to define specific behavior, tone, and instructions for your unique needs.
  </Accordion>

  <Accordion title="How many data sources can I connect?">
    You can connect multiple data sources including knowledge bases and storage connectors. There's no strict limit, but consider performance and relevance.
  </Accordion>

  <Accordion title="Can I use different configurations for different widgets?">
    Absolutely! Each widget can have its own unique configuration, allowing you to create specialized widgets for different purposes or websites.
  </Accordion>

  <Accordion title="How do I know if my data sources are properly connected?">
    The configuration interface shows the connection status of all data sources. You can also test the widget to verify it's accessing the correct information.
  </Accordion>

  <Accordion title="Can I preview my widget before deploying?">
    Yes! You can preview your widget with all current configurations to see exactly how it will appear and function before making it live.
  </Accordion>
</AccordionGroup>

## Troubleshooting

| Issue                           | Solution                                          | Prevention                                            |
| ------------------------------- | ------------------------------------------------- | ----------------------------------------------------- |
| **Colors Not Updating**         | Save changes and refresh the preview              | Ensure you're in the correct configuration section    |
| **Data Sources Not Connecting** | Check permissions and try re-authenticating       | Verify data source availability before connecting     |
| **Custom Prompt Not Working**   | Review prompt syntax and test with simple queries | Start with basic prompts and add complexity gradually |
| **Configuration Not Saving**    | Check internet connection and try again           | Complete all required fields before saving            |

## Next Steps

<CardGroup cols={1}>
  <Card title="Customize UI" icon="palette" href="/widgets/customizing-ui">
    Learn advanced techniques for customizing your widget's appearance and user interface
  </Card>
</CardGroup>