Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including sense-media-box with all npm packages installed. Try it out:

sense-media-box lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("sense-media-box/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

sense-media-box v0.4.5

Include web pages, videos, images and much more into your Qlik Sense app.

Media Box for Qlik Sense

Include web pages, videos, images and much more into your Qlik Sense app.

(TOC generated by verb using markdown-toc)

Purpose and Description

The idea of this solution is to bundle the usage of several media-types into one Visualization Extension to be used within Qlik Sense.

As of now the following media types are currently supported:

  • HTML (+CSS)
  • Image from Url
  • Image from Library
  • Video
  • Web sites







  1. Download the latest version
  2. Qlik Sense Desktop
    • To install, copy all files in the .zip file to folder "C:\Users%USERNAME%\Documents\Qlik\Sense\Extensions\sense-media-box"
  3. Qlik Sense Server


After installing the Visualization Extension and dropping it onto a sheet in Qlik Sense follow these steps:

Define the media type

Depending on the selected media type you'll then see different options in the property panel:

Media type Html

  • HTML - Define either inline HTML or reference to a field
    ='<div style="font-weight:bold;">inline HTML</div>'


    HTML, HtmlAsset
    'This is some <b>bold</b> test', 'Some Html'
    'This is another test<br/><br/>with breaks<br/>and<br/>another break', 'Some Html with breaks'
    '<div style="font-weight:bold;color:red;">Inline style</div>', 'Some Html with inline style'

then use


Media type Image

  • Image Source (Url) - Define the Url for the image to be embedded.
  • Vertical Alignment - Vertical alignment of the image, defaults to "top".
  • Horizontal Alignment - Horizontal alignment of the image, defaults to "left".
  • Image aspect ratio - Either "keep size" or "best fit", which uses the maximum available width.

Media type Video

  • Video type - Define the type of the video to be embedded, possible values: MP4
  • Video poster image - Define the preview image for the video, possible values: any valid URL to a .png/.jpeg file
  • Video Url - Url to the video

Media type Website

  • Web site (Url) - Url of the website to be embedded, any valid website Url
  • Scrollbars - Behavior of scrollbars, Auto, Always On
  • Interaction - Define whether interaction with the website should be possible or not, defaults to Off

Testing the visualization extension

Here are some samples how to test if the MediaBox works for you:


Video poster image:
Video source:

Change Log

Have a look at CHANGELOG.yml


Pull requests and stars are always welcome. For bugs and feature requests, please create an issue. The process for contributing is outlined below:

  1. Create a fork of the project
  2. Work on whatever bug or feature you wish
  3. Create a pull request (PR)

I cannot guarantee that I will merge all PRs but I will evaluate them all.

Roadmap & Todos

See here

Known Issues

  • Video doesn't work in Qlik Sense Desktop but in local browser or Qlik Sense server.
  • Some websites do not allow to be included via Iframe (which is used for the media-type website). You'll see a corresponding message in your browser's debug log.


Stefan Walther


Copyright © 2018, Stefan Walther.

This file was generated by verb-generate-readme, v0.6.0, on January 14, 2018.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free