Installation

Dial Beacon can be installed via a CDN script tag (recommended) or as an npm package for React apps.

CDN (Recommended)

Add the script tag to your HTML. This works with any website — static HTML, WordPress, Shopify, or any framework.


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

The script is:

Async — won’t block page rendering
Idempotent — safe to load multiple times (won’t duplicate the widget)
Small — under 90KB gzipped
Sandboxed — all CSS is prefixed with dial-beacon- to avoid conflicts

npm (React / Next.js)

For React or Next.js applications, install the React wrapper:


npm install @dial-beacon/react
# or
pnpm add @dial-beacon/react
# or
yarn add @dial-beacon/react

Then use the component:


import { DialBeacon } from '@dial-beacon/react';
 
export default function Layout({ children }) {
  return (
    <>
      {children}
      <DialBeacon projectId="your-project-id" />
    </>
  );
}

Packages

Beacon is distributed as multiple packages for different use cases:

Package	Install	Use Case
CDN script	Script tag	Any website
`@dial-beacon/react`	npm/pnpm/yarn	React and Next.js apps
`@dial-beacon/core`	npm/pnpm/yarn	Custom integrations (types and validation only)
`@dial-beacon/registry-client`	npm/pnpm/yarn	Custom config fetching

Most users only need the CDN script or @dial-beacon/react.

Subresource Integrity (SRI)

For enhanced security, you can use SRI to verify the script hasn’t been tampered with:


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

SRI hashes are generated with each release and published in the Beacon Console install tab.

Domain Allowlisting

Beacon validates the origin domain before rendering. Add your domains in the Beacon Console under the Domains tab. Wildcard patterns are supported (e.g., *.example.com).

Verifying Installation

After adding the script, the Beacon Console shows an installation status indicator. Beacon sends a ping when it loads on your site, confirming the script is active and the configuration is being fetched correctly.

Next Steps

Quick Start — get up and running
Configuration — customize the widget
Console Guide — manage your project