Embedding on a Page

The most seamless and branded way of giving access to a specific demo is to embed it straight onto a page. Our embeds can be integrated on any webpage, no matter what framework, CMS or no-code solution you are using.

To embed on any page, you can use our HTML embed code, which looks something like this:

<div
  style="
      box-sizing: content-box;
      position: relative;
      max-width: 2560px;
      aspect-ratio: 2560 / 1308;
      padding-bottom: 40px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0px 0px 1px rgba(45, 55, 72, 0.05),
        0px 4px 8px rgba(45, 55, 72, 0.1);
      overflow: hidden;
    "
>
  <script src="https://js.howdygo.com/v1.1x/index.js"></script>
  <iframe
    src="https://app.howdygo.com/embed/<publicationid>"
    frameborder="0"
    scrolling="no"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
  ></iframe>
</div>

Use-cases

You can embed demos on any web page, but some popular use-cases are:

1. Overview demos on homepages and pay per click landing pages
2. Detailed demos in feature pages
3. Demo guides in help documentation (just like this!)
4. Deep dives for new features in feature release logs

Getting the Embed Code

Pasting the copied code snippet into your website will normally do the trick, but to help integrate with some popular tools here are some more detailed guides. If you’re having trouble with your specific tool, let us know and we can help.

Inline vs Pop-up Embeds

The share modal gives you two ways to embed a demo:

• Inline embed sits on your page alongside your other content. The demo loads as part of the page and viewers can interact with it in place. This is the default copy-paste embed code shown above, and what most of the per-platform guides cover.
• Pop-up embed loads a demo in a full-screen modal when a button or link is clicked. The trigger is a small snippet you place anywhere in your page, and the demo opens over the top of your content with a close button and Escape-to-dismiss. Pop-up embeds use the HowdyGo SDK and are documented in the pop-up modal guide.

Launch Screen

A launch screen is a still preview image with a launch button on top of it. The demo only loads when a viewer clicks the button, which keeps the embed lightweight on the initial page load and lets you frame the demo with a clear call to action. Mobile viewers can be sent straight to a full-page demo instead, which fixes the cramped feel of a wide demo squeezed into a phone viewport.

Toggle Show launch screen in the share modal to enable it. You can customize the launch button text, the preview image, the overlay treatment, and how mobile viewers experience the launch.

Button text

Change the launch button label to match the rest of your page — “Watch demo”, “See it in action”, “Try the product”, etc. The button uses your demo’s brand color so it picks up your existing branding.

Preview image

The preview image is what viewers see before they click the launch button. You can pick any step from your demo to use as the preview, or upload your own image (PNG, JPG, JPEG, or WEBP) if you’d prefer a custom hero shot.

Blur and backdrop

Two toggles control how the preview image looks behind the launch button:

• Blur softens the preview image so the button stands out. Turn it off when you want viewers to clearly see what they’re about to launch.
• Backdrop adds a dark overlay tint behind the button. Turn it off for a clean, untinted preview.

Mobile launch behavior

Choose how mobile viewers experience the demo so it looks great on smaller screens:

• Play in new tab opens the demo in a new browser tab at its native size, giving mobile viewers a full-screen experience. This is the default.
• Play inline keeps the demo inside your page’s embed slot, just like on desktop.

This only affects mobile viewers — desktop viewers always play the demo in place.

Hiding the Copy Shareable Link Button

By default, embedded demos include a “Copy shareable link” button in the player controls so viewers can share the demo onward. If you would rather keep viewers on your page, toggle Hide “Copy shareable link” button in the share modal before copying the embed code.

Dynamic Variables

Just like with share links, if your demo uses dynamic variables to personalize its content, you can pass them through as URL query parameters. The only difference is that the query parameters need to be passed through to the URL of the iframe.

Taking as an example this iframe URL, https://app.howdygo.com/embed/abc123, we can pass the demo a variable called company of value Google by setting up a query parameter like this: https://app.howdygo.com/embed/abc123?company=Google.

oEmbed Support

HowdyGo demo share links support oEmbed discovery, which means platforms like Notion, Slack, WordPress, and other oEmbed-compatible tools can automatically generate rich previews and embeds when you paste a demo share link. No embed code needed — just paste the share link and the platform will handle the rest. For WordPress, our official plugin enables paste-to-embed along with shortcode and toolbar button options.

Identifying Viewers

To identify a viewer in your analytics and automatically log demo views against leads in your CRM, simply pass the viewer’s email via the URL as a query parameter. This is particularly useful for email campaigns or when manually sharing a demo with a prospect. For more advanced identification, use the HowdyGo SDK. You can view all identified viewers and their engagement data in the Identified Viewers dashboard.

To track demo events in your analytics tools, you can integrate with Google Analytics, Heap, or use custom events.

Domain Restrictions

On Pro and Enterprise plans, you can restrict which domains are allowed to embed your demos. When domain restrictions are configured, embeds on unauthorized domains are automatically blocked. Set this up from Settings > Access Controls. Learn more.