Skip to content

Integration

Everything you need to embed the booking widget on your site. Budget about 15 minutes.

Before you start

Collect these values from your HGN account manager, or from your agency dashboard once it is provisioned.

Value Example Where it goes
Agency slug annapurna-trails The iframe URL path
Publishable key pk_live_AbCdEfGhIjKlMn... The iframe URL query string

Optional:

Value Example Notes
Return URL https://your-agency.com/booking-complete Where the customer lands after payment. If unset, HGN uses its hosted result page

Branding — logo, primary colour, footer copy — is configured once in the HGN dashboard and applies automatically. No code changes are needed when branding is updated.

Where to find these in the dashboard

In the HGN dashboard sidebar, open Booking Widget › Widget Settings.

The Widget Settings page in the HGN dashboard, showing the Widget Slug and Embed URL fields under Identity & Embed, and Primary Colour and Widget Logo under Appearance

Dashboard field What it is
Enable booking widget Master on/off switch. The widget only accepts bookings while this is on
Widget Slug Your agency slug. Set this and save to generate the embed URL
Embed URL The full URL to put in your iframe. Copy this and give it to your developer
Primary Colour Buttons, focus states, and accents inside the widget
Widget Logo Shown in the widget header. Managed on your Company Profile

The publishable key is not in the dashboard

Contact the Himalayan Guardian team to be issued your pk_live_... publishable key. The dashboard gives you the slug and embed URL; the key is issued separately.

Turn the widget on before testing

The status badge at the top of the page reads Disabled until you enable it. A disabled widget will not accept bookings, which looks identical to a broken integration from the outside.

Five-minute quickstart

Create a page at /insurance on your website with exactly this HTML. Replace your-agency-slug and pk_live_XXXXXXXX with your own values.

