Chat Widget Configuration
Configure your chat widget's appearance, behavior, and AI settings from the Dashboard. Changes apply immediately to your live widget.
Navigate to your workspace, then select the Chat tabs.
Widget Settings
Go to Chat → Widget to customize appearance.
Enable/Disable
Toggle the widget on or off for this workspace.
Theme
| Setting | Description |
|---|---|
| Mode | Light or dark theme |
| Primary Color | Main brand color for buttons and accents |
| Secondary Color | Supporting color for backgrounds |
| AI Theme | Auto-generate a theme from your primary color |
Click the color picker to choose colors, or enter hex values directly.
Appearance
| Setting | Description |
|---|---|
| Title | Header text (e.g., "Chat with us") |
| Subtitle | Secondary header text |
| Avatar | Image shown in the header |
| Trigger Icon | Custom icon for the floating button |
| Greeting Icon | Icon shown in the welcome state |
| Greeting | Welcome message text |
| Greeting Subtext | Secondary welcome text |
Upload images for avatar and icons, or leave blank for defaults.
Position
| Setting | Description |
|---|---|
| Trigger Position | Where the chat button appears (bottom-right, bottom-left, etc.) |
| Card Layout | How product/content cards are displayed |
Behavior
| Setting | Description |
|---|---|
| Prompt Style | Where suggested questions appear (inline, input area, or both) |
| Card Images | Show or hide images in product/content cards |
| Card Aspect Ratio | Image dimensions (square, landscape, wide) |
| Font | Font family for the widget |
| Font Size | Base text size |
Advanced
| Setting | Description |
|---|---|
| Custom CSS | Additional CSS for advanced styling |
/* Example: Custom header gradient */
.itf-chat-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
Embed Code
Copy the embed code to add the widget to any page:
<script
src="https://cdn.intufind.com/chat-loader.js"
data-publishable-key="if_pk_xxx"
></script>
AI Settings
Go to Chat → Settings to configure AI behavior.
Workspace Description
Help the AI understand your business:
- What it is: A brief description of your site/business
- Max length: 500 characters
- Example: "Online store selling organic skincare products. Focus on natural ingredients and sustainability."
Click Auto-detect to have the AI analyze your content and suggest a description.
Special Instructions
Provide business-specific guidance:
- What it is: Facts, corrections, and policies for the AI
- Max length: 5,000 characters
- Examples:
- "Free shipping on orders over $50"
- "We don't sell to international customers"
- "Our return policy is 30 days"
- "The founder's name is Sarah, not Sara"
Prompts
Go to Chat → Prompts to manage suggested questions.
What Are Prompts?
Prompts are suggested questions shown to users to help them get started. They appear:
- In the welcome state before any messages
- After AI responses (contextual suggestions)
Managing Prompts
| Action | Description |
|---|---|
| Create | Add a new prompt |
| Edit | Modify existing prompts |
| Delete | Remove prompts |
| Filter | Show all or initial prompts only |
| Search | Find specific prompts |
Creating a Prompt
- Click Create Prompt
- Enter the prompt text
- Toggle Initial Prompt if it should show on welcome
- Click Save
Initial vs. Contextual Prompts
| Type | When Shown |
|---|---|
| Initial | On welcome screen before conversation starts |
| Contextual | After relevant AI responses |
Preview
Changes are reflected in real-time. Visit your site to see the updated widget, or use the preview panel if available.
Saving Changes
Click Save after making changes. Settings are applied immediately to your live widget.
Next Steps
- Set Up Live Agent — Enable human handoff
- View Chat Analytics — Monitor conversations
- Widget Styling Guide — Advanced CSS customization