How to display the BookIt For Forms Calendar in an iframe

To begin, create a div with class="bookit-content-container" in the location you would like to place the iframe. LeanData's code will look for a div with this class name and automatically insert it as a child.

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

Next, you’ll notice that the calendar popup is triggered via a call to the LDBookItV2.submit() function. To adjust this for iframe implementations, you will need to pass in a callback defined by the LDBookItV2.getIframeFn().

This is done with the following code:

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

There are a few additional (optional) parameters you can pass into getIframeFn() if desired:

• iframeWidth
  • The value of the width attribute of the iframe (e.g. '700px', '90%', etc.).
  • This defaults to '100%'
• iframeHeight
  • The value of the width attribute of the iframe (e.g. '700px', '90%', etc.).
  • This defaults to '650'.
• redirectDelay
  • How long (in milliseconds) you would like for the loading screen to display before redirecting the iframe src to the calendar page.
  • This defaults to 300

You will also need your LDBookItV2.initialize() call to set useIframe: true in the options.

This means your LDBookItV2.initialize() should look like:

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

Here, you can also specify a border radius for your 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 */ });

Note that if your form itself is iframed into your webpage, LeanData will likely not be making a call to LDBookItV2.submit() and instead will be triggering the calendar popup via a call to LDBookItV2.startRouting(). If this is the case for your setup and would like your calendar to display in an iframe, please reach out to LeanData's professional services team for more customized support.