Documentation Journey Optimizer B2B Journey Optimizer B2B Edition Documentation

Email authoring

Last update: March 5, 2025

Use Adobe Journey Optimizer B2B Edition to send email messages to your customers. You can create, personalize, and preview messages in the visual designer.

Add an email action in an account journey

You can set up email deliveries in an Account Journey when you add a Take an action node and do the following:

For the Action on target, choose People.
For the Action on people, choose Send email.
For the Email source, choose Create new email.

Alternatively, you can also select the Select email from Adobe Marketo Engage option to use one of the pre-authored emails in Marketo Engage and send it as a part of the Account Journey.

NOTE
If you are creating an email for the first time, make sure that the email channel is configured from within Adobe Marketo Engage. To learn more, see Ensure Email Deliverability in the Marketo Engage documentation.
At the bottom of the Take an action panel, click Create email.
In the dialog, enter a unique Name for the email and a Subject line.
Click Create.

In the Email properties section of the email content page, the From email and Reply to address fields are already configured. You can enter values for the From name and Description (optional) fields.

Create the email content

Click Add email content at the top of the Email preview panel.

Click Add email content

This action launches the Email Designer, where you can choose how you want to design your email from the following options:

Design your email from scratch using the Email Designer interface.
Import existing HTML content from a file or a .zip folder.
Select an existing template from a list of built-in or custom email templates.

To configure and personalize the subject line with the expression editor, click the Personalization icon and add any of the Marketo Engage tokens.

After you create and personalize the email content, you can export the content for validation or for later use. Click Export HTML to save the content as a .zip file that includes your HTML and assets.

TIP

Use AI Assistant in Adobe Journey Optimizer B2B Edition, powered by generative AI to elevate your content to the next level. AI Assistant can help you optimize the impact of your deliveries by generating entire emails, targeted text content, and getting AI Assistant recommendations for images that resonate with your audience. Learn more

Design your email from scratch

Use the visual content editor to define the structure of the email content. By adding and moving structural components with simple drag-and-drop actions, you can design the shape of the reusable email content within seconds.

From the Design your template home page, select the Design from scratch option.
Add structure and content to the email message.
Add image assets to the email message.
Personalize the email content.
Review and update links.

When your content is done, click Simulate content at the top to check rendering. You can choose the desktop or mobile view.

When you are satisfied with the content, click Save.

Import existing HTML content

Imported content can be:

An HTML file with an incorporated style sheet
A .zip file that includes an HTML file, the style sheet (.css), and images

NOTE
There are no constraints on the .zip file structure. However, references must be relative and fit with the tree structure of the .zip folder. The images are always uploaded to the connected Marketo Engage assets repository. If you want to manage the image files in Experience Manager Assets, upload them separately in that app interface and change the image links in the email designer.

To import a file containing HTML content:

From the Design your template home page, select the Import HTML option.
Drag and drop the HTML or .zip file containing your HTML content and click Import.

NOTE

Using a <table> tag as the first layer in an HTML file can cause style loss, including background and width settings in the top layer tag.

You can personalize the imported content as needed with the visual email editor tools.

Select a template

You can choose from:

Sample templates. The Journey Optimizer interface offers 20 out-of-the-box email templates that you can choose from.
Saved templates. Use a saved custom template that you either created from scratch using the Templates menu or saved from an email in a journey using the Save as content template option.

Use the Select design template section to start building your content from a template. You can use a sample template or a saved custom email template from your Journey Optimizer B2B Edition instance.

Saved templates

On the Design your template home page, the Sample templates tab is selected by default. To use a custom template, select the Saved templates tab.

The list of all email templates created on the current sandbox displays. You can sort them by Name, Last modified, and Last created.

Choose a saved template

Select the template that you want from the list.

After selection, this displays a preview of the template. In preview mode, you can navigate between all the templates of one category (sample or saved, depending on your selection) using the right and left arrows.

Preview the saved template

When the display matches what you want to use, click Use this template at the top right of the preview window.

This action copies the content into the visual content designer, where you can edit the content as needed.

Sample templates

Adobe Journey Optimizer B2B Edition offers a selection of email templates offered out-of-the-box, which can be used for creating emails and email templates.

Choose a template provided by Adobe

NOTE

Saved templates may have governance (content locking) settings applied to one or more components. The visual designer provides guidelines about locked components when you author an email from a governed template.

Add structure and content

To start your content design, drag an item from the Structures and drop it onto the canvas.

Add as many items from Structures as you need and edit the settings for each in the pane on the right.

TIP
Select the n:n column component to define the number of columns of your choice (between three and 10). You can also define the width of each column by moving the arrows below the column.

Each column size cannot be less than 10% of the total width of the structure component. Only empty columns can be removed.
Expand the Contents section and add as many elements as you need into one or more structure components.
If needed, you can make additional customizations for each component in the Settings or Style tabs.

For example, you can change the text style, padding, or margin of each component.
To add conditional content and adapt the content to the targeted profiles based on conditional rules, select a content component and click the Enable conditional content icon in the component toolbar.

For more informantion, see Conditional content.

Add fragments

A visual fragment is a reusable design component that can be referenced by multiple content assets across Adobe Journey Optimizer B2B Edition. It is usually a block of content that can be pre-created and quickly inserted to make authoring quicker and more consistent.

The following example outlines steps to add fragments as you author your content.

To open the fragments listing, select the Fragments icon ( ).

You can:
- Sort the listing.
- Browse, search, or filter the listing.
- Switch between thumbnail and list views.
- Refresh the list to reflect any of the recently created fragments.
Drag and drop any of the fragments into the structural component.

