Format reward descriptions with markdown

This article is only applicable to clients using our Loyalty Microsite as their customer interface. Markdown support is not yet available in the Loyalty Mobile App.

If you're using your own interface, rendering markdown is something you can optionally include in your interface implementation and does not require any additional configuration on the White Label Loyalty side.


About markdown in the Loyalty Microsite

Markdown is a lightweight markup language used to create formatted text using a plain-text editor. It's simple and easy to read, even in its raw form.

The Loyalty Microsite will render markdown formatting in your reward descriptions on the reward view page. This allows you to transform your reward descriptions from plain-text into rich text by incorporating options like bold and italic text, links, images, headings etc.

Only reward descriptions support markdown formatting.

Reward description without markdown
Reward description with markdown


Supported formatting

The following formatting is supported by the Loyalty Microsite

Headings

To create headings, use the # symbol followed by a space. The number of # symbols indicates the heading level.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Bold and italics

  • Bold: Surround the text with ** or __.

  • Italic: Surround the text with * or _.

**This is bold text**
__This is also bold text__
*This is italic text*
_This is also italic text_

Lists

  • Unordered lists: Use *, -, or + followed by a space.

  • Ordered lists: Use numbers followed by a period and a space.

* Item 1
* Item 2
  * Subitem 2.1
  * Subitem 2.2
  
1. First item
2. Second item
  2.1. Subitem 2.1
  2.2. Subitem 2.2
  • To create a link which opens in the same window, use the following syntax:

    [link text](URL).

  • To create a link which opens in a new window, use standard HTML link syntax:

    <a href="URL" target="_blank">link text</a>

Open link in same window
[White Label Loyalty](https://www.whitelabel-loyalty.com)

Open link in new window
<a href="https://www.whitelabel-loyalty.com" target="_blank">White Label Loyalty</a>

Images

To add an image, use the same syntax as links but with an exclamation mark ! at the beginning: ![alt text](image URL). You must specify alt text for the image to display.

![WLL Logo](https://example.com/logo.png)

Horizontal Rules

To create a horizontal rule, use three or more asterisks ***, dashes ---, or underscores ___ on a line by themselves.

***
---
___

Bonus Formatting Options

Our markdown rendering will support some limited HTML. For example:

  • Changing text colour using <font color="red">this syntax</font>

  • Underline text using <ins>this syntax</ins>

Last updated

Was this helpful?