Top
Embed a Flow as Slideshow
  • 03 Apr 2024
  • 1 Minute To Read
  • Dark
    Light
  • PDF

Embed a Flow as Slideshow

  • Dark
    Light
  • PDF

Article summary

One of the outputs that can be generated from a Whatfix Flow is a slideshow. Slideshows can be embedded into an article in your knowledge base. The advantage with slideshows is that whenever there is a UI change on your application, all you need to do is update the associated Flow. The slideshow content is auto-updated in your knowledge base. The users can see the Flow as a slideshow or run them live.

your title goes here

You can generate Whatfix slideshows for a Flow in any stage, be it in Draft, Ready, or Production. To generate the slideshow, Go to the respective stage and follow the steps mentioned in this article.
clm_db_stages

Use the following steps to embed a slideshow:

  1. Click Slideshow.
    clm_db_embed_slideshow

  2. Select the language in which you want to display the slideshow content.
    Studio_Dashboard_SlideshowDefaultLang

your title goes here

This option is available only if you have translated the content in a different language in Translations. If not, skip this step.

  1. Configure the appearance and the order of your slideshow using the options available.
    Studio_Dashboard_CustomizeSlides

  2. Depending on the environment and format that you are working on, copy the respective HTML code.
    Studio_Dashboard_CopyCode

  3. Paste the copied code in your content in the place where you want to display the slideshow.

Info:
  • Changes made to the task are automatically reflected in the embedded slideshow once the associated Flow is updated.

  • If you use CDN servers, you need to move your changes to the Production stage before the updates are visible in multi formats.

  • The first page of the slideshow provides the slideshow details.

Customize the size of the slideshows

By changing the following attributes in the div element, you can control the slideshow size:

While using the Div Embed options:

data-size = "custom"

data-height = ""

data-width = ""

Div Embed

Sample div: <div data-href="//whatfix.com/deck.html" data-flow="<flow_id>" data-suggest="1" data-size="custom" data-height="700" data-width="850"></div>

While using the iFrame Embed options:

Modify the height and width properties of the inline CSS of the iFrame element.

Add height and width properties to the URL parameters.

Add "custom" at the beginning of the URL hash.

iFrame Embed

src="//whatfix.com/<ent_id>/deck.html?suggest=1&closeable=false&height=700&width=850#!custom/<flow_id>/"></iframe>

Note:
  • If you are using an image in the description field, there are chances that some parts of the image may get cut off in certain output formats.

  • Content is cut off in the article embed format if you have more than 350 characters in the description.
    broken_slide_textimg


Was this article helpful?


Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.