Hi Dealer,

Thank you for completing your enrollment.

To display your final product catalog on your website, please follow the required steps below to set up your embedded page. This setup is essential to ensure the catalog displays correctly, loads all categories, and stays fully synced and responsive across devices.

Dealer Embed Setup

Follow these required steps and paste all code blocks exactly as shown. This setup is mandatory to enable the complete product catalog experience.

Once installed, your page will:

  • Display all four product categories
  • Maintain responsive layouts
  • Automatically sync the iframe height to prevent internal scrollbars

Preview Your Customizations

If you would like to preview your customizations before installing the embed, please click the link below:

Preview your customizations

Important setup note

  • The parent-viewport-helper.js script must be included only once per page (ideally in the <head>).
  • All four category blocks below are required and must be added.
  • Create one subpage per category: Stationary Generators, Mobile Generators, Industrial Transfer Switches, and Stationary Battery Energy Storage.
  • Each category subpage must include the site navbar, one matching Generac embed block, and the site footer.
  • The page hero is optional and can be shown or hidden based on dealer preference/configuration.
  • Each category requires its own div with a unique id.
  • Keep data-mode="iframe" to ensure automatic height synchronization.

The parent-viewport-helper.js file listens for height updates from the embedded catalog and applies them to the parent page. It also shares viewport position/size data and handles parent scroll lock for modal dialogs. Loading it in the <head> ensures this bridge is ready before embeds initialize, preventing clipped content, double scrollbars, modal positioning issues, and layout glitches on mobile and desktop.

Step 1: Global script (once per page) 

<!-- Include only once per page, ideally in the <head> -->
<script src="https://energysystems.generac-dealers.com/sites/generac-dealers.com/pages/js/parent-viewport-helper.js"></script>

Step 2: Stationary Generators (Required)

<!-- Embed container inside the <body> -->
<div id="generac-stationary" style="overflow:visible; min-height:400px;"></div>
<!-- Embed script below embed container -->
<script src="https://energysystems.generac-dealers.com/sites/generac-dealers.com/pages/js/embed.js"
    data-url="https://energysystems.generac-dealers.com/products?category=stationary-generators"
    data-target="generac-stationary"
    data-mode="iframe">
</script>

Step 3: Mobile Generators (Required) 

<div id="generac-mobile" style="overflow:visible; min-height:400px;"></div>
<script src="https://energysystems.generac-dealers.com/sites/generac-dealers.com/pages/js/embed.js"
    data-url="https://energysystems.generac-dealers.com/products?category=mobile-generators"
    data-target="generac-mobile"
    data-mode="iframe">
</script>

Step 4: Industrial Transfer Switches (Required)

<div id="generac-switches" style="overflow:visible; min-height:400px;"></div>
<script src="https://energysystems.generac-dealers.com/sites/generac-dealers.com/pages/js/embed.js"
    data-url="https://energysystems.generac-dealers.com/products?category=industrial-transfer-switches"
    data-target="generac-switches"
    data-mode="iframe">
</script>

Step 5: Stationary Battery Energy Storage (Required)

<div id="generac-bess" style="overflow:visible; min-height:400px;"></div>
<script src="https://energysystems.generac-dealers.com/sites/generac-dealers.com/pages/js/embed.js"
    data-url="https://energysystems.generac-dealers.com/products?category=stationary-battery-energy-storage"
    data-target="generac-bess"
    data-mode="iframe">
</script>