How To Embed Your Demo On Your Website
Each demo you create inside of your account has its own unique website/public URL.
Consensus makes it easy to embed a demo on your website to drive lead generation and educate your visitors. This is done by iframing the demo right on your webpage. Let’s walk through the steps to set up your demo right on your webpage:
Step 1: Generate a Public Link for your website
Consensus allows you to create multiple Public Links per Demo so you can track performance of each link separately.
- Navigate to Create Public Link and fill out the required fields
- Your Public Link name is how you will find this particular link for reporting purposes or to grab the link again when needed, so be mindful of your naming conventions.
- You can also set a location tag for your Public Link so you can see where your different links are being used.
- Each Public Link can have a different Lead Gate placement to allow you to test the effectiveness of lead quality vs lead conversion rate with the lead form gate at different places within your demo.
- Once you select Create Public Link, you will be taken to a modal where you can grab the Public Link URL as well as several other options. To iframe your demo on your webpage select the Copy Link option in the bottom left of the modal.
-
Step 2: Build your iframe script
The Consensus Demoplayer adapts to the size of your iframe to drive the best viewer experience at almost any size. Use the script below as a starting point to create the script you can use to place your demo on your webpage:
<iframe src="Demo URL" width="1440" height="900" frameborder="0" allowfullscreen></iframe>
- Within the iframe script, paste your Demo’s Public Link URL in place of the orange Demo URL.
- This script is set to a Full Screen player experience (1440x900). Update the pixel width and height for the iframe size you want to place on your webpage.
- Once done, your iframe script should look something like this:
<iframe src="https://play-stage16.staging.goconsensus.com/a541y97e8" width="780" height="525" frameborder="0" allowfullscreen></iframe>
Step 3: Add the script to your webpage
Now you can take your demo script and add it to your webpage. This can be used directly on a webpage or within a lightbox depending on the experience you want to give your viewers.
That’s it! Leads that are generated by your Consensus demos will show within the Track Public Link and Qualified Leads area. Check out our resources on integrating with your Marketing Automation Tool to send the lead and engagement data directly to your MAT.
Player Sizing
The breakpoint for the Demoplayer to convert to mobile view is 1200px width, this holds true across all desktop and mobile devices. Anything smaller than 1200px the player will adapt to the mobile view and highlight the experience (video, personalization, tours, etc…) at full screen (iframe size).
Full Player Mode: 1201px width and above
Within the Full Player, viewers will be able to see the selections they make as they personalize the demo along the right hand panel, along with Call to Actions and other features. This view allows them to easily access those features with the main experience at the center.
Experience Mode: 1200px width and below
Experience Mode focuses fully on the experience itself to absorb the viewer into the video, personalization or tour you want them to experience. Controls and access to other features are then easily available on hover over to ensure the viewer still feels in control of the demo.
- Hover over pulls up the play bar and top level navigation. Users can easily jump to the next feature, access related documents, and adjust feature ratings from here.
- Viewers can click on the More Features Icon to be brought down to a feature list where they can then select the feature and experience within the feature they want to jump to.
- All experiences are available within the Experience player, including Tours, ensuring you can create the experience you want for your viewers at the size you need