The editor renders the fragment within the section/element of the email structure.

TIP
To add the fragment so that it occupies the entire horizontal layout within the email, add a 1:1 column structure and then drag and drop the fragment into it.

The content of the fragment is dynamically updated within the structure to show how the content appears in your content.

recommendation-more-help

Editable fields

A visual fragment can include editable fields that you can customize. Custom fields allow you to modify parameters when you incorporate the fragment into your content and create a tailored experience without affecting the original fragment. If an included fragment contains components with editable fields, you can change the default values.

Select the fragment component.

The Settings displayed on the right include and editable fields with the default values.
Change any editable field as needed.

After the email is saved, it appears in the fragment details page when you select the Used By tab in the summary.

Add assets

In the visual content editor, select the Marketo Engage Assets ( ) icon or the Experience Manager Assets ( ) icon in the left navigation bar. From the asset selector, you can directly select assets stored in the source library.

NOTE

If you are provisioned with Adobe Experience Manager as a Cloud Services, you have access to the repositories for both Marketo Engage Design Studio and Adobe Experience Manager Assets as a Cloud Service when your user account has the required permissions. These repositories are separate and not in sync. You can use image assets from either source.

Add a new asset by dragging and dropping the image asset into a structure component.
Replace an existing image asset by selecting it on the canvas and click Select an asset in the image source tools.

For more information about using assets from your source type, see Use assets for content authoring.

Navigate the layers, settings, and styles

As you work with the content in the visual designer, you can access the layers/containers and elements using the Navigation tree. Click the Navigation icon to display the tree to the left of the canvas.

Access the content layers

The following example outlines steps to adjust padding and vertical alignment inside a structure component composed of columns.

Select the column in the structure component directly in the canvas or using the Navigation tree displayed at the left.
From the column toolbar, click the Select a column tool and choose the one that you want to edit.

You can also select it from the structure tree. The editable parameters for that column are displayed in the Settings and Styles tabs on the right.
To edit the column properties, click the Styles tab on the right and change them according to your needs:
- For Background, change the background color as needed.
  
  Clear the check box for a transparent background. Enable the Background image setting to use an image as the background instead of a solid color.
- For Alignment, select the Top, Middle, or Bottom icon.
- For Padding, define the padding for all sides.
  
  Select Different padding for each side if you want to fine tune the padding. Click the Lock icon to break synchronization.
- Exapnd the Advanced section to define inline styles for the column.
If needed, repeat these steps to adjust the alignment and padding for the other columns in the component.
Save your changes.

Personalize content

Journey Optimizer B2B Edition uses an inline simple syntax that allows you to create expressions with personalized content enclosed by double curly braces {}. You can add multiple expressions in the same content or field without restrictions.

Examples:

Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}
Hello {{profile.person.name.fullName}}

When processing the content, Journey Optimizer B2B Edition replaces the expression with the data contained in the Experience Platform database. So, the first example becomes Hello John Doe.

The following example outlines steps to personalize content using lead/account attributes and system tokens.

Select the text component and click the Add personalization icon in the toolbar.

This action opens the Edit Personalization dialog.
Click + or … to add a token to the blank space.
Click Save.

Edit linked URL tracking

Click the Links icon on the left to display all the URLs of your content to be tracked.
If needed, click the Edit (pencil) icon and modify the Tracking Type or Label.

You can also add Tags for a link.

Click More to access template actions

View options

Leverage the view and content validation options that are available in the visual email editor.

Zoom in/out on the content across preset zoom options.
Switch viewing the content across Desktop, Mobile, or Text-only/Plain-text.
- Click the View icon for content preview across devices.
- Select one of the out-of-the-box devices or enter custom dimensions to preview the content.

More options

From the More … menu at the top of the email designer, you can take the following actions:

Click More to access template actions

Reset email - Click this option to clear the visual email designer canvas to a blank slate and restart building your content.
Save as fragment - Save all or portions of the email as a fragment to be reused across multiple emails or email templates. You provide a name and description for the fragment and save it to the list of available fragments.
Change your design - Return to the Design your email page. From there, you can choose another template to restart the design process, or choose to design the content from scratch in a black canvas.\
Save as content template - Save the email body as an email template to be reused across multiple emails or email templates. You provide a name and description for the template and save it to the list of saved email templates.
Export HTML - Download the content in the visual canvas to your local system in HTML format packaged as a zip file.

Check alerts

As you design your email message content, alerts are displayed in the interface (top-right of the page) when key settings are missing.

If you do not see this button, there are no detected issues.

Two types of alerts can be detected:

Warnings that refer to recommendations and best practices, such as:
- The opt-out link is not present in the email body: adding an unsubscription link into your email body is a best practice.
  
  NOTE
  Marketing-style email messages must include an opt-out link, which is not required for transactional messages.
- Text version of HTML is empty: do not forget to define a text version of your email body, which is used when HTML content cannot be displayed.
- Empty link is present in email body: check that all the links in your email are correct.
- Email size has exceeded the limit of 100KB: for optimal delivery, make sure that the size of your email does not exceed 100KB.
Errors that prevent you from testing or activating the journey/campaign as long as they are not resolved, such as:
- The subject line is missing: email subject line is mandatory.
- The email version of the message is empty: this error is displayed when the email content has not been configured.

Check and test the email

When your message content is defined, you can use test profiles to preview it, send proofs, and control its rendering in popular desktop, mobile, and web-based clients. If you inserted personalized content, you can preview how this content is displayed in the message using test profile data.

To preview the email content, click Simulate content and then add a test profile to check your message using the test profile data.

Simulate the email content to check your design