Hide the Default Launcher

By default, Beacon renders a floating button in the bottom-right corner of your page. If you want to place your own button, show Beacon only on certain pages, or trigger it from a UI element inside your app, you can hide the default launcher entirely.

The widget is still fully functional — it just never shows the floating button. Opening, closing, and all other methods work exactly the same way.

Boot with `hide_default_launcher`

Pass hide_default_launcher: true to Beacon.boot():

Beacon.boot({
  workspace_id: 'YOUR_WORKSPACE_ID',
  hide_default_launcher: true
});

Or set it directly on the script tag with data-hide-launcher:

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

When hide_default_launcher is true, Beacon skips creating the launcher iframe entirely. The messenger panel still loads in the background, ready to open the moment you call Beacon.open().

Wire it to your own button

With the default launcher hidden, you're free to trigger Beacon from any element in your page:

<button id="help-btn">Get help</button>
 
<script>
  Beacon.boot({
    workspace_id: 'YOUR_WORKSPACE_ID',
    hide_default_launcher: true
  });
 
  document.getElementById('help-btn').addEventListener('click', function () {
    Beacon.open();
  });
</script>

React

import { useBeacon } from '@renprofile/beacon-react';
 
export default function HelpButton() {
  const beacon = useBeacon({
    workspaceId: 'YOUR_WORKSPACE_ID',
    hideDefaultLauncher: true
  });
 
  return (
    <button onClick={() => beacon.open()}>
      Get help
    </button>
  );
}

Toggle the launcher at runtime

If you want to show the default launcher on some pages and hide it on others, use Beacon.toggleLauncher() after booting normally:

// Boot with the launcher visible (default)
Beacon.boot({ workspace_id: 'YOUR_WORKSPACE_ID' });
 
// Hide on the login page
if (window.location.pathname === '/login') {
  Beacon.toggleLauncher(false);
}
 
// Show after the user authenticates
function onLogin(user) {
  Beacon.identify({ name: user.name, email: user.email, external_id: user.id });
  Beacon.toggleLauncher(true);
}

toggleLauncher(true) shows the launcher. toggleLauncher(false) hides it. The messenger panel is not affected either way.

Show the launcher on specific pages only

Beacon.boot({
  workspace_id: 'YOUR_WORKSPACE_ID',
  hide_default_launcher: true
});
 
// Only show the launcher on the /pricing and /contact pages
var showLauncherPaths = ['/pricing', '/contact'];
if (showLauncherPaths.indexOf(window.location.pathname) !== -1) {
  Beacon.toggleLauncher(true);
}

Show an unread count badge on your own button

When the launcher is hidden, use Beacon.onUnreadCountChange() to keep your custom button in sync with the actual unread count:

<button id="help-btn">
  Help
  <span id="badge" style="display: none;"></span>
</button>
 
<script>
  Beacon.boot({
    workspace_id: 'YOUR_WORKSPACE_ID',
    hide_default_launcher: true
  });
 
  Beacon.onUnreadCountChange(function (count) {
    var badge = document.getElementById('badge');
    if (count > 0) {
      badge.textContent = count;
      badge.style.display = 'inline';
    } else {
      badge.style.display = 'none';
    }
  });
 
  document.getElementById('help-btn').addEventListener('click', function () {
    Beacon.open();
  });
</script>

onUnreadCountChange is called immediately when registered with the current count, and again whenever the count changes.

Boot with hide_default_launcher