Skip to main content

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/{id}?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 {id} with 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)

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

ParameterAccepted ValuesDescription
hideOne or more of: logo, tobar, imageLogo: hide the company logoTobar: hide the top bar on all pagesimage: hide the listing image on all pages
maxWidthOne of: xs, sm, md, lg, xlControl the max width of the content section
isMobileOne of: yes, noForce scaled mobile view on or off
kioskOne of: 1Force kiosk mode on and use the back camera of the device

Events

The iframe will send messages to the parent window when certain events occur. You can listen for these events and take action in your own code.

EventDescription
guestportal-completedSent when the guest has completed the verification process. The message will contain the result.
guestportal-step-completedSent when the guest has completed a step in the verification process.

Event guestportal-completed

The guestportal-completed event will be sent when the guest has completed the verification process.

The message will contain the following object:

{
"type": "guestportal-completed",
"id": "XXXXXXX",
"code": "XXXXXX",
"is_repeat_guest": false,
"is_previously_declined_guest": false
}
FieldDescription
typeThe type of the event. Always guestportal-completed
idThe reservation ID.
codeThe confirmation code.
is_repeat_guestTrue if this is a returning guest.
is_previously_declined_guestTrue if the guest has previously been declined.

Event guestportal-step-completed

The guestportal-step-completed event will be sent when the guest has completed a step in the verification process.

The message will contain the following object:

{
"type": "guestportal-step-completed",
"id": "XXXXXXX",
"step": "XXXXXX",
"code": "XXXXXX"
}
FieldDescription
typeThe type of the event. Always guestportal-step-completed
idThe reservation ID.
stepThe name of the Guest Portal screen that was completed.
codeThe confirmation code.

Examples

Simple HTML example:

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

React example with Next.js:

import React from 'react';
import {useRouter} from 'next/router';
import Layout from '../../components/Layout';

const EmbeddedAutohostVerification = (props) => {
const router = useRouter();
const iframeRef = React.useRef(null);
const key = router.query.id;

React.useEffect(() => {
// Register listener on mount
window.onmessage = (m) => {
if (m && m.data && typeof m.data === 'string') {
const data = JSON.parse(m.data);

// Look for Guest Portal Completed event
if (data.type === 'guestportal-completed') {

const id = data.id;
const confirmationCode = data.code;
const isRepeatGuest = data.is_repeat_guest;
const isPreviouslyDeclined = data.is_previously_declined_guest;

// Insert your own logic here to move the user to the next stage.
//
// Important note:
// Make sure to poll for final verification status before giving the user access to sensitive info/actions
//
if (isRepeatGuest) {
return router.push(`/thank-you-1/${confirmationCode}`);
}
if (isPreviouslyDeclined) {
return router.push(`/thank-you-2/${confirmationCode}`);
}
router.push(`/thank-you-3/${confirmationCode}`);
}
}

// Look for Guest Portal Step Completed event
if (data.type === 'guestportal-step-completed') {
const id = data.id;
const step = data.step;
const confirmationCode = data.code;
console.log('Guest Portal Step Completed:', step);
}
};
}, []);

return (
<>
<Layout
title="Online Check In"
description="Check in to your property"
>
<main>
<section>
{key &&
<iframe
src={`https://verifyhub.org/${key}?embed=1`}
width="100%"
height="100%"
frameBorder="0"
allow="geolocation; camera; fullscreen;"
ref={iframeRef}
/>
}
{!key &&
<h5>Missing reservation ID</h5>
}
</section>
</main>
</Layout>
<style jsx>{`
main {
margin: 0 auto;
}
section {
height: 100vh;
}
`}</style>
</>
);
};

export default EmbeddedAutohostVerification;
warning

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