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});

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 please contact your JRNI Account Manager.

How did we do?

How to deeplink into booking journeys

Direct Links

Contact