Integrations
      Back to home
      1. Autohost Help Center
      2. Account Settings
      3. Integrations

      Embedding the Guest Portal using iFrame

      Follow this guide to embed the Guest Portal on your own website using iframes.

      To create a seamless experience for your customers you may embed the verification flow on other web pages.

      How to use it?

      Use the following HTML example to create a web page with an embedded Guest Portal:

      <iframe
      src="https://verifyhub.org/XXXXXXX?embed=1"
      width="100%"
      height="100%"
      style="border:0"
      allow="geolocation; camera; fullscreen;"
      ></iframe>

      Steps:

      1. Copy the HTML code above to your web page.
      2. Change the reservation ID (this should happen programmatically).
      3. Make sure `?embed=1` is included in the URL.

      You can use your own custom domain instead of the default one (verifyhub.org)

       

      Example

       

      Embedding on React with Next.js:

      Make sure your HTTP server is sending the correct "Feature Policy" headers.

       

      HTTP Headers

      You must send the correct Feature Policy HTTP headers to the browser in order for the camera app to work correctly. Here is an example of how to do it on Next.js:

       

      Customization

      You can control some page elements to fit your needs. The following URL parameters are supported:

       

      The following parameters will not work if you don't include `?embed=1` 

       

      Parameter Accepted Values Description
      hide One or more of:
      logo, tobar, image      		 Logo: hide the company logo
      Tobar: hide the top bar on all pages
      image: hide the listing image on all pages
      maxWidth One of:
      xs, sm, md, lg, xl      		 Control the max width of the content section
      isMobile One of:
      yes, no      		 Force scaled mobile view on or off

      Example

      <iframe
      src="https://verifyhub.org/XXXXXXX?embed=1&hide=logo,image,topbar&maxWidth=xs"
      allow="geolocation; camera; fullscreen;"
      ></iframe>