Quick Start

Get Dial Beacon running on your website in under 2 minutes.

Prerequisites

A Dial Beacon project created at dial.wtf/console/beacon
Your project ID (found in the Console after creating a project)

1. Add the Script Tag

Paste this into your HTML, just before the closing </body> tag:


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

Replace your-project-id with your actual project ID from the Beacon Console.

2. That’s It

Beacon will:

Load asynchronously (won’t block your page render)
Fetch your project configuration from the Dial platform
Render a floating button in the configured position
Open a panel with your quick actions, FAQ, and handoff options when clicked

Script Tag Attributes

Attribute	Required	Description
`data-dial-project`	Yes	Your Beacon project ID
`data-dial-env`	No	`"prod"` (default) or `"staging"`
`data-dial-key`	No	Publishable key for domain validation
`data-dial-api`	No	Custom API base URL (advanced)
`data-dial-config-mode`	No	`"remote"` (default) or `"local"`

Manual Initialization

If you need more control, skip the data-dial-project attribute and initialize manually:


<script src="https://cdn.dial.wtf/beacon/v1/dial-beacon.min.js" async></script>
 
<script>
  // Wait for the script to load
  window.addEventListener('load', () => {
    window.DialBeacon.init({
      projectId: 'your-project-id',
      env: 'prod',
      publicKey: 'beacon_pk_live_...',
    });
  });
</script>

Using with React

If you’re using React or Next.js, use the @dial-beacon/react package instead:


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

See the React SDK docs for full details.

Next Steps

Configure your widget — branding, actions, and behavior
Set up quick actions — route visitors to support, sales, or community
Enable wallet verification — gate actions behind SIWE verification
Manage via the Console — create projects, generate keys, and publish configs