It's possible to create an email using HTML, but it is recommended to use the drag-and-drop editor instead. The HTML editor doesn't allow you to add advanced personalization based on your DI project's data. If you still want to use the HTML editor, you will need to structure your content and create your own style. HTML edition can be useful in the case you have an HTML template created outside of Dialog Insight.
Access path: Communications → Emails |
Step 1: Create the Email
When you create a new email, select the HTML option. As you would for the standard emails in drag-and-drop mode, you must indicate a communication type, a subject and a sender.
Resources |
Step 2: Add an Opt-Out Link
To add an opt-out link that is configured by DI, click Link a DI tool under Link Library, then click Optout:
Add the link for the language of this version. If you have several languages for this email, repeat this action for each language (version).
There is a technical constraint for the opt-out link. You must insert in the HTML version AND in the Plain-text as well for it to be accepted. 
Step 3: Add Style
For the CSS style, you can either add it to a <style> tag inside the <head> or you can add it inline through the HTML content.
Step 4: Add Content
To add content, you have 3 modes:
For the HTML code, make sure to copy it into the HTML view.
When you want to insert content, such as an image or personalization, using tools in the left panel, place the cursor where you want to add the content.
It is recommended to save your changes frequently to avoid losing content.
Using alternate text for images is important, as most images are now blocked when recipients first open their messages. This text informs the recipient even if the images are not displayed.
Example: <img src="http:// repsolution.com/images/myimage.gif" width="10" height="10" alt="Text to be displayed when the image is not displayed">.
Since images are only called when the message is opened, they must all be accessible via the Web and therefore have an full and absolute URL address (http://...).
It is very important that your <img src=…> tags contain info on the height and the width to avoid altering the message structure. In addition, make sure to reduce the size of your images to their minimum size so they display quickly.
The Preview with text option lets you see how the image is aligned with the text.
→ Learn More on Using Images in Emails
Example: Hello [[=Contact.f_FirstName;]],
| Operational | Type of link that lets you add a coded link in the message that triggers an automatic action. An operational link can be used to register responses to an invitation such as I will be there and I cannot attend, so that each time a recipient clicks on either link, the response is automatically registered in the corresponding field in the contact's profile. These links are created via Configuration > Messages > Operational links. * If you use both V1 et V2 messages, you will also need to specify the version of the link to use. |
| Web version | Type of link that simply adds a link in the message that lets the recipient open the same message in a Web browser. Customization and statistic options are still active in the Web version. In addition, there is the full page preview option that offers the ability to display the message in its full version, without customization (without From, To, Subject and Date), and an option to hide the link in the Web version. The heading text will generally display based on the browser language of the recipient. So a French browser will show headers in French. The languages available are fr-CA and en-US (for French and English, respectively). |
| Opt-out | Type of link that lets you add an opt-out link in the message, which is mandatory for all messages except for automated messages sent on request. This will add the following line in the source code of your message. Example <a href="[[=Message.Optout("en-CA");]]">Opt-out</a>. |
| Contest | Type of link that opens a contest. |
| Survey | Type of link that opens a survey. |
| Event workflow | Type of link that lets you add a link to an event that was created as part of a workflow. |
| Contest workflow | Type of link that lets you add a link to a contest that was created as part of a workflow. |
| Profile update workflow | Type of link that opens a profile update form that was created as part of a workflow. |
| Workflow | Type of link that redirects the recipient to a workflow process. |