Skip to content

WordPress

The widget needs a page containing only the iframe — no theme header, navigation, or footer. WordPress themes add all three by default, so the reliable approach is a dedicated page template rather than dropping an iframe into the editor.

Read the integration guide first

This page covers WordPress mechanics only. Get your agency slug and publishable key, and understand the return URL choice, in Integration.

Recommended: a custom page template

Works with any theme and gives you complete control of the markup.

1. Create the template file

Add this file to your child theme — or your theme, if you do not use a child theme:

wp-content/themes/your-child-theme/page-hgn-booking.php
<?php
/*
 * Template Name: HGN Booking Widget
 *
 * Renders the HGN booking widget as a full-page iframe.
 * Deliberately omits get_header() and get_footer().
 */
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="robots" content="noindex" />
  <title>Book trek insurance — <?php bloginfo( 'name' ); ?></title>
  <style>
    html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
    .booking-frame { display: block; width: 100vw; height: 100vh; border: 0; background: #fff; }
    /* The admin bar only appears for logged-in users, but it shifts the iframe. */
    html { margin-top: 0 !important; }
    #wpadminbar { display: none; }
  </style>
  <?php wp_head(); ?>
</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>
  <?php wp_footer(); ?>
</body>
</html>

Replace your-agency-slug and pk_live_XXXXXXXX with your values.

2. Create the page

  1. In the WordPress admin, go to Pages › Add New.
  2. Title it something like Book Trek Insurance.
  3. Set the permalink to insurance.
  4. Leave the content completely empty.
  5. In the sidebar, under Page Attributes › Template, choose HGN Booking Widget.
  6. Publish.

Appearance › Menus, add a custom link to /insurance with the text Book trek insurance.

Alternative: a page builder canvas template

If you use a page builder, most ship a blank template that strips theme chrome.

Builder Template to choose
Elementor Elementor Canvas
Beaver Builder No Header/Footer
Divi Blank Page
WPBakery A blank or fullwidth template, depending on theme

Then add an HTML widget containing:

<iframe
  style="display:block; width:100vw; height:100vh; border:0; background:#fff;"
  src="https://book.himalayanguardian.com/your-agency-slug?mode=full&pk=pk_live_XXXXXXXX"
  title="Book trek insurance"
  allow="payment; clipboard-write"
></iframe>

Canvas templates often keep page padding

Builders frequently add section padding or a max-width container that leaves the widget in a narrow column with gaps. In the section settings, set padding and margin to 0 and the content width to full. If you cannot remove it, use the page template instead.

Plugins that embed iframes via shortcode place the widget inside your theme's content area, so it renders below your header with your footer underneath, in a constrained column. That produces exactly the duplicate-navigation and scroll problems the iframe-only rule exists to prevent.

Use a page template or a canvas template instead.

WordPress-specific problems

Problem Cause and fix
Widget appears below your site header The page is using a normal template. Assign the HGN Booking Widget template, or a builder canvas template
Widget sits in a narrow column with white space around it Theme or builder content-width and padding. Set section padding and margin to 0 and use full width
A grey bar at the top, only when you are logged in The WordPress admin bar. The template above already hides it. Confirm in a private window
Two scrollbars, or the page scrolls behind the widget overflow: hidden on html, body is missing or being overridden by the theme. Add !important if needed
Template does not appear in Page Attributes The file is in the wrong directory, or the Template Name: comment is missing or malformed. It must be in your active theme's folder
Changes to the file do nothing A caching plugin or host page cache. Purge it, then hard-refresh
Widget works logged in, not logged out Almost always a caching plugin serving a stale version. Exclude /insurance from caching

Exclude the booking page from caching and optimisation

Page caches, "remove unused CSS" tools, and lazy-load plugins can all interfere. Add /insurance to the exclusion list of your caching and optimisation plugins.

Checklist

  • Template file added to the child theme
  • Slug and publishable key filled in
  • Page created with empty content and the template assigned
  • Permalink set to /insurance
  • Menu link added
  • Checked in a private window while logged out
  • Checked on a phone
  • /insurance excluded from caching and optimisation plugins

Next steps