Popup Embed

The popup embed opens the Proximity scheduling UI in a full-screen overlay when the visitor clicks a trigger element. This is ideal for call-to-action buttons, navigation links, or anywhere you want to offer booking without navigating away from the current page.

Setup

Add a trigger element with data-proximity-mode="popup" and include the embed script:


<button
  data-proximity-mode="popup"
  data-proximity-user="jane-doe"
  data-proximity-event="30min-call"
>
  Book a Call
</button>
 
<script src="https://app.proximity.io/embed/v1/proximity-embed.js" async></script>

When the visitor clicks the button, the scheduling overlay appears. They can close it by clicking outside or pressing Escape.

Configuration

Attribute	Required	Default	Description
`data-proximity-mode`	Yes	—	Must be `popup`
`data-proximity-user`	Yes	—	Host’s user slug
`data-proximity-event`	No	—	Event type slug. If omitted, all active event types are shown.
`data-proximity-color`	No	Host’s brand color	Primary color override (hex)
`data-proximity-locale`	No	`en`	UI language
`data-proximity-hide-branding`	No	`false`	Hide “Powered by Proximity”

Styling the Trigger

The popup mode works with any clickable element — buttons, links, divs, etc. The embed script attaches a click handler automatically. You can style the trigger however you want:


<!-- As a styled button -->
<button
  data-proximity-mode="popup"
  data-proximity-user="jane-doe"
  style="
    background: #4F46E5;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
  "
>
  Schedule a Demo →
</button>
 
<!-- As a link -->
<a
  href="#"
  data-proximity-mode="popup"
  data-proximity-user="jane-doe"
  data-proximity-event="consultation"
>
  Book a free consultation
</a>

Multiple Triggers

You can have multiple popup triggers on the same page, each pointing to different event types:


<button data-proximity-mode="popup" data-proximity-user="jane-doe" data-proximity-event="15min-intro">
  Quick Intro (15 min)
</button>
 
<button data-proximity-mode="popup" data-proximity-user="jane-doe" data-proximity-event="demo">
  Full Demo (45 min)
</button>
 
<script src="https://app.proximity.io/embed/v1/proximity-embed.js" async></script>

Programmatic Control

You can open and close the popup programmatically:


// Open the popup
window.proximityEmbed.open({
  user: 'jane-doe',
  event: '30min-call',
  color: '#4F46E5',
});
 
// Close the popup
window.proximityEmbed.close();

This is useful when you want to trigger the popup from a custom event handler, form submission, or after a delay:


// Open popup after 30 seconds on the page
setTimeout(() => {
  window.proximityEmbed.open({
    user: 'jane-doe',
    event: '30min-call',
  });
}, 30000);

Full Example


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Contact Us — Acme Inc.</title>
  <style>
    .cta-section {
      text-align: center;
      padding: 4rem 1rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 16px;
      margin: 2rem;
    }
    .cta-button {
      background: white;
      color: #4F46E5;
      border: none;
      padding: 14px 28px;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 1rem;
    }
    .cta-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
  </style>
</head>
<body>
  <div class="cta-section">
    <h2>Ready to get started?</h2>
    <p>Book a free 30-minute demo with our team.</p>
    <button
      class="cta-button"
      data-proximity-mode="popup"
      data-proximity-user="jane-doe"
      data-proximity-event="demo"
    >
      Book a Demo
    </button>
  </div>
 
  <script src="https://app.proximity.io/embed/v1/proximity-embed.js" async></script>
</body>
</html>