Elements Palette

The Elements palette is where you can access the tools you need to add content to your message.

To use elements within the palette, simply drag an item from the palette to a container on the canvas then use the settings panel and design menu to add your content. Once on the palette, the element's settings panel can be used to provide the content and design for the element. The options available on the Content and Design tabs will vary from element to element. In this topic we discuss the Content tab options for each element. To read more about the Design tab options see Design (Format) Message Content.

Each element has a unique ID you can use to target it in the CSS. To find the CSS class ID for an element, open the element in the palette and scroll to the bottom of the Design tab. For example: .element-36789743892.

Element Description Notes

Text

Adds text; this includes the ability to insert dynamic code and tags.

When you add a Text element to a message, the ability to write, edit, and style text is provided in the Content tab of the Text Settings panel.
In addition to writing text, the Text element can be used to:
  • Add numbered or bulleted lists.
  • Add an inline link by highlighting text, clicking the link button, and entering the link information in the Insert Link pop up window.

    To insert a link to an item you uploaded into Bronto file management area, click the folder icon in the Link Url field, navigate to and select the item, and then click Insert.

  • Add dynamic code and various message tags to your message by selecting options from the Insert menu. There is no need to offset tags with a space or a comma.
  • Add Special Character using the Insert menu, which provides a keyboard you can use to insert special characters. If you want to use an emoji, you will need to copy and paste the emoji into your email. See the Power of Emojis strategic blog post for more information.
The Content tab can be used to apply basic font and paragraph styling options. If you want font styling to only apply to some of your text, make sure to highlight it before using the menu to adjust the design.

The Design tab font design options are applied to all of the text in the element, but will be overridden by any specific design options made using the Content tab. The formatting options in the Content tab are described in more detail in Design (Format) Message Content.

Image

Adds an image.

Use the Image Url box to add the image. There are three ways an image can be added:
  • Use an image that was uploaded to Bronto by clicking Browse to browse to the image.

    To edit an image as you add it to your message, click the checkbox in the corner of image thumbnail then use the Manage menu to access the editing options. If you click on the image itself it will be inserted into the message.

  • Copy and paste the image's URL into the box.
  • Insert a tag that will be replaced with an image at the time the message is sent. For more information about using tags see Add Tags Using The Message Editor.

If you provide a URL in the Link box, this link will open when a contact clicks on the image. If you want an image to send an email when a contact clicks on it, type mailto: email.address - where email.address is the email address you want mail to be sent to - in the Link attribute box. Currently mailto: links can only support email addresses.

Images should always include a brief description in the Alt Text box so that text is displayed if the image cannot be.

Button

Adds a button.

When you add a Button element you must include a link in the Link box on the Content tab. This link is the webpage that will open when a contact clicks the button.

If you want a button to send an email when a contact clicks on it, type mailto: email.address - where email.address is the email address you want mail to be sent to - in the Link box. It is important to note that mailto: links can only support email addresses at this time.

The Insert menus can be used to add tags or special characters to your button Text or Link. For more information about tags, see Add Tags Using The Message Editor.

Text Grid

Adds a table.

By default, the Text Grid element adds a borderless table with three rows and three columns. The Text Grid element is meant to be used when you want to include a table with text in your email and is not meant to be used as a message design element. Use Containers for your message layout needs.

You can add a border to a table using the Border option in the Design menu. Initially all of the cells in the table are of equal size, but cells expand as you add content to them using the Text Grid Settings panel.

In the Add Content menu, click
  • + to add a row or column
  • x to delete a row or column
A table can have up to six columns and an unlimited number of rows.

The Insert menu can be used to add tags or special characters to your table text. For more information about tags, see Add Tags Using The Message Editor.

To create a link that sends an email, type mailto: email.address - where email.address is the email address you want mail to be sent to - in the Link Url attribute box. It is important to note that mailto: links can only support email addresses at this time.

You cannot drag other elements into a Text Grid.

HTML

Provides the ability to include your custom HTML in a message.

If you created HTML in another program, such as DreamWeaver, that you want to include in your message you can copy and paste it into the box on the Add HTML menu.
If you want to apply CSS to the HTML, use the Edit CSS option on the Settings Palette to apply a custom CSS to your message. You can resize both the HTML and CSS editor windows by increasing or decreasing the size of the palette.
Note: You cannot apply custom CSS if you are creating a content tag. This is only available if you are creating a message in the Email Message Editor.

