> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to format Campaign messages

*Learn how to format Crisp Campaign messages with Markdown, HTML, and user variables.*

Campaign messages can be personalized with variables such as the recipient's name, country, company, custom data, or event data. You can keep formatting simple with Markdown or use HTML when you need a fully custom email template.

| Markdown is the easiest option for most Campaigns. HTML gives you more control, but you are responsible for testing how the email renders across inbox providers.

__In this guide:__
* [Format Markdown campaigns](#1-format-markdown-campaigns) → use Crisp message formatting and variables
* [Use personalization variables](#1-use-personalization-variables) → insert user, company, custom data, and event values
* [Format HTML campaigns](#1-format-html-campaigns) → build custom templates and add unsubscribe links
* [Follow HTML email recommendations](#1-follow-html-email-recommendations) → avoid rendering, spam, and compliance issues
* [Start from an HTML template baseline](#1-start-from-an-html-template-baseline) → copy a minimal template structure

---

# ${color}[#0080dd](Format Markdown campaigns)

Campaigns are formatted with Markdown by default. Markdown is ideal when you want clean text, links, light formatting, and variables without managing a full HTML template.

You can format Campaign messages the same way you format regular Crisp messages. See the dedicated guide here: [How can I format Crisp Messages?](https://help.crisp.chat/en/article/how-can-i-format-crisp-messages-ocvf0j/)

---

# ${color}[#0080dd](Use personalization variables)

Variables are inserted with this format: `{{ variable_name }}`. When Crisp sends the Campaign, the variable is replaced with the value known for that recipient.

For example, `{{ name.first }}` may become `John`. If Crisp does not know the recipient's first name, the variable is replaced with empty text unless you add a fallback.

#### ${color}[#445055](Add fallback values)

Use a fallback when the variable might be empty:

```text
{{ variable_name | "Fallback text value" }}
```

For example:

```text
Hello {{ name.first | "there" }}!
```

#### ${color}[#445055](Available variables)

__You can use these variables in Campaign messages:__
* **Full name** → `{{ name.full }}` or `{{ name.full | "Fallback Full Name" }}`
* **First name** → `{{ name.first }}` or `{{ name.first | "Fallback First Name" }}`
* **Last name** → `{{ name.last }}` or `{{ name.last | "Fallback Last Name" }}`
* **Email** → `{{ email }}` or `{{ email | "Fallback Email" }}`
* **Country** → `{{ country }}` or `{{ country | "Fallback Country" }}`
* **City** → `{{ city }}` or `{{ city | "Fallback City" }}`
* **Website** → `{{ website }}` or `{{ website | "Fallback Website" }}`
* **Company name** → `{{ company.name }}` or `{{ company.name | "Fallback Company Name" }}`
* **Custom data value** → `{{ data.your_key }}` or `{{ data.your_key | "Fallback Value" }}`
* **Custom event data** → `{{ event.data.event_data_key }}`

|| **Custom data value** uses data stored on user profiles from the Crisp JavaScript SDK, the HTTP REST API, or the Contacts section of your Crisp dashboard. Replace `your_key` with the exact custom data key you use.

#### ${color}[#445055](Example variable usage)

${color}[#33c620](✔) __Example using event data in a link:__

```markdown
Hello {{ name.full | "there" }}!

In order to complete your subscription, you can visit [this link]({{ event.data.user_dashboard_url }}) to access your dashboard.

You can also consult our latest updates related to your business use case in [our changelog](https://acme.com/changelog?business-type={{ event.data.user_business }}).
```

${color}[#33c620](✔) __Example using fallback values:__

```markdown
Hello {{ name.first | "there" }}, how are you doing?

Looks like you are living in {{ city | "Unknown city" }}, {{ country | "Unknown country" }}! :)

Cheers.
```

---

# ${color}[#0080dd](Format HTML campaigns)

HTML campaigns let you build more advanced email templates. They are useful when you need a custom layout, custom branding, or a template built by your design team.

|| Crisp also provides a [WYSIWYG email builder](https://crisp.chat/en/campaigns/wysiwyg-email-builder/) if you want to edit HTML templates without writing code manually.

#### ${color}[#445055](Start with the required base structure)

Crisp requires a valid base HTML structure before you can save an HTML campaign.

```html
<html>
  <body>
    <!-- Your content here -->
  </body>
</html>
```

#### ${color}[#445055](Understand tracking in HTML campaigns)

Trackers are added automatically when you send HTML campaigns. You can see email opens and link clicks in your Campaign analytics.

#### ${color}[#445055](Add an unsubscribe link)

||| An unsubscribe link is required in marketing emails. Crisp will not let you save an HTML campaign template if the `{{ url.unsubscribe }}` tag is missing.

Use this template tag to generate the unsubscribe URL:

```html
<a href="{{ url.unsubscribe }}">Unsubscribe from emails</a>
```

||| The unsubscribe link does not work in test Campaign emails. Test emails are useful for rendering checks, but the unsubscribe flow is only available in real sent Campaigns.

---

# ${color}[#0080dd](Follow HTML email recommendations)

Email clients do not all render HTML the same way. Before sending a large Campaign, test your template in the inboxes your audience uses most.

#### ${color}[#445055](General layout)

__Keep your layout simple and inbox-friendly:__
* **Limit width** → keep the email body under `800px`
* **Use grid-based or table-based layouts** → avoid floating elements such as `float: left;`
* **Use cross-platform fonts** → prefer fonts that render reliably across devices
* **Avoid JavaScript** → scripts are not allowed in email templates

#### ${color}[#445055](HTML structure)

Use a transitional XHTML doctype when you need broad email-client compatibility:

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <!-- Content here -->
</html>
```

__Before sending, make sure you:__
* **Use tables for layout when needed** → `<table>` remains reliable for email templates
* **Validate the HTML** → use the [W3C HTML validator](https://validator.w3.org/#validate_by_input) to catch structure issues
* **Preview the message** → check desktop, mobile, and major inbox providers before sending

#### ${color}[#445055](CSS styling)

__When styling HTML emails:__
* **Keep CSS simple** → complex selectors may not work everywhere
* **Group CSS in one `<style>` element** → place it in the email `<head>`
* **Avoid nested classes** → prefer `.button` over selectors such as `.wrapper.button`
* **Place media queries at the end** → some email clients handle them better there

Add a viewport meta tag for responsive layouts:

```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

#### ${color}[#445055](Spam and deliverability checks)

__Before sending a Campaign, review:__
* **Spam score** → test your email with a tool such as [Mail Tester](https://www.mail-tester.com)
* **Content quality** → avoid spammy wording, misleading links, or excessive promotion
* **Visual contrast** → avoid flashy backgrounds, oversized buttons, or aggressive colors
* **Legal footer** → include a clear unsubscribe link using `{{ url.unsubscribe }}`

|| Crisp renders Markdown emails for you, but HTML templates are relayed as your own custom code. If an HTML Campaign displays incorrectly in a specific email client, your template needs to be adjusted.

---

# ${color}[#0080dd](Start from an HTML template baseline)

You can use this minimal template as a starting point for an HTML Campaign.

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">
      body {
        background: #EFF3F6;
        color: #333333;
        margin: 0;
        padding: 0;
      }

      img {
        border: 0 none;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
      }

      a {
        color: #000000;
        text-decoration: underline;
      }

      a img {
        border: 0 none;
      }

      table,
      td,
      tr {
        border: 0 none;
        border-collapse: separate;
      }

      td {
        vertical-align: middle;
      }

      ul {
        list-style: none;
        padding: 0;
      }

      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 14px;
        letter-spacing: .35px;
      }
    </style>

    <title>Email Template</title>
  </head>

  <body>
    <h1>Your content goes there.</h1>

    <a href="{{ url.unsubscribe }}">Unsubscribe from emails</a>
  </body>
</html>
```