Otto can help you find answers quickly!

⚠️ Special Note for Embedded Forms:
If your form is already embedded (iFramed) into your website, we recommend first implementing the BookIt snippets using the steps outlined in our What To Do If Your Form Is Embedded in an iFrame guide.
 

This guide ensures that form data collected within the iFramed form is properly passed to and stored by the parent page, enabling BookIt to properly trigger the calendar experience using that data. 
 

Once the data handoff is set up per the guide, you can complete Steps 1–4 of this document in the BookIt snippet placed on the parent page—not within the iFramed form— to enable and configure the BookIt iFrame experience.

<div class="bookit-content-container"></div>

 

Step 2: Initialize with useIframe Option

In your LDBookItV2.initialize() function, ensure you set the useIframe option to true. You can also define a border radius for the iframe using the iframeBorderRadius option.

The following is an example of how you would set your iFrame to have a border radius of 8 pixels:

LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', '<Hidden Field Name>',
  {
    useIframe: true,
    iframeBorderRadius: '8px',
    // other options here if desired
  }
);

 

Step 3: Triggering the Calendar via iFrame

How you trigger the calendar depends on whether you have autoSubmit: true enabled.

Option A. autoSubmit: true (BookIt triggers automatically)

If autoSubmit is enabled, BookIt fires the routing callout for you on form submission, so you do not call submit(). Pass the iframe callback as the cb option directly inside initialize():

LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', '<Hidden Field Name>',
  {
    autoSubmit: true,
    useIframe: true,
    cb: LDBookItV2.getIframeFn(),
    iframeBorderRadius: '8px',
    // other options here if desired
  }
);

 

Option B. Manual control of BookIt Submission

If you want to control exactly when the calendar is triggered, leave cb and autoSubmit: true out of initialize() and call LDBookItV2.submit() with the callback when you are ready:

const cb = LDBookItV2.getIframeFn();
LDBookItV2.submit({ cb });

 

Step 4: Optional iFrame Parameters

You can pass additional optional parameters to LDBookItV2.getIframeFn() to customize the iframe behavior:

• iframeWidth: Width of the iframe (e.g. '700px', '90%'). Defaults to '100%'.
• iframeHeight: Height of the iframe. Defaults to '650'.
• redirectDelay: Time (in milliseconds) the loading screen displays before the iframe loads the calendar page. Defaults to 300.

Where these parameters go depends on your trigger mode.

With autoSubmit: true (inside initialize()):

LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', '<Hidden Field Name>',
  {
    autoSubmit: true,
    useIframe: true,
    cb: LDBookItV2.getIframeFn({
      iframeWidth: '90%',
      iframeHeight: '700px',
      redirectDelay: 500,
    }),
    iframeBorderRadius: '8px',
    // other options here if desired
  }
);

 

With manual control (before submit()):

const cb = LDBookItV2.getIframeFn({
   iframeWidth: '90%',
   iframeHeight: '700px',
   redirectDelay: 500,
});
LDBookItV2.submit({ cb });