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.

Example App

• Example Application
• Source Code

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

Parameter	Accepted Values	Description
hide	One or more of: logo, tobar, image	Logo: hide the company logoTobar: hide the top bar on all pagesimage: 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

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.

Event	Description
guestportal-completed	Sent when the guest has completed the verification process. The message will contain the result.
guestportal-step-completed	Sent 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
}

Field	Description
type	The type of the event. Always guestportal-completed
id	The reservation ID.
code	The confirmation code.
is_repeat_guest	True if this is a returning guest.
is_previously_declined_guest	True 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"
}

Field	Description
type	The type of the event. Always guestportal-step-completed
id	The reservation ID.
step	The name of the Guest Portal screen that was completed.
code	The 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.

Autohost

Talk to Sales