Webpage

Pulls the HTML from a webpage into a site.

When you add a Webpage element, the page is included in the message. When a contact clicks on the page, they are taken to that URL. This is useful if you want to include a sales news letter or print ad to your email.
Note: For security reasons, we will remove all JavaScript from the web page before it is used in an email message.

Social

Gives you the option to add Facebook, Twitter, or LinkedIn share buttons or to add a Facebook Like Button.

A social button allows contacts to share the email to their social media accounts.

Spacer

Allows you to specify the height of a container without adding other content to it.

The Spacer element can be used to increase or decrease the use of white space in your message. Effective usage of white space helps to create more compelling messages. The maximum spacer height is 100 (px, em, rem, mm, or vh).

Even though you only add the Spacer element to a single box, an entire container is effected.

Cart/Order Loop

Adds the beginning and ending tags for a cart loop. You still need to add the cart/order tags you want to include in the loop between the Begin Cart/Order Loop and End Cart/Order Loop tags.

You can add the cart/order tags to the loop by dragging a Text element onto the canvas and placing it after the Begin Cart/Order Loop tag but before the End Cart/Order Loop tag.

Then in the Text Settings menu, click Insert and select Cart/Order tag to select your tag. You can only select one tag at a time, but you can continue to select and add tags to the same Text element. For more information see Add Cart/Order Loops Using The Message Editor.

You can only have one loop per Container box.

API Loop

Adds the beginning and ending tags for an API loop. You still need to add the API content you want to include in the loop between the Begin API Loop and End API Loop tags. You can add the API message tags to the loop by dragging a Text element onto the canvas and placing it after the Begin API Loop tag but before the End API Loop tag.

Then add the API message tags you want to include in the loop by typing them into the Add Content box in the Text Settings panel. For more information see API Loop Tags.

You can only have one loop per Container box.

Rec Loop

Adds the beginning and ending tags for a Recommendations loop which allows you to use a recommendation to dynamically populate product data into your email. You still need to add the product placeholders for the product fields you want to include for each product between the Begin Rec Loop and End Rec Loop tags. For detailed information about how to use a Rec Loop see Add Recommendations In The Email Message Editor.

When you add multiple Premium Recommendations to a message a customer will only see results for the first 3 Rec Loops (that have results). We don't limit the number of Rec Loops that can be included in the message to support adding different Rec Loops when working with dynamic content.

By default, when a Rec Loop does not return results the container the Rec Loop is in will be hidden in the sent message. On the Design tab, you can turn this feature on or off using the Hide entire container if loop is empty box.

MyBuys (Magnetic) App Integration

Adds MyBuys (Magnetic) content to an email. Once you have the MyBuys (Magnetic) recommendation fully configured, you can insert a MyBuys (Magnetic) Recommendation into your message. For more information about setting up MyBuys (Magnetic), see MyBuys (Magnetic) Connection

When you add a MyBuys (Magnetic) element, you need to

  1. Select a Message Type.
  2. Enter the Recommendation Number.
  3. Enter the Product Codes.
  4. Enter the Category Key Codes.

Baynote App Integration

Adds Baynote content to an email. Once you have the Baynote Recommendation fully configured, you are ready to insert a Baynote Recommendation into your message. For more information about setting up Baynote, see Baynote Connection

When you add a Baynote element, you need to

  1. Select the Layout.

    This allows you to change the format of the image that is generated by Baynote. Test your message after trying out different options to be sure you are pleased with the layout.

  2. Choose the size (Small or Large) of the recommendation you wish to use.
  3. Enter the Recommendation Number.

    This allows you to select which recommendation number (or recommendation index as referred to by Baynote) you wish to receive and is normally used when you want to show several recommendations for one product. The first recommendation has an index of 1, the second recommendation is set to 2, and so on.

  4. Enter the Attribute Filter.

    This allows you to override the setting you set when configuring the Baynote Connection.

  5. Enter the Product URL.
  6. Enter the Guide Name.

    This allows you to override the setting you set when configuring the Baynote Connection.

Coupon Manager

Adds Coupon Manager content to an email If you use Coupon Manager, you can use this element to add your coupons right into your email. Simply drag the Coupon Manager element to the canvas and click the Get Image Tag button associated with the coupon you want to use. For more information about Coupon Manager, see https://appcenter.bronto.com/apps/coupon-manager.