Inline Embed

The inline embed renders the full Proximity scheduling UI directly within your page. The booking calendar appears as a natural part of your page layout.

Setup

Add the embed script and a container element to your page:


<div
  data-proximity-mode="inline"
  data-proximity-user="jane-doe"
  data-proximity-event="30min-call"
  style="min-height: 600px;"
></div>
 
<script src="https://app.proximity.io/embed/v1/proximity-embed.js" async></script>

The script will find the container element, inject an iframe, and render the scheduling UI inside it.

Configuration

Attribute	Required	Default	Description
`data-proximity-mode`	Yes	—	Must be `inline`
`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”

Sizing

The inline embed automatically adjusts its height to fit the content. Set a min-height on the container to prevent layout shift during loading:


<div
  data-proximity-mode="inline"
  data-proximity-user="jane-doe"
  style="min-height: 600px; width: 100%; max-width: 800px;"
></div>

React Component

If you’re using React, you can wrap the embed in a component:


import { useEffect, useRef } from 'react';
 
function ProximityInlineEmbed({ user, event, color, locale }) {
  const containerRef = useRef(null);
 
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.proximity.io/embed/v1/proximity-embed.js';
    script.async = true;
    document.body.appendChild(script);
 
    return () => {
      document.body.removeChild(script);
    };
  }, []);
 
  return (
    <div
      ref={containerRef}
      data-proximity-mode="inline"
      data-proximity-user={user}
      data-proximity-event={event}
      data-proximity-color={color}
      data-proximity-locale={locale}
      style={{ minHeight: 600 }}
    />
  );
}
 
// Usage
<ProximityInlineEmbed user="jane-doe" event="30min-call" />

Full Example


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Book a Call — Acme Inc.</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
    h1 { text-align: center; }
  </style>
</head>
<body>
  <h1>Schedule a Demo</h1>
  <p style="text-align: center; color: #666;">Pick a time that works for you.</p>
 
  <div
    data-proximity-mode="inline"
    data-proximity-user="jane-doe"
    data-proximity-event="demo"
    data-proximity-color="#4F46E5"
    style="min-height: 600px; margin-top: 2rem;"
  ></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') {
        alert('Thanks for booking! Check your email for confirmation.');
      }
    });
  </script>
</body>
</html>