# Content Formatting

## General Formatting

With any formatting need (paragraph breaks, bold, etc.) use `#MARKDOWN` for the best presentation. To format content, you will need to work in code view. Always review your updates once published to your chat.

{% tabs %}
{% tab title="Font Size" %}
If you'd like to adjust the font size in all or a portion of a specific response, apply the following in code view:

{% code overflow="wrap" %}

```
<span style="font-size: 12px;">YOUR TEXT</span>
```

{% endcode %}
{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FfPUZF0rBObfeFlCBCLA6%2Fimage.png?alt=media&#x26;token=bb50ce42-d57b-469f-8e0c-0a8439028c88" alt="" width="563"><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FemXlVVAJnCFqOwRIDzW8%2Fimage.png?alt=media&#x26;token=fd24771d-d02f-4608-937b-bb5ff5602193" alt="" width="370"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Line Breaks" %}
Add spacing by using the <mark style="background-color:blue;">`enter`</mark> key.&#x20;
{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F9suZZqp6Gy6iRQkknw4b%2Fimage.png?alt=media&#x26;token=08954a5c-0796-4eff-9cf4-7db3eb907386" alt="" width="556"><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FgJiteCozoY2Fl8nIj6N0%2Fimage.png?alt=media&#x26;token=b16c44cd-4f7c-4426-a1c4-ef359cc016a9" alt="" width="484"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Center Text" %}
Add the following within a response to center your text:

```
<div align="center">
YOUR TEXT
</div>
```

{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FUgUdTERH1k6LBo7nSEXp%2Fimage.png?alt=media&#x26;token=5df1ce5b-eaee-4c5f-be57-1a8ed53409d5" alt=""><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FEyrmCbdb0UaOwgpRfVLo%2Fimage.png?alt=media&#x26;token=01bd05f9-78cd-41e1-bc1f-5fa525f501b0" alt="" width="375"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Length" %}
Limit responses to **3-4 sentences** so that the user can easily read the chat's responses.
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Character Limits" %}
There is no strict character limit; however, we recommend staying around **300** to eliminate excess scroll for the end user.
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Header" %}
Add the following within a response to create a response header:

```
<H2>HEADER TEXT</H2>
```

{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FOsZw5WxFCBm0gTlanNKp%2Fimage.png?alt=media&#x26;token=168225e1-055b-4ea6-9e55-01b25b5df560" alt="" width="563"><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FGNlNC3VZMxE0XTZK0Eiz%2Fimage.png?alt=media&#x26;token=9504dea5-8bd5-4674-9ebc-66d85bc233d5" alt="" width="467"><figcaption><p>Resposne View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Bold" %}
Add `**`around the part of the sentence.&#x20;
{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FfoNUTWouBMQjDMYK7nBu%2Fimage.png?alt=media&#x26;token=3297a103-1ec3-44df-beab-9485bab77bb2" alt="" width="563"><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FzZ2Pz7KoMH30z8eusVg8%2Fimage.png?alt=media&#x26;token=ec00bcb7-8457-4a97-bc68-bf2156fb4611" alt="" width="484"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Italics" %}
Add \_ to the beginning of the text and to the end.
{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FdWfizGC6FjBy3DzGTqHh%2Fimage.png?alt=media&#x26;token=3de6d482-bf3a-4b49-8770-8d7f3bb63ab3" alt="" width="554"><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FaKC3l5UP1P6PShkRX8JE%2Fimage.png?alt=media&#x26;token=810bc923-4a0f-4514-bd42-06b4a5f47fbd" alt="" width="494"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Bold + Italics" %}
Add `***` around the part of the sentence.
{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FaNHrSrp11cmDhXYkQ5f4%2Fimage.png?alt=media&#x26;token=7cfa8d2a-d75e-448d-b320-9ab1d7c695d2" alt="" width="548"><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FuAcvpOdH8orZAGBXmaUS%2Fimage.png?alt=media&#x26;token=d59f1b1e-25c0-4e87-ab5e-11d4caf0da46" alt="" width="488"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Hyperlinks" %}
Ensure your content type is set to "MARKDOWN" and not "TEXT" or "HTML. Add the following formatting to your link \[Visit Google]\(<https://google.com>)

{% hint style="warning" %}
It is important to include the full link with "https\://" unless adding an app deep link.
{% endhint %}
{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F0q8zScpnTLZSoV7NJtvI%2Fimage.png?alt=media&#x26;token=8b2e18ec-57ba-4473-8afd-cd4c2edb3ec8" alt=""><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FQLk3lKOJ3pkvNKPr9VTU%2Fimage.png?alt=media&#x26;token=15f95789-be13-443f-b133-2cd8f183c7a3" alt="" width="523"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Phone Numbers" %}
Within the response copy's code view, you’ll format the contact information as follows:

```
[555-123-4567](tel:555-123-4567) 
[555-123-4567, option 2](tel:5551234567,2)
```

{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FXsoEpffterfjT2EGHlgq%2Fimage.png?alt=media&#x26;token=821bd204-ad88-40ee-ad0f-fb6074ae8ada" alt="" width="563"><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FYFHmZJQogy4TY18Il5j3%2Fimage.png?alt=media&#x26;token=7e45369f-ce32-4b02-ba3a-199770900ff0" alt="" width="483"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Emails" %}
Within the response copy's code view, you’ll format the contact information as follows:

```
[MyDragonisonFire@gmail.com](mailto:MyDragonisonFire@gmail.com)
```

{% endtab %}

{% tab title="Examples" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FIIaD3wrhzNp3lCSMY1hx%2Fimage.png?alt=media&#x26;token=81483e8f-e0cd-4492-9e3b-fb9739d500a1" alt=""><figcaption><p>Code View</p></figcaption></figure>

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FCJ6d4JmM7D7Uiz7dtzhP%2Fimage.png?alt=media&#x26;token=b597e79d-5177-4a24-920f-42eba826e468" alt="" width="486"><figcaption><p>Response View</p></figcaption></figure>
{% endtab %}
{% endtabs %}

## **Facebook Messenger Formatting Requirements**

* The response copy must not exceed 600 characters.&#x20;
* A button name cannot be longer than 20 characters.&#x20;
* Facebook will only support up to 3 buttons in a single response.
* A quick reply name cannot be longer than 20 characters.
* Facebook will only support 10 quick replies in a single response.
