SPA Setup

In a single-page app, the page never fully reloads — so the standard script tag approach needs a small adjustment to avoid booting the widget multiple times.

React (recommended)

Use the @renprofile/beacon-react package. It handles boot on mount and shutdown on unmount automatically:

npm install @renprofile/beacon-react

Drop BeaconWidget into your root layout. It only renders once regardless of route changes:

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

Vue

npm install @renprofile/beacon-vue

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

Angular

npm install @renprofile/beacon-angular

Boot in your root AppComponent so it runs once:

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

Manual boot (no package)

If you're not using a framework package, guard against double-boot:

<script src="https://cdn.renprofile.me/widget/loader.js"></script>
<script>
  if (!window.Beacon?._initialized) {
    Beacon.boot({ workspace_id: 'YOUR_WORKSPACE_ID' });
  }
</script>

Re-identify on route change

If your app has multiple user contexts (e.g. a multi-tenant dashboard), call identify again after a user switches accounts:

// After account switch:
window.Beacon.identify({ name: newUser.name, email: newUser.email, external_id: newUser.id });