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.
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 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>
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
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.
<ol>the use of “List-Style-Type” attribute is suggested.
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.
<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.
<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.
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. Include them anyway you like—SVGs, SVG sprite, or web fonts.
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.
Updated about 1 month ago