EMBED . DOCS

Embed Dayla anywhere.

One script tag — two modes. Inline embeds drop a booking widget onto your page. FAB mode adds a floating action button that opens a modal widget. Customizable colors, auto context detection, and a full postMessage API.

Live demo↗Get started

INLINE EMBED

Drop-in inline widget.

Place the script tag where you want the widget to appear. The iframe is injected right after the script element.

inline-embed.html

<script
  src="https://dayla.apps.softblaze.net/embed.js"
  data-username="alex"
  data-type="booking"
  data-mode="inline"
  data-theme="auto"
  data-accent="#E06A48"
  data-bg="#ffffff"
  data-height="600"
  async
></script>

FLOATING ACTION BUTTON

FAB mode.

A floating button appears in the corner. Click to open a modal with the booking widget. Configurable position, offset, and colors.

fab-embed.html

<script
  src="https://dayla.apps.softblaze.net/embed.js"
  data-username="alex"
  data-type="booking"
  data-mode="fab"
  data-theme="auto"
  data-accent="#E06A48"
  data-bg="#ffffff"
  data-fab-position="br"
  data-fab-offset="24"
  async
></script>

AI CONCIERGE

Concierge embed.

Switch data-type to concierge and embed the AI chat widget. Same modes, same customization.

concierge-embed.html

<script
  src="https://dayla.apps.softblaze.net/embed.js"
  data-username="alex"
  data-type="concierge"
  data-mode="fab"
  data-theme="auto"
  data-accent="#8A2E55"
  data-height="500"
  async
></script>

JAVASCRIPT API

Programmatic control.

Use DaylaEmbed.create() for inline widgets and DaylaEmbed.createFAB() for floating buttons. Full event system via .on().

programmatic.js

// Programmatic API
const widget = DaylaEmbed.create({
  username: 'alex',
  type: 'booking',
  theme: 'auto',
  container: '#dayla-widget',
  accent: '#E06A48',
  bg: '#ffffff',
})
widget.on('booked', (data) => {
  console.log('Booking confirmed:', data.bookingId)
})
// FAB mode via API
const fab = DaylaEmbed.createFAB({
  username: 'alex',
  type: 'concierge',
  accent: '#8A2E55',
  fabPosition: 'br',
})
fab.open()

REFERENCE

Data attributes.

All configuration is passed via data-* attributes on the script tag or as options to the JavaScript API.

ATTRIBUTE	REQUIRED	DEFAULT	DESCRIPTION
data-username	yes	—	Your Dayla handle. The script does nothing without this.
data-type	no	booking	Widget type: booking shows slots, concierge shows the AI chat.
data-mode	no	inline	Display mode: inline embeds where the script tag is placed, fab shows a floating action button.
data-theme	no	auto	Color scheme: auto follows the system preference, light/dark force one.
data-accent	no	#E06A48	Primary accent color (hex). Applied to buttons, links, and FAB.
data-bg	no	#ffffff	Background color (hex) for the FAB panel.
data-width	no	100%	Width of the inline iframe.
data-height	no	600	Initial height in px. Auto-resize adjusts after load.
data-min-height	no	320	Minimum height in px to prevent collapse.
data-fab-position	no	br	FAB screen corner: br (bottom-right), bl, tr, tl.
data-fab-offset	no	24	FAB distance from the screen edge in px.

POSTMESSAGE API

Listen for events.

The iframe sends messages to the parent window. Hook into these to track bookings, errors, and resize events.

postmessage-listeners.js

// Listen for widget events
window.addEventListener('message', (event) => {
  const data = event.data
  if (!data || typeof data.type !== 'string') return
  switch (data.type) {
    case 'dayla-ready':
      console.log('Widget loaded')
      break
    case 'dayla-resize':
      console.log('New height:', data.height)
      break
    case 'dayla-booked':
      console.log('Booking:', data.bookingId)
      break
    case 'dayla-error':
      console.error('Error:', data.message)
      break
  }
})

EVENT	PAYLOAD	DESCRIPTION
dayla-ready	{}	Fired when the iframe finishes loading and the widget is interactive.
dayla-resize	{ height: number }	Fired when the content height changes. The parent script auto-applies the new height.
dayla-booked	{ bookingId?: string }	Fired when the visitor completes a booking. bookingId is the confirmed booking ID.
dayla-error	{ message: string }	Fired when the widget encounters an error (e.g., username not found).
dayla-slot-selected	{ slot: string, eventTypeId?: string }	Fired when the visitor selects a time slot (before confirming the booking).

CONTEXT DETECTION

Auto context.

The embed script auto-detects the page title and URL and passes them as query parameters to the iframe. The concierge uses this to give context-aware booking suggestions. Disable with detectContext: false in the JS API.

QUERY PARAM	SOURCE	DESCRIPTION
ctx_title	document.title	The page title. Helps the concierge understand what page the visitor is on.
ctx_url	window.location.href	The full URL. Enables context-aware booking suggestions.
ctx_path	window.location.pathname	The URL path. Used to detect the site section.

Ready to embed?

Create your Dayla page, grab your script tag, and paste it anywhere.

Get your embed code