Top

Whatfix walkthroughs can be embedded as slideshows using HTML5/iFrame styles. This article explains the iFrame style. Most CMS (Content management system) or LMS (Learning management system) support iFrame embed options. You can use the parameters explained below to customize the slideshow.

Following is an example slideshow embed script

<iframe scrolling="no" frameborder="0" allowfullscreen="true" 
mozallowfullscreen="true" webkitallowfullscreen="true" 
style="width: 422px; height: 461px; "
src="//whatfix.com/deck.html?start=2&closeable=false#!micro/ff69b7c0-c3a7-11e3-9010-386077c652c2/" >
</iframe>

Altering the width of the slideshow

The slideshow comes with two pre-defined widths (normal & smaller). You can choose the width based on the size of a page where the flow will be embedded.

For smaller width imagesUse width as 422px and hash as !micro/<flow_id>/

For normal width images: Use width as 622px and hash as !/<flow_id>/

Replace <flow_id> with the ID of flow (You can get it from the URL of whatfix flow)

Skipping the introduction step

At times, You may want a user to start viewing the solution directly by hiding the introduction step. 

You can achieve this by setting start parameter value to 2 - For example //whatfix.com/deck.html?start=2#!micro/ff69b7c0-c3a7-11e3-9010-386077c652c2/

Showing suggested flows

In the last side, whatfix displays related walkthroughs that could increase user engagement with your content. Whatfix picks suggestions from the same host/author as current flow, so that suggestions are contextual.

You can show suggested flows by setting suggest parameter value to 1, for example, //whatfix.com/deck.html?suggest=1#!micro/ff69b7c0-c3a7-11e3-9010-386077c652c2/

Suggestions are not displayed for the flows from commercial accounts with controlled access.

Launch full-screen version in new page

The parameters allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" lets slideshow iframe to have full screen capability. By removing these parameters, the full-screen version is launched as a new page/tab on your web browser.

Custom slideshow size

Whatfix uses three sizes to captures images for every step - 600px width & 400px width. The slideshow displays full-screen images when you want iFrame to have a custom size. Full-size images are scaled-down (at client-side) to suit required dimensions. The Aspect ratio for an image is maintained while scaling images.

Use width & height as you prefer and set hash as !full/<flow_id>/

Replace <flow_id> with the ID of flow (You can get it from the URL of whatfix flow)

Remember that choosing full images might result in increased bandwidth usage.

Hiding "see live" button

The see live option lets the user see the instructions live inside the application on which the walkthrough was captured. In some situations, when users do not have access to the application to perform see live, you can turn off see live option.

To hide the see live, set the nolive parameter value to 1 - For example //whatfix.com/deck.html?nolive=1#!micro/ff69b7c0-c3a7-11e3-9010-386077c652c2/