Most blocks allow the inclusion of custom HTML within any property that can take text using the option source code displayed with the following icon < > under the ellipses

There are several instances in which HTML can be used as a default and/or input value for settings like “Default text values”, “Rich text inserts”, etc.

🚧

Direct embedded images within HTML tags do not work in the source code blocks.

Instead reference a variable question that contains the image html.

🚧

Using HTML in any formula must use double quotes ("") to escape the HTML, not a single quote (") or single apostrophe (')

e.g. Concat("<img src=""data:image/png;base64,",[q3.base64],"""/>")

For example: Add the following code into a Label Text using the source code option

<h1>Title 1</h1>
<h2>Title 2</h2>
<h3>Title 3</h3>
<h4>Title 4</h4>
<h5>Title 5</h5>
<p>Some text here...</p>
<a href="https://www.smartiq.com/">Hyperlink using custom HTML</a>

Another useful example is implementing HTML Properties, for example Download:

Download Logo: <a href="https://www.intelledox.com/wp-content/uploads/2017/10/PNG-IntelledoxInfinitiDesign.png" download="Logo"> Click Here</a>

Right aligned text

Right aligned text can be achieved by using the float:right; CSS property as part of your question text. As per the following tag.

<span style="float:right;">Final Value</span>

Adding images to text

Images located on the internet or network can be added to question text by clicking on source code using the tag.

<img src="url"> text

Allowed HTML tags

Designers can include their own HTML styles and content within Question Text, Help Text, Labels and Rich Text Fields. However, as custom HTML can be mischievous as only certain tags and attributes are permitted.

📘

For lists <ol> the use of “List-Style-Type” attribute is suggested.

👍

Note:

The following HTML tags are permitted, however some attributes and attribute values of these tags may be blocked.

When adding attributes to tags, you must use double quotes. Single quotes will be blocked.
Eg: <span style="color:red">[q1.1]</span> will be acceptable, however <span style='color:red'>[q1.1]</span> will result in the span tag being stripped.

In formulas you can escape the double quotes with another double quote.
Eg: Concat("<span style=""color:red"">",[q1.1],[q2.2],"</span>")

<a>
<b>
<blockquote>
<br>
<caption>
<cite>
<code>
<dd>
<div>
<dl>
<dt>
<em>
<font>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<hr>
<img>
<li>
<ol>
<p>
<pre>
<span>
<strike>
<strong>
<sub>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<tr>
<u>
<ul>

The following attributes are permitted:

alt
aria- *
bgcolor
border
cellspacing
class
color
data- *
dir
download
face
frame
height
href
lang
nowrap
role
rules
scope
size
src
style
summary
target
title
type
valign
width

👍

All aria- and data- attributes are allowed.

Adding Icons

Bootstrap Icons are available for use in SmartIQ where HTML can be input or in custom CSS. These are free, high quality, open source icon library with over 1,500 icons.

To icons appear correctly they need to be converted to base64 data uri, like an inline png in an img tag. A plain svg in html will be stripped out as unknown tags.

Icons can be added to a project in SmartIQ Design from anywhere there is a rich text field that can accept HTML. Examples are question, section and column titles etc. They can be styled for color and size and accessibility options, taking on any size and color characteristics that apply to the block they are contained in.

Bootstrap Icons provide some additional information their page on Styling of icons if you wish to change the color and/or size as well as information on including Bootstrap icons in a custom CSS file.

To add an icon to a project, click on the icon on the Bootstrap Icons page and copy the code for the Icon Font.

Then in Design add the code to the source code for the field you want to include the icon in.