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

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 }}
/>

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

window.Beacon.shutdown();