Creating an HTML Message

Why create a message in HTML mode?

Creating a message using the HTML editor is the oldest way of creating a message in Dialog Insight. In genera, you will use this type of editor if you have already created messages this way and still use these messages, or if you prefer building your messages from HTML code.

All templates are available in Drag and Drop mode, and offer a more visual and easy way to create messages. Refer to Creating a Message Using Drag-and-Drop.

How to

Access Path
  > Messages > EMail
Notes for V1 messages
The option to create V1 messages no longer exists. But it is still possible to create such new messages by duplicating an existing V1 message and editing it afterwards. V1 messages are identified by an empty V2 column. To duplicate a message, just click on the related  icon.

Set the structure of the message

  1. In the message listing page, click on Create a message
  2. To create a message in an HTML editor, you can either copy an existing HTML message or create a message from scratch by selecting Blank message.
  3. In the list of templates, select the HTML editor and click Select.
  4. In the next window, select the communication type to be associated with your message and click Continue. The communication type can be used to categorize messages, or if you have set up a consent manager, to define the opt-ins and implied consents needed to make contacts eligible to receive messages.
  5. Then message editor opens up in full screen mode, and hides the left menu, the right pane, as well as the application header, to provide you with more space to work.
    *To go back to the list of messages, and to the standard application display, with menus, just click on the icon shown in the editor's toolbar.

Define the subject and the sender

  1. Once the message editor is opened, start by specifying the subject of your message.
  2. Identify the sender by providing its name and email address, as well as the reply email address if different from the one already provided.
  3. If needed, you can personalize elements in the subject line, or in any field, adding variables, which are selected by clicking on the related  icon. Variables are created from data shown in the contact profile, company information or system information. Variables used to name the recipient are very common. For example, Hello [[=Contact.f_FirstName;]].
  4. By default, only the subject and sender's name are shown. Just click anywhere in this section to show the other options.

For more info, read the Field Descriptions.


Write the content of the message

More often, if you use this edit mode, it is because you plan on copying the HTML code of a message created elsewhere. But know that you can also create a message from scratch using the HTML editor if you want to.

  1. Start by selecting the editor of your choice, either HTML or WYSIWYG. If you are copying code, make sure to select HTML.
  2. If you want recipients to be able to receive a text version of the message, if this is their preference, select the Alternate text version option.
  3. In the center pane of the editor, type in the text of your message.
  4. Add elements to the text by using any of the options available in the left pane of the editor. This pane offers the most common edition options. You can view additional options by clicking on the icon shown on the editor's toolbar.

Description of the most common edit options

Section used to add an image in the message. This image can be hosted on the Dialog Insight server or located on your own server or computer. The list displayed shows all the images that are hosted on the application server.
To find an image, you can use the search box to enter the name of the image and specify to search in all files or in a specific file category. You must then click on the icon to refresh the results. To add the image in the message, you must place the cursor in the desired location in the message, select the desired image and click on Insert. You can also download new images by clicking on Upload an image.
If needed, you can edit an image right within the integrated image editor. To do so, click on the edit icon related to the image to edit when you are in the maximized view of the window, displayed by clicking on .The Host images option is used to copy the images not hosted on the Dialog Insight server when the message is sent. Normally, clients who have a hosting space on Dialog Insight will use this option.
If you add an image in a message, make sure to add an alternate text that will display when images are not automatically downloaded in the message or when the mouse cursor is on the image. 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. When an image is inserted, the properties can be adjusted by editing the width, height, alignment and alternate text. The Preview with text option lets you see how the image is aligned with the text.
Section used to customize the content of the message with data extracted from the contact's profile, project, company or system information. Variables used to name the recipient in the introduction are the most common.
Example Hello [[=Contact.f_FirstName;]],
See How To
Link library
This section lets you add an hyperlink in your message. Operational links let you, for instance, add functions on a click, modify the contact profile, or send a message to an administrator or subscriber.
Following is a description of all possible links:
See How To
Operational link
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 link
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 link
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>.
See how this is done in our tutorial:
Tell A Friend form link
Type of link added in a message that opens a form to be completed by the recipient to transfer the message to a friend.
See Operations to Transfer a Message to a Friend
Contest link
Type of link that opens a contest.
Survey link
Type of link that opens a survey.
Event workflow link
Type of link that lets you add a link to an event that was created as part of a workflow.
Contest workflow link
Type of link that lets you add a ling to a contest that was created as part of a workflow.
Profile update workflow link
Type of link that opens a profile update form that was created as part of a workflow.
Workflow link
Type of link that redirects the recipient to a workflow process.
Dynamic content
Section used to insert content in the message based on conditions. For example, you might want to display the office address that corresponds to the location of the recipient. To do so, you must define the display based on conditions.
This option lets you enter the content to display, select the field to use to find the value specified, based on the selected operator. By using also the Else option, you can specify an alternate text to display if the condition is not met.
Example  If the content includes "", display the text ABC, otherwise display 123, will give the following: [[ if (Contact.f_EMail CONTAINS "") { ]]ABC[[ } else { ]]123[[ } ]]
See How To

Edit the message

Customize the message by adding variables

