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).
Campaigns can either be formatted with Markdown (simple formatting) or HTML (advanced formatting). Read our guides below for Markdown and HTML.
Campaigns are formatted with Markdown by default. Markdown is a simple formatting language commonly used.
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.
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" }}.
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" }} (replace your_key with a data key you use)
Notice: if a value is unknown for a given user, the variable will be replaced with empty text.
The 'Custom data value' variable uses the user data that you can store on user profiles, from our JavaScript SDK, our HTTP REST API, or from the Contacts section of your Crisp dashboard. It can be used to store custom properties that you may re-use later on.
You can find below a sample message using variables:
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.
We recently released a wysiwyg email builder to let you modify your html template without any coding skills.
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:
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.
An unsubscribe link is legally required to appear in all your emails.
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:
Please note that the unsubscribe link won't work when receiving test campaign emails.
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.
Crisp worked hard to ensure your Markdown emails render well in all modern email clients, but with HTML emails you'll need to do the checks yourself.
Crisp cannot be held responsible if your HTML campaigns render improperly in a given email client, as we have no control over your HTML (we only do the job of relaying it; unlike Markdown campaigns where we do the actual job of generating the HTML). If you have rendering issues, check & fix them with your developer.
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
Use an XML transitional doctype to ensure maximum support (see below):
Use HTML tables to organize your layout (ie. <table> element)
Validate your HTML structure against the W3C HTML validator before you send the email
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)
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)
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):
Any email you send is legally required to show an unsubscribe link in the email footer (see code below):
Crisp will not let you save your campaign template if the {{ 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.
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.
Campaigns can either be formatted with Markdown (simple formatting) or HTML (advanced formatting). Read our guides below for Markdown and HTML.
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" }} (replace your_key with a data key you use)
Notice: if a value is unknown for a given user, the variable will be replaced with empty text.
The 'Custom data value' variable uses the user data that you can store on user profiles, from our JavaScript SDK, our HTTP REST API, or from the Contacts section of your Crisp dashboard. It can be used to store custom properties that you may re-use later on.
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.
We recently released a wysiwyg email builder to let you modify your html template without any coding skills.
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
An unsubscribe link is legally required to appear in all your emails.
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>Please note that the unsubscribe link won't work when receiving test campaign emails.
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.
Crisp worked hard to ensure your Markdown emails render well in all modern email clients, but with HTML emails you'll need to do the checks yourself.
Crisp cannot be held responsible if your HTML campaigns render improperly in a given email client, as we have no control over your HTML (we only do the job of relaying it; unlike Markdown campaigns where we do the actual job of generating the HTML). If you have rendering issues, check & fix them with your developer.
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>Crisp will not let you save your campaign template if the {{ 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: 11/03/2024
Thank you!