Branding & Theming

Customize Beacon’s appearance to match your brand identity. All styles are sandboxed with the dial-beacon- CSS prefix to prevent conflicts with your site’s styles.

Branding Config


{
  "branding": {
    "name": "Acme Support",
    "accentColor": "#3b82f6",
    "logoUrl": "https://example.com/logo.png",
    "theme": {
      "accentColor": "#3b82f6",
      "backgroundColor": "#1a1a2e",
      "textColor": "#ffffff",
      "textSecondaryColor": "#a0a0b0",
      "borderColor": "#2a2a3e",
      "borderRadius": 12,
      "fontFamily": "Inter, system-ui, sans-serif"
    }
  }
}

Properties

Top-Level Branding

Property	Type	Description
`name`	string	Display name in the panel header (default: `"Support"`)
`accentColor`	string	Primary accent color (shorthand for `theme.accentColor`)
`logoUrl`	string (URL)	Logo image displayed in the panel header

Theme

Property	Type	Default	Description
`accentColor`	string	—	Primary brand color for buttons and highlights
`backgroundColor`	string	—	Panel background color
`textColor`	string	—	Primary text color
`textSecondaryColor`	string	—	Secondary/muted text color
`borderColor`	string	—	Border color for cards and dividers
`borderRadius`	number (0-24)	—	Border radius in pixels for UI elements
`fontFamily`	string	—	CSS font-family value

Placement

Control where the Beacon button appears on the page:


{
  "placement": {
    "position": "bottom-right",
    "zIndex": 9999
  }
}

Property	Type	Default	Description
`position`	`"bottom-right"` \| `"bottom-left"`	`"bottom-right"`	Corner position of the floating button
`zIndex`	number	—	Custom z-index (useful if the button overlaps other elements)

Style Isolation

All Beacon CSS classes are prefixed with dial-beacon- to prevent style collisions. The widget renders into its own root element and does not inherit styles from your page.

Examples

Light Theme


{
  "branding": {
    "name": "HelpDesk",
    "theme": {
      "accentColor": "#2563eb",
      "backgroundColor": "#ffffff",
      "textColor": "#111827",
      "textSecondaryColor": "#6b7280",
      "borderColor": "#e5e7eb",
      "borderRadius": 8
    }
  }
}

Dark Theme


{
  "branding": {
    "name": "NightOwl Support",
    "theme": {
      "accentColor": "#a855f7",
      "backgroundColor": "#0f0f23",
      "textColor": "#f0f0ff",
      "textSecondaryColor": "#8888aa",
      "borderColor": "#1e1e3a",
      "borderRadius": 16
    }
  }
}