How to Embed Your Patch Waiver Using an iFrame

Embedding your Patch Waiver directly into your website enhances user experience by allowing clients to fill out and submit waivers without navigating away from your site. Although Patch Waivers no longer includes a direct embed installation step, you can still seamlessly integrate your waiver into your website using an iFrame and your waiver's SmartLink. This guide will walk you through the process.

Please note: This option is only recommended if you have a dedicated technical support team/dev team to assist. Patch cannot assist with embedding waivers onto your website. 

Step 1: Obtain Your Waiver's SmartLink

Access Your Patch Account: Log in to your Patch Retention account and navigate to the 'Waivers' section.

Find Your Waiver: Locate the waiver you wish to embed on your website.

Copy the SmartLink: Each waiver has a unique SmartLink associated with it, you can find this SmartLink on Step 5 of the Waiver editor.

Step 2: Prepare the iFrame Code
An iFrame (Inline Frame) is an HTML element that allows you to embed another HTML document within a web page. To embed your waiver, you'll need to create an iFrame snippet with your waiver's SmartLink.

Copy code:
<iframe src="YOUR_WAIVER_LINK_HERE" width="600" height="400"></iframe>

Replace 'YOUR_WAIVER_LINK_HERE' with the SmartLink you copied from your Patch Waiver.

Adjust the width and height values to fit the waiver appropriately on your webpage. These values can be set in pixels or percentages, depending on your layout needs.

Step 3: Embed the iFrame on Your Website

Access Your Website's Editor: Open the backend of your website where you can edit the HTML or content of the page where you want to embed the waiver.

Choose the Location: Decide where on the page you'd like the waiver to appear. This could be on a dedicated 'Waiver' page, a sidebar, or within a specific section of your site.

Insert the iFrame Code: Paste the iFrame snippet you prepared earlier into the HTML of your chosen location. Ensure it's correctly positioned and formatted according to your site's design.

Step 4: Test the Embedded Waiver
After embedding the waiver, it's crucial to test the functionality to ensure a smooth experience for your users:

Preview Your Page: Save your changes and preview the page to see how the embedded waiver appears in the context of your website.

Fill Out the Waiver: Complete the waiver through the iFrame to ensure that all fields work correctly and the submission process is seamless.

Check Responsiveness: View the page on different devices and browsers to ensure the embedded waiver adjusts and functions properly across various screen sizes.

Best Practices

Security Considerations: Ensure your website uses HTTPS to maintain the security of data submitted through the waiver.
User Experience: Regularly check the embedded waiver to ensure it continues to function correctly, especially after updates to your website or the Patch platform.
Compliance and Consent: Make sure the embedded waiver is clearly visible and accessible on your site, and that it complies with relevant legal requirements and data protection standards.

Embedding your Patch Waiver within your website using an iFrame is a straightforward process that can significantly enhance the user experience by providing a seamless way for clients to complete waivers. By following these steps, you can ensure that your waiver is not only functional but also perfectly integrated into your site's overall design and user flow. If you encounter any issues or have questions, consider reaching out to your web developer or the Patch support team for assistance.