Embed on Your Site

Embed On Your Site

Embed your workflows into your website by inserting an iframe into the HTML of the page. To do so, insert the URL of your interview where it says WORKFLOW URL HERE in the snippet below:

<iframe style="width: 500px; height: 700px;" src="WORKFLOW URL HERE"></iframe>
Change the Size of the Embed

Adjust the width/height of the iframe based on your web page by changing the numbers for width and height in the code above.

If you want the workflow to take up the entire width/height of your webpage, use the code below:

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <style type="text/css"> html{ margin: 0; height: 100%; overflow: hidden; } iframe{ position: absolute; left:0; right:0; bottom:0; top:0; border:0; } </style> </head> <body> <iframe width="100%" height="100%" frameborder="0" src="WORKFLOW URL HERE"></iframe> </body> </html>
Wordpress

If you are embedding in Wordpress and are looking for responsive resize, you can use the snippet below:

<iframe id="sizetracker" style="height: 100%" src="WORKFLOW URL"></iframe>
<script type="text/javascript"></script>
window.addEventListener("message", function(e) {
var this_frame = document.getElementById("sizetracker");
if (this_frame.contentWindow === e.source) {
this_frame.height = e.data.height + "px";
this_frame.style.height = e.data.height + "px";
}
});

Squarespace
<iframe id="sizetracker" style="height: 100%" src="WORKFLOW URL HERE"></iframe>
<script type="text/javascript"></script>
window.addEventListener("message", function(e) {
var this_frame = document.getElementById("sizetracker");
if (this_frame.contentWindow === e.source) {
this_frame.height = e.data.height + "px";
this_frame.style.height = e.data.height + "px";
this_frame.width = "100%";
this_frame.style.width = "100%";
}
});

Embedding Example

Here's an example of a workflow embedded in an iframe with width 100% and height 600: