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.

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
  }
});

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.