Embed on Your Site
Customers on the Pro and Scale plans can embed workflows in their website using an iFrame.
Embed On Your Site
If you are on a Pro or Scale plan or would like to upgrade, please contact help@gavel.io to enable embedding for your Gavel account.
Embed your workflows into your website by inserting an iframe into the HTML of the page. To do so, insert the URL of your workflow 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>
Embed on 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">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";}});</script>
Embed on Squarespace
<iframe id="sizetracker" style="height: 100%" src="WORKFLOW URL HERE"></iframe>
<script type="text/javascript">
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%";
}
});
</script>
Embedding a Long Workflow
<script src=“https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js” integrity=“sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==” crossorigin=“anonymous” referrerpolicy=“no-referrer”></script><iframe style=“min-width: 100%; width: 1px;” frameborder=“0" width=“1400” height=“1000" src=“URL removed for post” id=“expunge_iframe” ></iframe><script>iFrameResize({ log: true }, ‘#expunge_iframe’)
</script>
Embedding Example
Here's an example of a workflow embedded in an iframe with a width of 100% and a height of 600:
You can see other embedded workflows in action here:
CARES Act Application
Security Freeze Letter
Having trouble accessing embedded workflows on Safari?
You may experience issues with embedded forms on iOS devices because the Safari setting "Prevent Cross-Site Tracking," which is enabled by default on these devices, prevents embedded workflows from working correctly. Switching this setting off should resolve the issue, however you can also set up a Custom Subdomain and this will allow all takers to utilize Safari as needed for your workflows.
