Message elements are blocks that used to build a message. These blocks can include an image, text, or both, and each offers a specific format (1 column, 2 columns, one image with text on the right side...).

By default, about 15 different message elements are available to meet most needs. However, if none of the provided elements meet your specific needs, we can help you with a more personalized option, upon request.

The Dialog Insight application offers standard message templates as well as new drag & drop templates that make it easier than even to create and edit messages where message elements can simply be dragged and dropped to the desired location in a message and also be moved around in the message if needed. 

Following is a table listing all the message elements that are available by default in the drag & drop message templates, and how they are used.

 

 

ElementDescription and how to
Image


Element that includes one single image, with no text.
This element can be used to include a banner or any other type of image.

 How To
  1. Once the element is dropped in the message, you can choose an image amongst those available under the Images section and drag and drop it in the message element. You can also select a new image that is not yet hosted by clicking Upload an image.
  2. To define the properties of the image, click on the edit icon  shown in the bar at the top of the element frame. You can also click directly on the image to select another image.
Image properties to define
       
Field NameDescription
FileName of the image file. To select another image, click .
URL - AddressIf your image is clickable, insert the address of the page to be displayed when the image is clicked. The address must start with http://.
Alternative textIf you want your image to show a text when hovered, insert your text here. The text is also shown when the image is not displayed, or for accessibility purposes for people with a disability or impairment.
AlignmentOption only offered when the element  is used, to specify whether to display the image to the left or to the right of the text.
WidthMaximum width of the image, in pixels. If you only specify one of the two dimensions, the image will be adjusted accordingly. It is therefore recommended to provide either the width or the height.
* To make sure the image is properly displayed, it is strongly recommended that the selected image has the same size as how you want it to show in your message. Furthermore, having the proper image size will reduce downloading time.
HeightMaximum height of the image, in pixels. If you only specify one of the two dimensions, the image will be adjusted accordingly. It is therefore recommended to provide either the width or the height.
* To make sure the image is properly displayed, it is strongly recommended that the selected image has the same size as how you want it to show in your message. Furthermore, having the proper image size will reduce downloading time.
Option that shows at the top of the window to let you insert a personalized value in a field. When greyed, the option is not available for the selected field.
Option that shows at the top of the window to let you insert a link in a field. When greyed, the option is not available for the selected field.


Text only

Element that includes only text.

 How To
  1. Once the element is dropped in the message, click the edit icon  of the text section or double-click on the element to open the text editor.
  2. In the editor window, type in or paste your text and then apply any desired format and options (add a link, personalization value, image, etc.).
  3. Once editing is complete, click Save.
  4. To edit the element properties, click instead on the edit icon  shown in the top grey bar of the element frame.
Text properties to define
       
Field NameDescription
ContentSection to type in or paste the text of the message. If needed, click on the edit icon to open the text editor and apply the desired format and options.

Note that it possible to insert an image in the text using the hosted or Web image icon.

If you have selected an element with more than one column, it will be indicated if it is the left, center or right text. Also, the height of the columns is ajusted based on the column that has the longest text.
Background color


Background color of the text section. You can enter directly the HEX color code or select it using the color selector.
The selected color will apply to all texts; so if there is more than one column, all columns will have the same background color.
BorderOption that lets you add a border around the text.
If you decide to add a border, and you have more that one columns, the text in each column will have a border.
Border colorColor of the border if you have used one. You can enter directly the HEX color code or select it using the color selector.
The selected color will apply to all borders; so if there is more than one column, all borders will have the same color.
Vertical spacingOption that adds a space between columns, when there is more that one column.
Option that shows at the top of the window to let you insert a personalized value in a field. When greyed, the option is not available for the selected field.
Option that shows at the top of the window to let you insert a link in a field. When greyed, the option is not available for the selected field.
Two Columns
(text on 2 columns)

Element that includes two columns of text, with no title.

 How To
  1. Once the element is dropped in the message, click the edit icon  of the text section or double-click on the element to open the text editor.
  2. In the editor window, type in or paste your text and then apply any desired format and options (add a link, personalization value, image, etc.).
  3. Once editing is complete, click Save.
  4. To edit the element properties, click instead on the edit icon  shown in the top grey bar of the element frame.
