# Format reward descriptions with markdown

{% hint style="info" %}
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.
{% endhint %}

***

## About markdown in the Loyalty Microsite

[Markdown is a lightweight markup language](https://www.markdownguide.org/basic-syntax/) 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 |
| ----------------------------------- | -------------------------------- |
| ![](/files/FLFLb17I8Sol2ssONOqe)    | ![](/files/ge7lFIXFaPs9M4gftzml) |

***

## 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.

```markdown
# 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 `_`.

```markdown
**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.

```markdown
* 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
```

### **Links**

* 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>`

```markdown
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>
```

{% hint style="danger" %}
**Opening external links in the same window is not supported in&#x20;*****embedded*****&#x20;Loyalty Microsites.**

Embedded microsites only support linking to microsite pages in the same window (i.e. /activity, /terms, /profile etc.)

If you need to link to any page other than another microsite page, you must use the second synax to open the links in a new window.
{% endhint %}

### **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.**

```markdown
![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.

```markdown
***
---
___
```

### 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>`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kbase.whitelabel-loyalty.com/product/interfaces/white-label-interfaces/loyalty-microsite/loyalty-microsite-tutorials/format-reward-descriptions-with-markdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
