Beacon Setup

Beacon is Renprofile's embeddable chat widget. It connects your visitors to Rian (your AI agent) and your support team in real time. Your Workspace ID is available from Settings > Channels > Beacon.

---

Installation

Choose the method that matches your stack. For framework projects, the npm packages give you a proper component API. For plain HTML, CMS platforms, or anything else, the script tag works everywhere.

HTML / Snippet

Paste this before the closing </body> tag:

<script
  src="https://cdn.renprofile.me/widget/loader.js"
  data-workspace-id="YOUR_WORKSPACE_ID"
  async
></script>

Beacon boots automatically. No further code needed for anonymous visitors.

---

React

Install:

npm install @renprofile/beacon-react

Component (recommended): drop BeaconWidget into your root layout. It renders nothing to the DOM — the widget lives in its own iframes.

import { BeaconWidget } from '@renprofile/beacon-react';
 
export default function RootLayout({ children }) {
  return (
    <>
      {children}
      <BeaconWidget workspaceId="YOUR_WORKSPACE_ID" />
    </>
  );
}

Hook: use useBeacon if you need imperative control (open, close, identify) from within a component.

import { useBeacon } from '@renprofile/beacon-react';
 
export default function App() {
  const beacon = useBeacon({ workspaceId: 'YOUR_WORKSPACE_ID' });
 
  return (
    <button onClick={() => beacon.open()}>
      Open support
    </button>
  );
}

---

Vue

Install:

npm install @renprofile/beacon-vue

Component:

<script setup>
import { BeaconWidget } from '@renprofile/beacon-vue';
</script>
 
<template>
  <BeaconWidget workspaceId="YOUR_WORKSPACE_ID" />
</template>

---

Angular

Install:

npm install @renprofile/beacon-angular

Component:

import { BeaconService } from '@renprofile/beacon-angular';
 
@Component({ ... })
export class AppComponent {
  constructor(private beacon: BeaconService) {
    this.beacon.boot({ workspaceId: 'YOUR_WORKSPACE_ID' });
  }
}

Or use the <beacon-widget> element directly in your template:

<beacon-widget workspaceId="YOUR_WORKSPACE_ID"></beacon-widget>

---

Shopify / Webflow / Framer

Use the HTML snippet method for all three. Paste the script tag into the custom code section of your theme or page settings.

---

Identify logged-in users

Once a user authenticates, pass their details to Beacon so Rian and your agents can see who they're talking to. All fields are optional but external_id is strongly recommended for linking conversations to your own user records.

Basic identity

Basic identity is unsigned. It identifies the contact visually in Beacon, but it is not proof that the visitor owns the account.

Script tag:

window.Beacon.identify({
  name: user.name,
  email: user.email,
  phone: user.phone,         // optional
  external_id: user.id       // your internal user ID
});

React (via component prop):

<BeaconWidget
  workspaceId="YOUR_WORKSPACE_ID"
  identity={{
    name: user.name,
    email: user.email,
    external_id: user.id
  }}
/>

React (via hook):

const beacon = useBeacon({ workspaceId: 'YOUR_WORKSPACE_ID' });
 
// After login:
beacon.identify({ name: user.name, email: user.email, external_id: user.id });

Angular:

this.beacon.boot({
  workspaceId: 'YOUR_WORKSPACE_ID',
  identity: {
    name: user.name,
    email: user.email,
    external_id: user.id
  }
});

Verified identity

Use verified identity when Rian needs to safely use account or app tools such as Stripe. Your backend should return { identity_timestamp, identity_signature } to your app after login or session refresh.

Before signing identities, generate a widget identity secret:

1. Go to Settings > Channels > Beacon > Security.
2. Name the secret, for example Production website.
3. Click Generate.
4. Copy the secret into your backend environment as WIDGET_IDENTITY_SECRET.

Create separate secrets for different environments when needed, and rotate a secret if it is exposed.

window.Beacon.identify({
  name: user.name,
  email: user.email,
  phone: user.phone,
  external_id: user.id,
  identity_timestamp,
  identity_signature
});

Never expose WIDGET_IDENTITY_SECRET in frontend code. Your backend signs this payload:

{workspace_id}.{external_id}.{email_or_empty}.{timestamp}

Use HMAC-SHA256 with WIDGET_IDENTITY_SECRET and return a hex digest. Signatures expire after 10 minutes. If the signature is invalid, Beacon returns 400 Invalid widget identity signature.

When a user logs out, call shutdown() to clear the session:

window.Beacon.shutdown();
// or via hook: beacon.shutdown()

---

Customisation

Go to Settings > Channels > Beacon > Customisation to configure:

Setting	Options
Launcher colour	Four presets (#3E9AFF, #22C55E, #7C3AED, #292929) or any custom hex
Widget theme	Light or Dark panel

Changes are saved per-workspace and apply to all visitors immediately.

---

Verify it's working

Open your site, click the Beacon launcher, and send a test message. It should appear in your Renprofile inbox within seconds. The agent's response will show a latency reading (e.g. 340ms) below the message bubble.