Agent Look & Feel

Customize the appearance, branding, and copywriting of your Deway chat widget.

Navigate to Agent Look & Feel in the admin sidebar. The page is organized into sections you can expand and collapse. Use the search bar at the top to quickly find any setting.

Bookmark Widget

Appearance Mode

Choose how the chat widget appears on your site:

Mode	Description
Bubble	Floating circular button, typically in the bottom corner
Bookmark	Fixed position element, like a tab on the side of the screen

Widget Position

Control where the widget appears:

Option	Description
Right	Widget on the right side of the screen (default)
Left	Widget on the left side of the screen

Anchor Selector

Optionally attach the widget to a specific DOM element instead of the viewport corner. Enter a CSS selector (e.g., #help-panel).

If the anchor element is not found on the page, the widget falls back to viewport positioning.

Agent's Name

The display name shown in the chat interface. Leave blank to use the default.

Custom Widget Icon

Upload or paste an SVG to replace the default widget icon. The page shows a live preview of your SVG.

SVG requirements:

• Must be valid SVG markup
• Inline SVG only (no external references)
• XSS protection enforced on the backend

Widget Icon Size

Control the size of the entrypoint widget icon. Range: 18–36 pixels (default: 18).

Chat Screen

Welcome Message

Field	Description
Welcome Title	Greeting headline when the chat opens (e.g., "Hi there!")
Welcome Subtitle	Supporting text below the title (e.g., "Ask me anything about our platform.")

Prompt Suggestions

Pre-defined questions shown to users to help them get started. Maximum of 4 suggestions.

Click Add Suggestion to add one. Click the remove button to delete.

Examples:

• "How do I create a new project?"
• "What are the keyboard shortcuts?"
• "How do I invite team members?"

Thinking Messages

Messages shown while the AI processes a response. If multiple are provided, they rotate.

Click Add Message to add one. Click the remove button to delete.

Examples:

• "Thinking..."
• "Looking that up..."
• "Finding the answer..."

AI Disclaimer

A message shown to users before interacting with the AI. Useful for setting expectations.

Example:

I'm an AI assistant. For complex issues, I can connect you with our support team.

Empty Chat State Icon

Upload or paste an SVG for the icon shown when the chat has no messages. Works the same as the widget icon — paste SVG code or upload a file, with live preview.

Chat Responses

Support Handoff

Configure how users are connected to human support when the AI detects a handoff trigger (from Sensitive Topics).

Field	Description
Mode	URL (redirect to a page) or Selector (click a DOM element)
Value	The URL or CSS selector depending on mode
Button Text	Custom text for the handoff button (e.g., "Contact Support")

URL mode — Redirects the user to a support page or ticketing system:

• Value: https://support.yoursite.com/contact

Selector mode — Triggers an existing support widget (e.g., Intercom, Zendesk) by clicking a DOM element:

• Value: #intercom-launcher

Theme Customization

Customize colors and typography for both light and dark modes to match your brand. Use the Light and Dark tabs to configure each mode independently.

Color Categories

Accent Colors

Primary brand colors used for buttons, links, and interactive elements.

Property	Description	Required
Base	Primary accent color	Yes (if any accent colors are set)
Hover	Color on hover state	No
Active	Color when pressed/active	No
Muted	Softer version for backgrounds	No
Subtle	Very light version for subtle highlights	No

Surface Colors

Background colors for the chat interface.

Property	Description	Required
Base	Main background color	Yes (if any surface colors are set)
Elevated	Slightly elevated elements (cards, popups)	No
Secondary	Secondary background areas	No
Tertiary	Third-level backgrounds	No
Inset	Inset/recessed areas	No

Text Colors

Colors for text content at different hierarchy levels.

Property	Description	Required
Primary	Main text color	Yes (if any text colors are set)
Secondary	Less prominent text	No
Tertiary	Subtle text (placeholders, hints)	No
Disabled	Disabled/inactive text	No

Border Colors

Colors for borders and dividers. All optional.

Property	Description
Subtle	Very light borders
Light	Light borders
Medium	Standard borders
Strong	Prominent borders

Syncing Colors Between Modes

Each color input has a Sync to light/dark button that copies the current value to the opposite mode. Useful when you want the same accent color in both modes.

Typography

Customize font families for the chat interface. Deway validates fonts against Google Fonts — you'll see a green checkmark if the font is found.

Field	Description
Base Font Family	Google Font name (e.g., "Inter", "Roboto")
Base Font Stack	Full font stack with fallbacks (e.g., "Inter, system-ui, sans-serif")
Monospace Font Family	Google Font for code/technical content (e.g., "JetBrains Mono")
Monospace Font Stack	Full mono font stack (e.g., "JetBrains Mono, monospace")

Reset Theme

Click Reset Theme to clear all color and typography customizations and revert to defaults.

Copy to Another Project

If your tenant has multiple projects, you can copy the entire Look & Feel configuration to another project:

1. Click Copy to another Project in the header
2. Select the target project
3. Confirm the overwrite

This replaces all Look & Feel settings in the target project.

Developer Settings

These settings are available via the SDK configuration API:

Development Mode

Enable verbose logging for debugging.

{
  "is_development": true
}

Auto-Show

Automatically show the chat widget when the page loads.

{
  "auto_show": true
}

Vendor Exclusion

Block specific vendor identifiers from triggering the widget.

{
  "excluded_vendors": ["googlebot", "bingbot"]
}

Next Steps

• Agent Training — Configure sensitive topic handling
• Knowledge Base — Manage documentation sources