Configuration

Beacon configuration determines how the widget looks, what actions are available, and how it behaves. Configuration is managed in the Beacon Console and delivered to the widget at runtime.

How Config Works

You create and publish a config version in the Beacon Console
When Beacon loads on your site, it fetches the config from api.dial.wtf/v1/beacon/config
The config is validated against a Zod schema and defaults are applied
The widget renders based on the resolved config

Configs are versioned — you can publish new versions and rollback to previous ones from the Console.

Config Modes

Mode	Description
`remote` (default)	Fetches config from the Dial platform API, merges any local overrides on top
`local`	Uses only the provided overrides — no API fetch. Useful for development and testing

Remote Mode (Default)


<script
  data-dial-project="your-project-id"
  src="https://cdn.dial.wtf/beacon/v1/dial-beacon.min.js"
  async
></script>

Local Mode


<script src="https://cdn.dial.wtf/beacon/v1/dial-beacon.min.js" async></script>
<script>
  window.addEventListener('load', () => {
    window.DialBeacon.init({
      projectId: 'dev-project',
      configMode: 'local',
      overrides: {
        branding: { name: 'My App Support' },
        lanes: {
          support: { enabled: true, label: 'Help' },
          sales: { enabled: false, label: 'Sales' },
          community: { enabled: false, label: 'Community' },
        },
        quickActions: [
          { id: 'help', label: 'Get Help', lane: 'support', type: 'open_chat' },
        ],
      },
    });
  });
</script>

Config Sections

The config is organized into sections:

Section	Purpose
`branding`	Name, logo, colors, and theme
`placement`	Widget position and z-index
`triggers`	Auto-open rules (delay, path matching, exit intent)
`lanes`	Enable/disable support, sales, and community lanes
`quickActions`	The action buttons displayed in the panel
`verify`	Wallet verification gates
`handoff`	Email capture, calendar booking, external links
`faq`	Collapsible Q&A items
`analytics`	Event tracking settings

Each section is covered in detail:

Quick Actions — action types and routing
Branding & Theming — colors, fonts, and logo
Triggers — auto-open and exit intent
Verify with Dial — wallet verification gates
FAQ & Handoff — Q&A and contact options
Analytics — event tracking

For the complete schema, see the Config Reference.

Config Overrides

When using remote mode, you can apply local overrides on top of the fetched config. Overrides are deep-merged, so you only need to specify the fields you want to change:


window.DialBeacon.init({
  projectId: 'your-project-id',
  overrides: {
    branding: {
      // Override just the accent color, keep everything else from remote config
      accentColor: '#ff6600',
    },
  },
});

ETag Caching

Beacon uses HTTP ETag caching when fetching config. The first request returns the full config with an ETag header. Subsequent requests include If-None-Match — if the config hasn’t changed, the server returns 304 Not Modified and Beacon uses the cached version. This minimizes bandwidth and latency on repeat visits.

If the network is unavailable, Beacon falls back to a locally cached config from localStorage.