Using Markdown to Format Text Tiles

As noted elsewhere, when adding a text tile in Customer Insights 2.1 you can use the Add Text editor to apply at least some formatting to that tile. If you're well-versed with the Markdown markup language, however, you might find it faster and easier to apply that formatting yourself. To format a text tile using Markdown, bring up the Add Text editor and then apply the formatting directing to the tile text. Here are some of the formatting options available to you:


Tables

To add a table to a tile you must enclose each cell in the table in vertical lines (|). In addition, you must type a header row, then - as the second row in the table - include at least three dashes in each cell. From there you can add as many rows as you want, making sure to enclose each cell in vertical lines. For example:

| Visualization                  | Contact        |
| ---                            | ---            |
| Users by Age                   | Ken Myer       |
| Users by Gender                | Maria Fuentes  |
| Users by Email Domain          | Toni Luc       | 

And no, you don’t have to space out each row and column exactly the same. For example, this syntax works just as well as the preceding example:

| Visualization| Contact|
| --- | --- |
| Users by Age| Ken Myer|
| Users by Gender | Maria Fuentes|
| Users by Email Domain | Toni Luc | 

Either way, you’ll end up with a tile like this one:


Boldface

To boldface text, enclose the text in a pair of asterisks. For example:

**Non-US Demographics Dashboard**

Do that and your tile will look like this:


Italics

To italicize text, enclose the text with underscore characters. For example:

_Non-US Demographics Dashboard_

That gives you a tile like this:


Numbered lists

Numbered lists are created by placing a number (any number), a period, and a blank space at the beginning of each line. For example:

1. Users by Age
1. Users by Gender
1. Users by Email Domain

Do that and your tile will look like this:


Bulleted lists

Bulleted lists are created by prefacing each list item with an asterisk and a blank space at the beginning of each line. For example:

* Users by Age
* Users by Gender
* Users by Email Domain

Do that and your tile will look like this:


Horizontal rule

Horizontal rules can be added by typing three or more dashes in a row; just make sure that you have a blank line below those three dashes. For example:

Visualizations on this Dashboard:
---

Do that and your tile will look like this:


Links

Standalone links can be added to a tile by enclosing the URL in angle brackets. For example:

<https://docs.janrain.com>

That results in a tile that looks like this one:

Alternatively, you can create a link similar to the following, a tile where the link is “hidden” within the text:

To create a link like the one shown above, you need to do two things: 1) enclose the clickable text in square brackets; and, 2) enclose the URL in parentheses (and don’t include any blank spaces between the two elements). For example:

[Identity Cloud Documentation](https://docs.janrain.com)

You can also link to other Dashboards, Looks, or Explores. After all, these items all have unique URLs:

Just use that URL (e.g., https://janrain.looker.com/dashboards/11) when configuring your link.


Images

Images can be added by using syntax similar to this:

<img src="https://www.janrain.com/themes/custom/janrainwsdpthemevone/images/janrain-logo.svg"width="75%"/>

The preceding code uses the img src tag followed by the URL of the image file enclosed in double quote marks. (You must use images available over the Internet or intranet; you cannot upload a file to Customer Insights and use that as your image source.) The additional parameter, width=“75%”, is optional: it sets the relative size of the image. The word “relative” is important here. When you first add an image to a tile, Customer Insights makes a best guess at sizing the image:

If that size is good enough then you’re done. If it’s not, add the width parameter and use a value less than 100% to make the image smaller or a value greater than 100% to make the image larger. For example, here’s the same image with the width set to 25%:


Font Color and Size

Although Markdown offers minimal support (at best) for fonts, you can use the HTML font tag to format the body of your text tile. For example, suppose you want some of your tile text to appear in red. To do that, just include the font tag, like so:

<font color="red">Visualizations on this Dashboard:</font>

That gives you a tile like this one:

There is one caveat here: you can’t use the font tag in your title or subtitle. However, you can use the b and the em tags to include boldface and italicized text in the title or subtitle:

But what if you wanted a big red title for your tile? In that case, you can leave the Title field blank, and format the first line in the Body using an HTML tag similar to this:

<font color="red" size="6">Janrain Demographics</font>

That gives you a tile like this: