Installation

Your Workspace ID is in Settings > Channels > Beacon.

---

HTML / Snippet

Paste before the closing </body> tag. Beacon boots automatically:

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

---

React

npm install @renprofile/beacon-react

Drop BeaconWidget into your root layout — it renders nothing to the DOM:

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

Or use the useBeacon hook for imperative control:

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

---

Vue

npm install @renprofile/beacon-vue

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

---

Angular

npm install @renprofile/beacon-angular

import { BeaconService } from '@renprofile/beacon-angular';
 
@Component({ selector: 'app-root', template: '<router-outlet />' })
export class AppComponent {
  constructor(private beacon: BeaconService) {
    this.beacon.boot({ workspaceId: 'YOUR_WORKSPACE_ID' });
  }
}

---

Shopify / Webflow / Framer

Use the HTML snippet. Paste it into the custom code section of your theme or page settings.

---

Identify logged-in users

Basic identity

Call identify after login to link the session to a known contact:

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

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

Basic identity is unsigned. It identifies the contact visually for Rian and your agents, but it is not proof that the visitor owns the account.

Verified identity

Use verified identity when Rian needs to safely use account or app tools such as Stripe. Generate the signature on your backend and return it to your app after login or session refresh.

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 browser code. The backend signs:

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

Use HMAC-SHA256 and return the hex digest:

{
  "identity_timestamp": 1710000000,
  "identity_signature": "hex_hmac_sha256_digest"
}

On logout, call shutdown() to clear the session:

window.Beacon.shutdown();