How do I format Campaign messages?
Campaign messages can include user-based context variables. You may use variables to quote the targeted user full name, their country, or even their company (if it's known).
Markdown Campaigns
Campaigns are formatted with Markdown by default. Markdown is a simple formatting language commonly used.
Markdown formatting reference
You can format your Markdown messages the same way you format your Crisp messages.
Check out our Markdown reference for Crisp messages; Campaigns are formatted the same way with Markdown.
How to use variables?
Variables are added to your messages using the following format: {{ variable_name }}
. A recognized variable block will be expanded into the corresponding variable value (ie. {{ name.first }}
can become John
, or be empty if user name is unknown).
If you need to add a fallback value if there is no value to be replaced, use the following format: {{ variable_name | "Fallback text value" }}
.
Which variables are available?
You can use the following user variables in your 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" }}
(replaceyour_key
with a data key you use) - Custom event data:
{{ event.data.event_data_key }}
(replaceevent_data_key
with the data key you are using)
Notice: if a value is unknown for a given user, the variable will be replaced with empty text.
Usage example
You can find below a sample message using variables:
Hello {{ name.first }}, how are you doing?
Wow, you are living in {{ city | "Unknown city" }}, {{ country | "Unknown country" }}! :)
Cheers.
HTML Campaigns
Campaigns can also be formatted using advanced HTML code. HTML is more powerful than Markdown, but also more complex. Using HTML, you can create your own email templates.
Base HTML structure
A base normalized HTML structure is required so that you can save your HTML campaign. Crisp will warn you if the base HTML structure is not there, or invalid.
The base structure you need to start from is as follow:
<html>
<body>
<!-- Your content here -->
</body>
</html>
Trackers in HTML campaigns
Trackers are automatically included in your HTML campaigns, once you hit the send button. You will see both email opens and link clicks in all your HTML emails.
Unsubscribe link
You can use the template tag: {{ url.unsubscribe }}
to generate an unsubscribe link for the email.
For instance, you may append at the end of your HTML email the following link:
<a href="{{ url.unsubscribe }}">Unsubscribe from emails</a>
Recommendations for your HTML campaigns
As you may know, custom HTML in email can be tricky. Since all email clients are not created equal, you need to make sure your HTML renders properly in all of them before you hit send. This section lists the good practices when sending HTML emails.
1. General layout
- Your emails should not be more than 800 pixels in width
- Use grid based layouts and avoid floating elements eg. avoid
float: left;
- Use cross-platform fonts
- No JavaScript is allowed in your emails
2. HTML structure
- Use an XML transitional doctype to ensure maximum support (see below):
<!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>
- Use HTML tables to organize your layout (ie.
<table>
element) - Validate your HTML structure against the W3C HTML validator before you send the email
3. CSS styling
- Avoid legacy inline CSS (all modern email clients now support CSS in the
<style>
element) - Declare all your CSS in a single
<style>
element in the email<head>
- Do not nest CSS classes, as some email clients don't support this (avoid
.class1.class2
, prefer.class2
right away)
4. Spam filters
- Test your email spam score against Mail Tester before sending it
- Avoid marketing & naughty words in your email text, those are seen as negative by spam filters
- Avoid flashy buttons and backgrounds (eg. avoid red links and buttons)
5. Responsive layout
- Do not forget mobile clients; make your emails responsive
- You can safely use Media Queries at the end of your
<style>
declaration (it is important to put them at the end, some email clients don't like them to be in the middle) - Ensure you use the
viewport
meta tag in your HTML (see below):
<meta name="viewport" content="width=device-width, initial-scale=1" />
6. Legal requirements
- Any email you send is legally required to show an unsubscribe link in the email footer (see code below):
<a href="{{ url.unsubscribe }}">Unsubscribe from emails</a>
{{ url.unsubscribe }}
tag does not appear in your HTML code. This is to ensure you implement the proper legal requirements for sending emails. Make sure you included the {{ url.unsubscribe }}
in a link href
attribute.Example HTML template baseline
You can find below a template baseline code you can use as a starting point for your HTML campaign. All proper CSS resets are done, and the recommended HTML structure is used.
<!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: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-stretch: normal;
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>
Updated on: 22/05/2025
Thank you!