Skip to content

Booking Widget Overview

The HGN Booking Widget is a complete, hosted trek-insurance booking flow that you embed in your own website as a single full-page iframe.

Your customer stays on your domain. HGN renders and maintains the booking experience, the payment logic, and the product rules.

Roughly 15 minutes to integrate

One HTML page containing one iframe. No dependencies, no build step, and no framework requirement.

The key idea

The customer sees your address bar, your logo, and your brand colour, while the booking flow itself is served securely from book.himalayanguardian.com.

your-agency.com/insurance   ←  the customer sees this
    └── full-page iframe
        └── book.himalayanguardian.com/<your-slug>   ←  HGN renders this

The booking widget running full-screen on an agency website, with the agency's own domain in the address bar

What it does

The widget is a production-ready booking flow for trek-insurance purchases. It lets you offer HGN insurance through your own website without building or maintaining the insurance flow yourself.

  • Runs at book.himalayanguardian.com and embeds inside your website.
  • Uses your agency slug and publishable key to load your configuration.
  • Displays your logo, primary colour, and footer copy, all set in the HGN dashboard.
  • Handles the whole flow: trip details, traveller profiles and documents, plan selection, terms acknowledgement, and payment.
  • Redirects the customer after payment to your return URL, or to the HGN hosted result page.

How it works

flowchart TD
    A["Customer visits<br/>your-agency.com/insurance"] --> B["Your page loads a<br/>full-page iframe"]
    B --> C["book.himalayanguardian.com/&lt;slug&gt;<br/>?mode=full&amp;pk=&lt;key&gt;"]
    C --> D["Customer completes<br/>the booking flow"]
    D --> E["Customer clicks Pay"]
    E --> F["Top-level window navigates<br/>to the payment gateway"]
    F --> G["Customer pays"]
    G --> H["Gateway redirects to your<br/>return URL, or the HGN<br/>hosted result page"]

Note step 6: when the customer pays, the top-level browser window navigates to the gateway — the payment page does not render inside the iframe. This is why the iframe needs allow="payment; clipboard-write" and must not carry a sandbox attribute.

This pattern keeps your domain visible to the customer while HGN maintains the booking flow, payment logic, and product rules centrally.

Quick reference

The widget URL always takes this shape:

https://book.himalayanguardian.com/<your-slug>?mode=full&pk=<your-pk>

With an optional return URL:

&return_url=<your-https-return-url-url-encoded>

The one rule

Embed that URL as a full-page iframe at 100vw × 100vh. Do not add a wrapper, a sandbox attribute, extra query parameters, a different mode value, or any page chrome around it.

Browser support

Browser Supported versions
Chrome, Safari, Firefox, Edge Last two major versions
iOS Safari 14 and above
Android Chrome 90 and above

The widget is designed mobile-first and supports full-page responsive use.

What you can and cannot change

Item How to change it Notes
Logo Upload in the HGN dashboard Appears in the widget header
Primary colour Set in the HGN dashboard Buttons, focus states, accents
Footer copy Set in the HGN dashboard Appears in the widget footer
Return URL Append return_url to the iframe source Optional. Otherwise the HGN hosted page is used
Booking flow steps Not configurable Driven by insurance product requirements
Available routes and plans Managed by HGN Backend-driven
Languages English only at launch More may be added later

Branding is configured once in the dashboard and applies automatically. You do not need to change code when branding changes.

In this section

Other ways to integrate

The Booking Widget is the middle of the three HGN integration approaches.

Approach What it gives you
1 Referral Link A tracked link on your site. No code, set up in minutes
3 API Integration Full control, built into your own system

Compare all three →