Widget (Floating Button)

The widget embed adds a persistent floating button to the corner of your website. When clicked, it opens the scheduling UI in an overlay. This gives visitors a way to book a meeting from any page without you needing to modify each page’s layout.

Setup

Add the embed script with a single configuration element anywhere in your page:


<div
  data-proximity-mode="widget"
  data-proximity-user="jane-doe"
  data-proximity-event="30min-call"
  data-proximity-widget-text="Book a call"
  data-proximity-widget-color="#4F46E5"
  style="display: none;"
></div>
 
<script src="https://app.proximity.io/embed/v1/proximity-embed.js" async></script>

The script reads the configuration and renders a floating button in the bottom-right corner of the viewport.

Configuration

Attribute	Required	Default	Description
`data-proximity-mode`	Yes	—	Must be `widget`
`data-proximity-user`	Yes	—	Host’s user slug
`data-proximity-event`	No	—	Event type slug
`data-proximity-widget-text`	No	`"Book a meeting"`	Button label text
`data-proximity-widget-color`	No	`#4F46E5`	Button background color (hex)
`data-proximity-widget-position`	No	`bottom-right`	Button position: `bottom-right` or `bottom-left`
`data-proximity-color`	No	Host’s brand color	Primary color for the scheduling UI
`data-proximity-locale`	No	`en`	UI language
`data-proximity-hide-branding`	No	`false`	Hide “Powered by Proximity”

The floating button renders as a rounded pill with an icon and text:


  ┌──────────────────────┐
  │  📅  Book a call     │
  └──────────────────────┘

On mobile screens, the button automatically collapses to show only the icon to save space.

Positioning

Control which corner the button appears in:


<!-- Bottom-right (default) -->
<div data-proximity-mode="widget" data-proximity-widget-position="bottom-right" ...></div>
 
<!-- Bottom-left -->
<div data-proximity-mode="widget" data-proximity-widget-position="bottom-left" ...></div>

The button has a fixed offset from the viewport edge and stays above any other fixed elements (z-index: 9999).

Programmatic Control

Control the widget from JavaScript:


// Show the widget (if initially hidden)
window.proximityEmbed.showWidget();
 
// Hide the widget
window.proximityEmbed.hideWidget();
 
// Open the scheduling overlay
window.proximityEmbed.open();
 
// Close the scheduling overlay
window.proximityEmbed.close();

Conditional Display

You might want to show the widget only on certain pages or for certain users:


// Show widget only on pricing and product pages
const showWidgetOn = ['/pricing', '/product', '/features'];
if (showWidgetOn.some(path => window.location.pathname.startsWith(path))) {
  window.proximityEmbed.showWidget();
}

Full Example


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Acme Inc.</title>
</head>
<body>
  <h1>Welcome to Acme</h1>
  <p>We build amazing products.</p>
 
  <!-- Widget config (hidden element, just for configuration) -->
  <div
    data-proximity-mode="widget"
    data-proximity-user="jane-doe"
    data-proximity-event="demo"
    data-proximity-widget-text="Talk to Sales"
    data-proximity-widget-color="#059669"
    data-proximity-widget-position="bottom-right"
    data-proximity-locale="en"
    style="display: none;"
  ></div>
 
  <script src="https://app.proximity.io/embed/v1/proximity-embed.js" async></script>
 
  <script>
    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://app.proximity.io') return;
      if (event.data.type === 'proximity:booking-created') {
        // Track the conversion
        if (window.gtag) {
          gtag('event', 'booking_created', {
            event_category: 'scheduling',
            event_label: event.data.data.inviteeEmail,
          });
        }
      }
    });
  </script>
</body>
</html>