Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Whatfix flow walkthroughs can be embedded as a slideshow slideshows using HTML5/IFrame styles. This article explains the IFrame style. Almost all the 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.

...

Code Block
<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

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 flows, this is to increase the user engagement by recommending more flowswalkthroughs 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/

Info
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 will be is launched as a new page/tab of on your web browser.

Image Removed

Image Added

Custom slideshow size

Whatfix uses three sizes to captures images for every step in three sizes - full screen, 600px width & 400px width. Slideshow will use displays full screen images when you want IFrame to have custom size. Full size images are scaled down (at client side) to suit required dimensions. The Aspect ratio for an image is ensured 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)

Info
Note Remember that choosing full images get downloaded which might result in using more increased bandwidth usage.

Hiding "see live" button

"The see live" option  option lets the user see the instructions live inside the application on which flow is the walkthrough was captured. In some situations, you may when users do not have access to the application to perform "see live". You , you can turn off "see live" button in such cases option.

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