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

# Widget Customization

> Customize widget appearance, positioning, and branding

## name

* **Type**: `string`
* **Description**: Custom name shown in the widget header
* **Example**: `"Shop Assistant"`, `"Support Bot"`, `"Tour Guide"`

## panelConfig

* **Type**: `object`
* **Description**: Configure the expanded panel appearance

```javascript theme={null}
panelConfig: {
  title: string,       // Title in expanded panel
  description: string, // Description text
  expanded: boolean    // Start with panel expanded
}
```

## position

* **Type**: `object`
* **Description**: Configure widget positioning on the page

```javascript theme={null}
position: {
  alignment: string,  // Position preset
  margin: number,     // Distance from edges (px)
  offsetX: number,    // Horizontal offset (px)
  offsetY: number     // Vertical offset (px)
}
```

**Available alignments:**

* Top: `"top-left"`, `"top-center"`, `"top-right"`
* Middle: `"center-left"`, `"center"`, `"center-right"`
* Bottom: `"bottom-left"`, `"bottom-center"`, `"bottom-right"`

## Customization Examples

### E-commerce Assistant

```javascript theme={null}
initUnifiedWidget({
  agentConfigId: "your-agent-id",
  agentKey: "your-agent-key",
  name: "Shop Assistant",
  panelConfig: {
    title: "Need Help Shopping?",
    description: "I can help you find products, compare prices, and guide you through checkout.",
    expanded: false
  },
  position: {
    alignment: "bottom-right",
    margin: 40
  }
});
```

### Customer Support

```javascript theme={null}
initUnifiedWidget({
  agentConfigId: "your-agent-id",
  agentKey: "your-agent-key",
  name: "Support Bot",
  panelConfig: {
    title: "How Can We Help?",
    description: "I'm here to help with any questions about your account or orders.",
    expanded: true // Start open
  }
});
```

### Product Tour Guide

```javascript theme={null}
initUnifiedWidget({
  agentConfigId: "your-agent-id",
  agentKey: "your-agent-key",
  name: "Tour Guide",
  panelConfig: {
    title: "Welcome to Our Platform",
    description: "I can walk you through our features, show you how to get started, and answer any questions.",
    expanded: false
  },
  position: {
    alignment: "center",
    offsetY: -50
  }
});
```

## Best Practices

1. **Keep it Concise**: Short, clear titles and descriptions work best
2. **Be Specific**: Tailor the messaging to your specific use case
3. **Include Call-to-Action**: Encourage users to interact with the assistant
4. **Match Your Brand**: Use consistent naming and tone with your brand
5. **Test Different Messages**: A/B test different titles and descriptions to see what resonates with users