How To Embed The BookIt For Forms' Calendar in an iFrame

⚠️ 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.

To display the BookIt For Forms in an iFrame, follow the steps below:

Step 1: Add a Container for the iFrame

Add a <div> with the class bookit-content-container where you'd like the iframe to appear on your page. LeanData will automatically detect this container and insert the iframe into it:

<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

When using an iframe, the calendar is triggered using the LDBookItV2.submit() function with a special callback.

Use the following code:

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.

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