About
Embedding a demo in a web page is a great way to give website visitors sight of your new or updated offering.
Whether you're looking to generate more leads, or create an onboarding portal, you can embed a demo in a web page for an all-in-one solution.
Before you start
Your demo’s now going to be part of a broader picture sitting alongside other content on the web page. So here are some things to consider:
- Iframe size: Do you want the demo full size or not? If it’s not full size, will the HTML pane that you create be large enough to view the content and Guides easily?
- Embeds work the best when sized larger than 800px wide, and optimally 1024px and above.
- When you screen capture and you know you will embed the demo, consider resizing your screen to the same size as your embed container.
- Complementary content: The other content on the web page should be complementary to the demo and not detract or conflict with it.
- Demo duration: Is the demo a suitable length when you take into account what else viewers will be doing on the website?
- UTMs: Currently Walnut does not support passing UTMs into the iFrame of the embedded demo.
Embed demos
> To embed a demo on a web page:
- Navigate to your library, select the demo, click the 3 dots and select Get embed code. A screen opens.
- Copy the embed code and paste into your web page.
- If you want the demo to use the full width of the browser window, set the toggle Full page layout to ON, otherwise simply click Copy embed code as is.
- Paste the embed code in your desired section on your webpage. The width and height are set to occupy 100% of the space provided, but you can change these values as needed.
- By default, a Walnut Watermark will appear on the bottom left side of the demo. This promotes awareness of the Walnut product and provides data transparency. For custom domains (a paid feature), the watermark is removed.
- Preview on the web page to check your settings (read on). Verify that:
- Guides and links work as expected.
- The position of the demo and the demo size (full page or not) show the demo off to best effect in the context of the rest of the page’s content.
Summary of email parameters
Here is a list of tools used and their associated email params:
| Hubspot | {{walnut_demo_link}}&email={{contact.email}} |
| Intercom | {{walnut_demo_link}}&email={{email}} |
| Pardot | {{walnut_demo_link}}&email={{Recipient.Email}} |
| Salesloft | {{walnut_demo_link}}&email={{email_address}} |
| Outreach | {{walnut_demo_link}}&email={{email}} |
| Marketo | {{walnut_demo_link}}&email={{lead.Email Address:default=noemail}} |
Depending on your demo link settings, the {{walnut_demo_link}} should resemble the following example:
https://app.teamwalnut.com/player/demoId=19408b9-08b9-08b9-a8cb9-&showGuide=false&showGuidesToolbar=true&source=app