Text properties to define
       
Field NameDescription
ContentSection to type in or paste the text of the message. If needed, click on the edit icon to open the text editor and apply the desired format and options.

Note that it possible to insert an image in the text using the hosted or Web image icon.

If you have selected an element with more than one column, it will be indicated if it is the left, center or right text. Also, the height of the columns is ajusted based on the column that has the longest text.
Background color


Background color of the text section. You can enter directly the HEX color code or select it using the color selector.
The selected color will apply to all texts; so if there is more than one column, all columns will have the same background color.
BorderOption that lets you add a border around the text.
If you decide to add a border, and you have more that one columns, the text in each column will have a border.
Border colorColor of the border if you have used one. You can enter directly the HEX color code or select it using the color selector.
The selected color will apply to all borders; so if there is more than one column, all borders will have the same color.
Vertical spacingOption that adds a space between columns, when there is more that one column.
Option that shows at the top of the window to let you insert a personalized value in a field. When greyed, the option is not available for the selected field.
Option that shows at the top of the window to let you insert a link in a field. When greyed, the option is not available for the selected field.
 
Three Columns

Element that includes three columns of text, with no title.
 How To
  1. Once the element is dropped in the message, click the edit icon  of the text section or double-click on the element to open the text editor.
  2. In the editor window, type in or paste your text and then apply any desired format and options (add a link, personalization value, image, etc.).
  3. Once editing is complete, click Save.
  4. Repeat the same process for each column.
  5. To edit the element properties, click instead on the edit icon  shown in the top grey bar of the element frame.
Text properties to define for each column
       
Field NameDescription
ContentSection to type in or paste the text of the message. If needed, click on the edit icon to open the text editor and apply the desired format and options.

Note that it possible to insert an image in the text using the hosted or Web image icon.

If you have selected an element with more than one column, it will be indicated if it is the left, center or right text. Also, the height of the columns is ajusted based on the column that has the longest text.
Background color


Background color of the text section. You can enter directly the HEX color code or select it using the color selector.
The selected color will apply to all texts; so if there is more than one column, all columns will have the same background color.
BorderOption that lets you add a border around the text.
If you decide to add a border, and you have more that one columns, the text in each column will have a border.
Border colorColor of the border if you have used one. You can enter directly the HEX color code or select it using the color selector.
The selected color will apply to all borders; so if there is more than one column, all borders will have the same color.
Vertical spacingOption that adds a space between columns, when there is more that one column.
Option that shows at the top of the window to let you insert a personalized value in a field. When greyed, the option is not available for the selected field.
Option that shows at the top of the window to let you insert a link in a field. When greyed, the option is not available for the selected field.


Social Media

Element that lets you add links to your social media pages (with logos and related links).
Icons are already included in the visual and cannot be edited. You can choose only one icon or all of them if you want, and then specify the alignment and URL to associate to each icon.

Social network properties to define
       
Field NameDescription
Alignment
Option that indicates how social media logos are to show, on the left side, in the middle, or on the right side.
FacebookOption to display the Facebook logo.
Facebook URLURL of the page associated to the Facebook logo. The address must start with http://.
LinkedInOption to display the LinkedIn logo.
LinkedIn URLURL of the page associated to the LinkedIn logo. The address must start with http://
TwitterOption to display the Twitter logo.
Twitter URLURL of the page associated to the Twitter logo. The address must start with http://
Google +Option to display the Google + logo.
Google + URLURL of the page associated to the Google + logo. The address must start with http://
Horizontal Line

Option that lets you add a full width horizontal line to separate contents. You can edit its color and width.
By default, the line is grey and as a width of 2 pixels.

 How To
  1. Just drag the line element to the desired location in the message and set the color and width.
Horizontal line properties to define
       
Field NameDescription
ColorColor of the horizontal line to insert. You can enter directly the HEX color code or select it using the color selector.
SizeWidth of the horizontal line to insert.
RSS feed

Block that allows you to add content from an RSS feed.

Note: The content of the RSS feed does not update automatically when sending your email communications.


Block that allows you to add a countdown timer in a message.


Block that allows you to insert a bar code in a message.