B5N Booking - Smart Appointment Scheduling

Quick Start

Add the booking widget to any website with just two lines of code:

<!-- Add this where you want the widget to appear -->
<div id="oxen-booking" data-slug="your-organization-slug"></div>
<script src="https://booking.example.com/embed.js" async></script>

Replace your-organization-slug with your organization's URL slug found in Settings.

Customize the widget appearance and behavior using data attributes:

Attribute	Description	Default
`data-slug`	Your organization slug (required)	-
`data-primary-color`	Primary color for buttons and accents (hex without #)	10b981
`data-theme`	Color theme: "light" or "dark"	light
`data-hide-header`	Hide the organization name header	false
`data-service`	Pre-select a service by slug	-
`data-height`	Fixed height in pixels (or "auto")	auto

Example with all options:

<div id="oxen-booking"
     data-slug="acme-plumbing"
     data-primary-color="3b82f6"
     data-theme="dark"
     data-hide-header="true"
     data-service="drain-cleaning"
     data-height="600">
</div>
<script src="https://booking.example.com/embed.js" async></script>

Control which websites can embed your booking widget to prevent unauthorized usage.

Public Mode

When enabled, any website can embed your widget. This is the default setting for maximum reach.

Restricted Mode

Only domains in your allowlist can embed the widget. Unauthorized domains receive a 403 error.

Domain Pattern Examples

Pattern	Matches	Does Not Match
`example.com`	example.com only	www.example.com, app.example.com
`*.example.com`	app.example.com, www.example.com, sub.app.example.com	example.com (add separately)
`localhost:3000`	localhost:3000	localhost:8080, localhost

How to Configure

Go to Dashboard → Settings → Embed Widget
In the Domain Security section, add your allowed domains
Optionally disable Public Mode to enforce the allowlist
Click "Save Security Settings"

Important Notes

• Domain validation uses Origin/Referer headers, which can be spoofed by non-browser clients
• This security is designed to prevent unauthorized website embedding, not API abuse
• In development mode, localhost is always allowed regardless of settings

Link directly to your booking page from another website with customer information pre-filled. This is useful for CRM integrations, marketing campaigns, or any scenario where you already have customer data.

Basic URL Structure

https://your-domain.com/book/your-organization-slug?param1=value1&param2=value2

Supported Query Parameters

Parameter	Description	Example
`name`	Customer's full name	John+Smith
`email`	Customer's email address	john%40company.com
`phone`	Customer's phone number	5551234567
`company`	Company or business name	Acme+Corp
`website`	Company website URL	https%3A%2F%2Facme.com
`industry`	Industry or business type	SaaS
`service`	Pre-select a service by slug	consultation

Complete Example

https://booking.example.com/book/demo-plumbing-co?name=John+Smith&email=john%40company.com&phone=5551234567&company=Acme+Corp&website=https%3A%2F%2Facme.com&industry=SaaS&service=consultation

Building the URL in Code

Use URLSearchParams to properly encode parameters:

// JavaScript Example
const baseUrl = 'https://booking.example.com/book/your-org-slug';

const params = new URLSearchParams({
  name: 'John Smith',
  email: 'john@company.com',
  phone: '5551234567',
  company: 'Acme Corp',
  website: 'https://acme.com',
  industry: 'SaaS',
  service: 'consultation'
});

const bookingUrl = `${baseUrl}?${params.toString()}`;

// Use in a link
window.location.href = bookingUrl;
// Or: window.open(bookingUrl, '_blank');

HTML Link Example

<!-- Simple link with pre-filled data -->
<a href="https://booking.example.com/book/your-org-slug?name=John+Smith&email=john%40example.com&service=consultation"
   target="_blank"
   rel="noopener noreferrer">
  Book Your Consultation
</a>

<!-- Button that builds URL dynamically -->
<button onclick="openBooking()">Schedule Appointment</button>

<script>
function openBooking() {
  const customer = {
    name: document.getElementById('customerName').value,
    email: document.getElementById('customerEmail').value,
    phone: document.getElementById('customerPhone').value
  };

  const params = new URLSearchParams(customer);
  window.open('https://booking.example.com/book/your-org-slug?' + params, '_blank');
}
</script>

Use Cases

• CRM Integration: Link from customer records to pre-filled booking
• Email Campaigns: Personalized booking links in marketing emails
• Lead Forms: Redirect to booking after form submission
• Partner Referrals: Pass lead data from partner sites

Security Note

When using deep links, ensure your domain is in the allowed domains list if you have Restricted Mode enabled. The Origin/Referer header from your site must match your allowlist.

Need More Help?

Check out our API documentation for advanced integrations, or contact support if you're experiencing issues with your embed.

API Documentation →Dashboard Settings →