You might want to customize the content of the message with variables. The most common variable used is for the introduction. ExampleHello [[=Contact.f_FirstName;]], will show in the message as: Hello Peter, or Hello Susan, You can however insert customizable variables anywhere in the message by using fields from the contact's profile, whether it is an address, a phone number or a comment entered in the profile.

  1. Place the cursor in the message where you want to insert the customized text.
  2. In the Customization section, select the data source by clicking on  to display the list of possible sources. By default, the source is the contact's profile, but you can choose variables from the project, the company, or even from system data. Then, select the field corresponding to the value you want to insert.
  3. Click on Insert.
Add a link
  1. Place the cursor in the message where you want to insert the link.
  2. In the Link library section, select the type of link to insert, the name of the link as well as the label you wish to see displayed in the message.
  3. Click on Insert.
Customize the message by adding conditional content

If you want to customize the message by adding dynamic and conditional content, you must select the desired options under the Dynamic content. For example, you might want to show in the message the address of the company that is in the same location as the location of the recipient. ExampleIf the region of the contact is Quebec, show the address of the office in Quebec; otherwise, show the address in Montreal.

Description of condition types                                     
Contact's profile
Lets you add content based on any field in the contact profile.
Project's info
Lets you insert specific content when a given project data is met, such as the project name, id number, key or creation or edit date.
Company's info
Lets you choose amongst the information on the company to insert a specific content. This information is found in the Account Management module.
System info
Lets you insert dynamic content based on a given system date.
Lets you personalize the content depending on the type of device and platform used to view messages. See a description of all available choices under Device
  1. Place the cursor in the message where you want to insert the conditional text.
  2. If you need more space to type in your text, or simply wish to work in a bigger space, click on  to see the section in full-screen mode.
  3. In the Add this content section, type in the text to insert in the message if the condition is met. ExampleThe address of the office in Quebec. You can also select the text right in the message and click on the  icon to copy your selection.
  4. Under the If... section, select the data source by clicking on  to display the list of possible sources. By default, the source is the contact's profile, but you can choose variables from the project, the company, or even from system data. Once the source is selected, select the field and the operator to use for the search.
  5. If you want to have an alternate text, for when the condition is not met, check the Else option and specify the replacement text. Example The address of the office in Montreal if the contact's region is not Quebec
  6. Click on Insert.
Insert one or multiple images

To insert images in your message, go to the Images section.

  1. Place the cursor in the message where you want to insert an image.
  2. In the Images section, select the desired image from the list of hosted images or click on Upload an imageto download one from elsewhere. **You can display a preview of images by hovering over the image name with the mouse.
    • To search for an image

      If you have a lot of images, it might be useful to perform a search to help you find your image quicker. To do so, type in the partial or full name of the image in the search box and click on  to update the results.

    • To download an new image

      To insert an image that is located on your computer, click on the Upload an image link. Note that images to be hosted should be in a PNG, GIF or JPG format. In the file upload window, select a category where you want to save the image and click on Select a file to open Windows Explorer to choose an image. Once you have selected the image, click on Open. Make sure the dimensions of the image are appropriate for the message, and if not, make the necessary changes by clicking on the edit icon . Do not forget to save your changes in the image editor. Back in the application, click on Select.
      The image will then be added to the list of hosted images, and you will be able to select it to add it to your message.

    • To open the image selector

      The image selector lets you see the list of images in a separate window, much bigger, and offers additional options to manage images. From this selector, you can refresh an image, see a normal size preview, edit the URL address of an image or even delete an image.

  3. Once the image is selected, click on Insert.
  4. If needed, you can change the width, height, text alignment and alternative text to show. To do so, select the image, click on Insert and edit the image properties as needed. You can also select the Preview with text option to see how the image looks with the text.
  5. When all the properties are set as desired, click on Insert again.
  6. The only step left is to format the message, either by adding the format options available in the WYSIWYG editor or adding the required tags in the HTML editor.
  7. After all the changes are made, make sure to save your changes by clicking on Save. It is actually recommended to save your changes as you make then, to be certain not to loose them.
Important information about images

Note that most email clients do not automatically display images anymore, as they need to be authorized to do so beforehand.
Images must therefore be downloaded once the message is opened and they can take some time to display. So, it is very important for images to include the proper width and height tags <img src=…> so that the text of the message is still correctly displayed even without images. It is also strongly recommended to add a text to your images.
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://...).
In addition, make sure to reduce the size of your images to its minimum size so they display quickly.
Example<img src="http://" width="10" height="10" alt="Text to be displayed when the image is not displayed">

Validate the message

Make sure that your message is valid and that it has no errors before sending it.

  1. You can check the validity of a message by looking at the editor's toolbar. If you see an error indicator, click on it to view the details about the errors and/or warnings.

  2. To be able to send a message, you must at least correct the errors. As for warnings, correction is optional but suggested.
  3. If comments or notes were added about the message, you can see them, or add notes, by clicking on the additional option icon shown on the editor's toolbar, and then selecting Reviews section.

Additional edit options

To facilitate edits and only put up front the most used features, many options were grouped and placed in a window that is not shown by default, but easily accessed if needed.

To view these other options, just click on the  icon in the editor's toolbar.

For more information, see Description of additional edit options.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.