After the Predictive Content crawler has scraped the website to identify all of the content you have worked hard to write, you are ready to add this content into your email. There are three ways to add Predictive Content to email:
This guide will review the steps to create custom blocks for HTML or Composer. The custom blocks unlock additional control over your branding and design elements.
Building a Content Block
The content block controls the number of content pieces that will appear in the email and the creative design, e.g. title font.
⚠️ Only one content block should be added to an email. If you would like to include multiple pieces of content, add them within the same block.
Navigate to Solutions > Recommender Predictive Content.
Click Create Content Block in the top right corner.
Enter a Content Block Name.
Select whether to Exclude recently recommended content.
💡 When using this block in a recurring message (for example, a weekly newsletter) you can select Exclude recently recommended content so that users will get fresh recommendations each time they receive a new message. In this example a user will get a new set of recommendations each week.
Click Build Recommendations.
For each section (article) you wish to include in the block:
Add a Section Name for your new section.
Select the Recommended type of content.
Predictive Content: Uses a contact's activity to recommend content related to the items a contact has browsed, abandoned, or purchased. This is the suggested setting.
New Content: Recommends content based on the Published Date of the article.
Popular: Recommends content based on the number of page views within the last 7 days.
Select a backup that will be used if the recommended logic cannot recommend content.
Select an image format which will control how the scraped image from the content is formatted.
Select formatting options for content Headlines Styles and Body Styles. Select properties such as font family, text size, and alignment.
Click Add Section to begin building a new section, if desired.
Repeat step 6 & 7 if needed for additional content.
Click Save & Get Code.
The code is generated automatically into images which allows you the flexibility to place the images wherever you'd like in your Composer or HTML message.
Adding Predictive Content to Composer Custom Design
Using the links generated above you are able to add the Predictive Content to any email you desire in Composer. There are four links generated automatically per predictive content section:
Link: The link URL that directs back to the page of your site or blog that contains the recommended content
Image: The image URL that will display an image associated with the content in the format chosen during the setup.
Title: The image URL that will display the title of the article based on the formatting chosen during the setup.
Description: The image URL that will display the synopsis of the article based on the formatting chosen during setup.
Copy all links for the block into notepad
Navigate to the message you wish to add the predictive content to in Saved Messages or Templates.
The image, title, and description will each be their own content piece in the message. Create a design with structures and image content components that match your desired layout. In the example below the design could show the image on the left and the headline and text on the right.
Click on the image element that will house the blog image (yellow above):
Paste the Link copied from the predictive content block into the link URL.
Paste the Image image URL copied from the predictive content block into the Image Source.
Click on the image element that will house the title (purple above):
Paste the Link copied from the predictive content block into the link URL.
Paste the Title image URL copied from the predictive content block into the Image Source.
Click on the image element that will house the description (blue above):
Paste the Link copied from the predictive content block into the link URL.
Paste the Description image URL copied from the predictive content block into the Image Source.
Repeat steps 3-7 for any additional sections you created in the Predictive Content block.
💡 The image URLs for the title, image, and description contain a width at the end of the URL. This can be adjusted to better fit your design. The default value is 280px wide.
Adding Predictive Content to HTML Messages
When creating a predictive content block an HTML code block will automatically be created for you. You can use this code or use the links generated as described above to create your own custom layout.
Navigate to the main Predictive Content landing page under Solutions > Recommender Predictive Content.
Click on the three dots next to the block you would like to use.
Click on the code icon to Get Code.
Copy and paste the code from the HTML tab in a notepad or text editing document.
Navigate to the message you wish to add the predictive content to in Saved Messages or Templates.
Click to edit the message from the HTML tab.
Paste the ready-made template into your HTML.
Make sure to save your work by clicking Apply Design and then Save.
The HTML is built using responsive tables so in most cases the layout will be responsive in your email.