Using inline frames to embed the Hosted Experience

Prerequisites

1. Your domain has been approved and added to our allowlists
2. You have already been set up to use the Hosted Experience, via either:
   1. Our Embedded Insurance API interactions (create quote, create bridge link)
   2. A static bridge link

Implementation Steps

1. Obtain a Hosted Experience bridge link

This step is dependent on how you are configured to access the Hosted Experience, as described in the prerequisites. If using our Embedded Insurance API, follow the instructions in 1.a. If you have been provided with a static bridge link, please follow the instructions in 1.b.

1.a Obtaining a bridge link via our Embedded Insurance API

Obtaining a bridge link through our Embedded Insurance API gives you additional features, like seeding known customer & vehicle data for increased conversion. In order to obtain your bridge link, you should:

1. Provide known customer values when creating a quote
   1. POST Create Quote endpoint reference
2. Manually create a bridge link using the quote id returned in the previous step's response
   1. POST Create Bridge Link endpoint reference

A successful bridge link create response will contain a url property which may be used in subsequent steps.

1.b Utilizing a static bridge link

Your static bridge link URL may be used directly in subsequent steps. No additional action is required in step one.

2. Add the inline frame to your webpage

Add the following HTML snippet to the page where you want to embed the Hosted Experience:

<iframe
  src="{Hosted Experience URL from step one}"
  width="100%"
  height="700px"
  allow="payment" // optional: provide if you'd like to allow native (browser) payment features during checkout
></iframe>

Adjust the height and width attributes according to your user interface.

3. Testing

It is recommended to load your webpage in different browsers to ensure the inline frame displays correctly. Additionally, please attempt loading/emulating your embedded hosted experience in a mobile browser, to confirm responsive behavior.

Troubleshooting

If you encounter issues with the inline frame implementation:

1. Verify your domain has been added to our allowlists
2. Check your browser's console for cross-origin errors
3. Ensure the inline frame URL is correct and accessible
   1. You may test this by accessing it directly through your browser

For additional assistance, please refer to our complete API reference or contact your account manager.