Vizlib Home

Vizlib Advanced Text Object - HTML Snippets / Tips & Tricks

Example DescriptionCode


HTTP & HTTPS do not mix well, due to same-origin policy constraints. Links included in frames should match the HTTP protocol of your Qlik Sense environment. See below

Desktop = HTTP access and HTTP only frames

Server = HTTPS access and HTTPS only frames

Code example:


(your local weather)

<iframe src="" frameborder="0">

Ticker Text

Ticker text example (inspired by BBC News)
'<table style=" position:relative; left: -1%; width: 102%; height: 60px !important; "><tr style="background-color: #9C0A0D;">'&

//Image Tile Section
'<th style="  text-align: left; max-height=100%;">'& '<img src="'& '' &'"  style=" max-width: 160px; height: 40px">'  &'</th>'&

//Ticker Section
    '<marquee behavior="scroll" direction="left" scrollamount="15" style="vertical-align: middle;line-height: 40px; ">'&
    '<b>LATEST NEWS: <b/>' &
    /*IMAGE*/  //'<img src="'& maxstring(urlToImage) &'" height="auto" width="auto">   '&
    /*TITLE*/  'Title' &
    /*DATE*/  date(Today()) &


Load Custom CSS/JS 

to Qlik Sense

As an alternative to using Vizlib Sheet Menu's custom CSS, you can use the advanced text object on specific sheets to load custom css, or load in JS scripts.


Infographics help communicate data interactively for a more impactful,emotive and memorable experience.

Why not use some existing templates and connect your data to them?

See more info here:

Don't forget to follow the method above to include style and script tags where  applicable


Animations are extremely useful in telling stories with data, particularly in infographic style animations.

See more info here:

Don't forget to follow the method above to include style and script tags where  applicable

Sourcing code snippets

Code snippets can be found in a number of resources. Codepen is a great resource, which we have used in some of our example apps. See below for how we used codepen snippets to create an endlessly customisable and dynamic HTML button.

'<div style="  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius: 3px; background-color: #eceff1;'&
'background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);  background-size: 400% 400%;  animation: gradientBG 2s ease infinite;width:100%;height:95%">'


'<br><h2><br>Exporting '&

'123' // Num(Count(TransLineID),'#,##0') 

& ' rows ⬇? </h2>'

&'<br> across ' &

'ABC' // replace(GetSelectedCount(_Dimensions.Label), '0', '<u>all</u>') 
 & ' dimensions and<br>' &
'ABC' // replace(GetSelectedCount(_Measures.Label), '0', '<u>all</u>') 
 & ' measures.'



Piers is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.