Dial Beacon

Dial Beacon is an embeddable support and engagement widget that any website can add with a single script tag. It renders a floating button that opens a panel with quick actions, FAQ, handoff options, and wallet verification — all powered by the Dial platform.

Overview

Beacon lets site operators activate, engage, and verify visitors without losing them to Discord or social channels. Configuration is managed remotely via the Beacon Console at dial.wtf/console/beacon, so you can update branding, actions, and behavior without redeploying.

Key Features

Single Script Tag — Drop one <script> tag and Beacon auto-initializes
Quick Actions — Route visitors to support chat, sales calls, community rooms, or external links
Verify with Dial — Gate actions behind wallet verification using SIWE/SIWS
Theming — Match your brand colors, fonts, and placement
FAQ & Handoff — Collapsible Q&A, email capture, calendar booking, external links
Analytics — Fire-and-forget event tracking with configurable sampling
React SDK — First-class React component and hooks for React/Next.js apps
Remote Config — Manage everything from the Beacon Console with versioning and rollback

Quick Start


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

That’s it. Beacon fetches your project config from the Dial platform and renders automatically.

Architecture

Beacon is built as a modular monorepo with four packages:

Package	Purpose
`@dial-beacon/core`	Pure logic — types, config validation (Zod), networking, security
`@dial-beacon/embed`	IIFE bundle for CDN (`dial-beacon.min.js`, <90KB gzipped)
`@dial-beacon/react`	React component + `useDialBeacon()` hook
`@dial-beacon/registry-client`	Browser-safe API client for config fetching

Dial Beacon

Overview

Key Features

Quick Start

Architecture

Documentation

Resources