Widget Customization

Customize the Keva widget to match your brand and configure its behavior through the dashboard settings.

Branding Options

Configure these options in Settings > Widget in your Keva dashboard.

Primary Color

Set the primary color used for the launcher button, header, and outbound message bubbles. Use any valid CSS color value.

#3b82f6    (default blue)
#10b981    (green)
#8b5cf6    (purple)
rgb(239, 68, 68)

Greeting Message

The text displayed in the widget header when opened.

Default: "Hi there! How can we help?"

Input Placeholder

The placeholder text shown in the message input field.

Default: "Type a message..."

Pre-Chat Fields

Configure custom fields to collect information before starting a conversation.

Available Field Types

Type	Description
`text`	Single-line text input
`email`	Email input with validation
`select`	Dropdown with predefined options
`textarea`	Multi-line text input

Example Configuration

Configure pre-chat fields in the widget settings:

[
  {
    "id": "department",
    "label": "Department",
    "type": "select",
    "required": true,
    "options": ["Sales", "Support", "Billing"]
  },
  {
    "id": "order_number",
    "label": "Order Number",
    "type": "text",
    "required": false,
    "placeholder": "e.g., ORD-12345"
  }
]

Custom field values are attached to the ticket and visible in the Keva dashboard.

File Uploads

Enable or disable file attachments in Settings > Widget.

Configuration Options

Option	Default	Description
File uploads enabled	true	Allow customers to attach files
Max file size	5MB	Maximum size per file
Allowed types	images, pdf, doc, txt, csv	Accepted file formats

Supported File Types

Images: png, jpg, gif, webp
Documents: pdf, doc, docx
Data: txt, csv

Position and Layout

The widget position is fixed to ensure consistent user experience:

Launcher: Bottom-right corner, 20px from edges
Panel: Opens above the launcher, 380px wide

Mobile Responsiveness

On screens under 420px wide:

Panel width adjusts to calc(100vw - 24px)
Panel positioned 12px from right edge
Maximum height: 70vh

Shadow DOM Isolation

The widget uses Shadow DOM to encapsulate styles. This means:

Widget styles won't affect your site
Your site styles won't affect the widget
No CSS conflicts or overrides needed

Localization

The widget automatically detects the user's browser language. Currently supported:

English (en) - Default
Spanish (es)
French (fr)
German (de)
Portuguese (pt)

Contact support to request additional languages.

Advanced: CSS Variables

For enterprise customers, custom CSS injection is available. Contact support for access to:

Custom fonts
Border radius adjustments
Shadow modifications
Animation timing