insurance.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="robots" content="noindex" />
    <title>Book trek insurance — Your Agency</title>
    <style>
      html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
      .booking-frame { display: block; width: 100vw; height: 100vh; border: 0; background: #fff; }
    </style>
  </head>
  <body>
    <iframe
      class="booking-frame"
      src="https://book.himalayanguardian.com/your-agency-slug?mode=full&pk=pk_live_XXXXXXXX"
      title="Book trek insurance"
      allow="payment; clipboard-write"
    ></iframe>
  </body>
</html>

Then link to it from your navigation, hero section, trek package pages, or any relevant call to action:

<a href="/insurance">Book trek insurance</a>

Deploy, then test the booking flow end to end before sharing the link with customers.

Step by step

Step 1 — Get credentials

Contact your HGN account manager and request your agency integration credentials:

  • Agency slug — a URL-safe identifier such as annapurna-trails.
  • Publishable key — a public key such as pk_live_AbCd..., safe to include in frontend HTML.
  • Primary colour — used for buttons, focus states, and accents inside the widget.
  • Logo — shown in the widget header throughout the booking flow.

The publishable key is safe in your HTML

Unlike the Partner API client secret, a publishable key is designed to be visible in page source. It identifies your agency; it does not authorise anything on its own.

Step 2 — Build the booking page

Add a dedicated route. /insurance is usually the clearest choice; /book, /coverage, and /trek-insurance also work.

The page must contain only the iframe

Do not include your site header, navigation, footer, sidebars, wrappers, or promotional content on this page. The widget renders its own header, footer, and booking flow inside the iframe.

A clean iframe-only page prevents duplicate navigation, layout conflicts, scroll issues, and broken mobile behaviour.

Step 3 — Link to the booking page

<a href="/insurance">Book trek insurance</a>

Good places for that link:

  • Main navigation
  • Homepage hero section
  • Trek package pages
  • Insurance or safety information pages
  • Email or campaign landing pages

Step 4 — Configure a return URL

After payment, the gateway redirects the customer to a result page. You have two options.

Do nothing. If you do not configure a return URL, HGN automatically uses its hosted result page:

https://book.himalayanguardian.com/<your-slug>/payment-result

It is branded with your logo and primary colour, and shows the correct state for success, failed, cancelled, and expired payments. Recommended for the first version of your integration.

The HGN hosted payment result page showing a successful payment, branded with the agency logo and colour

Create a page such as /booking-complete, then append a URL-encoded return_url to the iframe source:

<iframe
  src="https://book.himalayanguardian.com/your-agency-slug?mode=full&pk=pk_live_XXX&return_url=https%3A%2F%2Fyour-agency.com%2Fbooking-complete"
  title="Book trek insurance"
  allow="payment; clipboard-write"
></iframe>

Two requirements

return_url must be URL-encoded and must use https://.

If you build your own result page you must verify the payment server-side. See Payment Verification.

Step 5 — Deploy and test

  1. Open your-agency.com/insurance in a browser.
  2. Confirm the HGN widget loads.
  3. Walk through the booking flow.
  4. Click Pay.
  5. Complete payment using the available test method or sandbox account.
  6. Confirm the customer lands on the correct result page with the expected status.

Content Security Policy

If your site uses a strict CSP, allow the HGN booking origin so the iframe can load:

Content-Security-Policy: frame-src https://book.himalayanguardian.com;

Merge, do not replace

Depending on your existing CSP, you may need to merge this directive with your current header rather than replacing the whole thing.

Local testing

You can test the booking page locally before deploying. Serve the HTML through any local web server and point the iframe at the production widget URL.

python3 -m http.server 8080
# then open http://localhost:8080/insurance.html

npx serve .

Next.js, Vue, Astro, or similar — use your normal development server.

For an HGN-side sandbox, request a sandbox publishable key from your account manager. Sandbox keys are separate from live keys.

Generate the code with an AI assistant

If you would rather have an AI coding assistant produce the integration, copy the prompt below into Claude, ChatGPT, Cursor, Copilot, or a similar tool. Fill in the four values at the top first.

Copy this prompt 
I'm integrating the Himalayan Guardian Nepal (HGN) booking widget into my agency's
website. Please produce the complete code for the integration.

## My setup
- Agency slug: <YOUR_AGENCY_SLUG>
- Publishable key: <YOUR_PUBLISHABLE_KEY>
- Agency display name: <YOUR_AGENCY_NAME>
- Site framework: <YOUR_FRAMEWORK>
- (Optional) Custom return URL after payment: leave blank to use HGN's hosted result
  page, or set to an https URL on my domain, for example
  https://your-agency.com/booking-complete.

## How the widget works
The widget runs at https://book.himalayanguardian.com and embeds as a single
full-page iframe on my site. The customer sees my agency's domain in the URL bar, my
agency's logo, and my agency's primary colour. Branding flows automatically from my
HGN dashboard settings.

The integration is a single HTML page on my site, typically at /insurance or /book,
that contains nothing except a full-viewport iframe pointing at the HGN widget URL.

## What I need you to produce

### 1. The booking page
A new page at /insurance on my site. Use whatever routing convention matches my
framework. For Next.js App Router, use app/insurance/page.tsx. For plain HTML, use an
insurance.html file at the site root. For Astro, use src/pages/insurance.astro.

The page must:
- Be 100vw x 100vh with nothing else on the page, no nav, and no footer.
- Contain exactly one iframe with these attributes:
  - src="https://book.himalayanguardian.com/<AGENCY_SLUG>?mode=full&pk=<PK>"
    If a custom return URL was set, also append
    &return_url=<URL-ENCODED-RETURN-URL>.
  - title="Book trek insurance with <AGENCY_NAME>"
  - allow="payment; clipboard-write"
  - Inline styles: display:block; width:100vw; height:100vh; border:0; background:#fff;
- Set <meta name="robots" content="noindex" /> on the page.
- Page title: "Book trek insurance — <AGENCY_NAME>".
- Set <meta name="viewport" content="width=device-width, initial-scale=1,
  viewport-fit=cover" />.
- Apply this exact CSS to html and body:
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

Do not add:
- The agency's nav or header on this page.
- The agency's footer on this page.
- Any padding, margin, or wrapper around the iframe.
- A sandbox attribute on the iframe.
- Any JavaScript. This page is iframe-only.

### 2. A nav link
A small HTML snippet linking to /insurance from anywhere on my site:
<a href="/insurance">Book trek insurance</a>
Adapt the styling to match my site's existing nav components if I mention any
conventions. If I have not given a framework, give plain HTML.

### 3. Optional return URL handler
Only produce this if I supplied a custom return URL above.
Create a small page at the return URL path, for example /booking-complete, that:
- Reads the status and paymentRef query string parameters on page load.
- Server-side verifies using:
  GET https://book.himalayanguardian.com/api/public/book/payment-status/<paymentRef>
  if the framework supports server-side fetch on the route. Otherwise, show a generic
  thank-you message with the paymentRef and tell me where in the code to add
  verification.
- Shows different UI for success, failed, cancelled, and expired.
- Has a Back to homepage link at the end.
If no custom return URL was supplied, skip this. The customer lands on HGN's hosted
result page automatically.

## Output format
Produce three clearly labelled code blocks, or two if no return URL was supplied:
1. The booking page: full file content with the framework-appropriate filename as the
   heading.
2. The nav link snippet: the anchor tag.
3. The return URL page, only if I supplied a custom return URL: full file content.

After the code, give me a 4-6 line "what to do next" section:
- Where to put each file in my project.
- How to deploy.
- How to test the integration.

Do not ask follow-up questions. If anything is ambiguous, use sensible defaults and
call them out in a comment at the top of the file. Use my exact agency slug,
publishable key, and agency name values in the output. Do not keep them as
placeholders.

If I gave an unusual framework, CMS, or no-code builder, output the closest reasonable
option. Use plain HTML if unsure.

## One important rule
The iframe src value must be exactly this shape, with no extra query parameters, no
different mode value, and no wrapping URL:
https://book.himalayanguardian.com/<AGENCY_SLUG>?mode=full&pk=<PK>
Only append &return_url=<URL-ENCODED> if the agency configured one.

Check what it produces

AI assistants frequently add a wrapper div, a sandbox attribute, or your site's header and footer to this page. All three break the integration. Compare the output against the quickstart HTML before deploying.

Implementation checklist

  • Agency slug received from HGN
  • Publishable key received from HGN
  • Logo and primary colour set in the HGN dashboard
  • Enable booking widget turned on
  • Booking page created at /insurance, containing only the iframe
  • allow="payment; clipboard-write" present on the iframe
  • No sandbox attribute on the iframe
  • Navigation link added
  • Return URL decided — HGN hosted, or your own page with server-side verification
  • CSP updated if you use one
  • Full booking flow tested end to end, including payment
  • Result page confirmed for success, failed, cancelled, and expired

Next steps