How to use iframes

Lorena Updated by Lorena

What are iframes?

Our booking journeys can be embedded into your own website or mobile app to allow your customers to book in a streamlined and consistent flow.

This only requires adding a small piece of HTML onto the page where you would like the journeys to be hosted.

How to embed an iframe?

This article describes how to create a new customer journey.

  1. The published journey card under "Journey Builder" contains the HTML snippet for you to copy.

For older journeys please ask your CSM to provide this for you. Then simply copy the snippet, and paste it into the HTML of your website or mobile app.

  1. The html snippet needs to be added to the <head> of the page that you want to embed the widget in for Iframe Resizer.
You'll need to host iframeResizer.min.js in your own environment. The script is available here
<head>

<script type="text/javascript"> src="path/to/iframeResizer.min.js"></script>
</head>

  1. In the <body> of the same page, you then add the booking widget itself:
Please note, below is only an example, the snippet provided will contain your unique URL
<iframe id="journey-app" width="100%" scrolling="no" frameborder="0" src="https://booking.jrni.com/?client=test_12345&product=Customer Journey&environment=production"></iframe> 

<script type="text/javascript">   

iFrameResize({log:false, checkOrigin:false, enablePublicMethods:true}, '#journey-app');   

// pass url params to the iframe   

var params = window.location.search;   

var iframe = document.getElementById("journey-app");   

iframe.src += params; 

</script>

If JQuery is present, rather than initialising the widget with native JS, you can initialize the iframe resizer like so:

$('#journey-app').iFrameResize({checkOrigin:false, log: false, enablePublicMethods: true});

  1. Set Access-Control-Allow-Origin in the server to prevent CORS errors
    To prevent CORS(Cross-Origin Resource Sharing) errors when implementing an iframe, the server hosting the iframe content must include the Access-Control-Allow-Origin header in its responses. This header specifies which domains are allowed to load the iframe content. For example, Access-Control-Allow-Origin: https://example.com allows only example.com to embed the iframe. Without this setting, the browser may block the iframe, rendering it unusable. Ensure the server is configured correctly to allow access from your website’s domain.
  2. Add logic to the container page to forward all URL parameters to the customer journey.
    To ensure URL parameters are passed to an iframe, add logic to the container page that appends all URL parameters from the container page’s URL to the iframe’s src attribute. This allows important data, like tracking to be forwarded to the iframe content seamlessly.
    Example: If the container page URL is https://hostpage.com?source=campaign123, the iframe should render with https://iframecontent.com?source=campaign123.
  3. Set a minimum iframe height of 650px to 800px.
    To ensure your iframe maintains a consistent appearance, set a minimum height between 650px to 800px (based on your page layout) using CSS. Add a min-height property to the iframe element, specifying the desired value in pixels (e.g., min-height: XXpx;). This ensures the iframe doesn't shrink below the specified height, even if the content is smaller, providing a stable and visually balanced layout.

Additional information

  • If you want to allow maps to work correctly in your iframes, please use:
allow="geolocation"

  • If you want to allow any copy functionality in your iframes, please use:
allow="clipboard-read; clipboard-write"

If you have any questions or need help, please contact your JRNI Account Manager.

How did we do?

Multi Service Journeys (Appointments)

How to deeplink into booking journeys

Contact