Recommendation Block

A good store changes its shelves for every shopper. Recommendation Block lets your campaigns do the same. You drop a block into your template, pick where the products come from, and WebEngage fills each tile with the right product for each user when the campaign goes out.

Here are a few ways you can use it:

• Picked for you on your homepage, driven by each user's browsing or purchase history
• Customers also bought in a post-purchase email
• Trending this week for every visitor, using your top-selling items
• New season edit in a launch email, with products you hand-pick and order yourself

You build the block in a four-step wizard inside the drag-and-drop editor: Layout, Data Source, Styles and Preview. The canvas updates live as you change settings, so you always see what your users will see.

What You Can Do in Each Channel

Before You Begin

Make sure you have the following in place:

• A catalog. This holds your products. It needs columns for at least an image URL, a product name and a product page URL. Price, MRP, discount, description and a tag column are optional. Learn how to upload a catalog.
• A recommendation strategy (optional). You need one only if you want products to change per user. Create it under Recommendations. All four strategy types work: Top Items, Personalized, Relevant and Collections.
• A drag-and-drop template. The block lives in the drag-and-drop editor of an Email template or a Web Personalization inline campaign.

Add a Recommendation Block

1. Open the drag-and-drop editor for your Email template or Web Personalization inline campaign.
2. From the Content panel, drag Recommendation Block into a row.
3. Click Configure on the placeholder. The wizard opens.

The steps are the same in both channels. Where Email behaves differently, it's called out below.

Step 1: Layout

1. Pick a template. Each template turns on a set of fields by default. Every tile also links to the product page URL.

   • Retail: Special Tag, Image, Name, Price with MRP struck through, Discount badge ("X% OFF") and Description.
   • Minimal: Image, Name and Price.

   You can switch any field on or off later, in Configure Fields.

2. Add a title and subtitle (optional). For example, "Picked for you".

3. Choose the layout.

   

   • Flat Grid (Email and Web Personalization): all tiles are visible at once.
     • Grid Size: hover over the grid picker to preview, then click to set the rows (up to 10) and columns (up to 5).
     • Cross Screen Visibility: set how many columns show on each device. Desktop allows up to 5 and mobile up to 2.
   • Carousel (Web Personalization only): tiles sit in a single row that users scroll through.
     • Show Tiles: the number of tiles visible at once. Desktop allows up to 5 and mobile up to 2.
     • Total Tiles: the number of tiles in the carousel, up to 50.
     • Scroll Depth: calculated for you. It shows how many scrolls it takes to see every tile on desktop.
     • Scroll Behaviour: how users move through the tiles. Choose Arrows, Native Scroll (swipe or trackpad), or both. At least one must be selected.

Step 2: Data Source

Here you choose how the tiles get filled. There are two options.

Browse & Select

Use this when you want to hand-pick products. Every user sees the same items, in the order you set.

Click to enlarge

1. Click Select Catalog & Items and pick a catalog.
2. The Configure Tile Fields window opens. Map each tile field to a catalog column (see Configure Tile Fields below), then click Save.
3. Filter by any attribute and tick the products you want. You can pick up to the number of tiles you set in Layout.
4. Click Next and drag the products into the order your users should see them. Click Save.

Click to enlarge

Recommendations

Use this when you want the products to change for each user. Products are picked at the moment the campaign goes out.

Click to enlarge

1. Click Select Recommendation Strategy and pick a strategy. You can use any of these four types:
   • Top Items: the same popular products for everyone, such as Top Selling, Top Added to Cart, Top Wishlisted, Top Viewed, or your own. No extra input needed.
   • Personalized: products picked from each user's past behaviour, such as Personalised by Items Bought, Personalised by Items Added to Cart, Recent Items Viewed, or your own. No extra input needed.
   • Relevant: products related to one reference product, such as Also Bought, Also Added to Cart, Also Viewed, or your own. Enter the Reference Item: type a product ID, or pick a user or event attribute that holds one.
   • Collections: products that match a filter you define. Fill in each variable the collection asks for.
2. Map the tile fields in the Configure Tile Fields window, as described below.

Configure Tile Fields

This window connects each part of the tile to a column in your catalog. It opens automatically when you pick a catalog or a strategy. To change the mapping later, click Configure next to the field summary.

Click to enlarge

• Map a field: pick a catalog column from the dropdown. You can also type fixed text instead, for example a tag that reads "Bestseller".
• Turn a field on or off: use the checkbox on the right. Image, Name and URL are required and always on.
• Reorder fields: drag a field by its handle to change where it appears on the tile.
• Save: the button is enabled once every checked field is mapped.

WebEngage maps most fields for you. See How Auto-Mapping Works to skip manual mapping altogether.

Display Settings

These optional settings protect your users from a half-empty block when too few products come back.

Click to enlarge

• Show Block When: the block is hidden unless at least this many products resolve. The rest of the campaign still goes out.
• Conditional Abort: the whole campaign is skipped for that user unless at least this many products resolve.

Step 3: Styles

Style each part of the tile from the accordion: Tile Container, Image, Name, Description, Price, Discount Badge, Special Tags, Block Background, Title and Subtitle. You can change colours, fonts, sizes, line limits and alignment.

Click to enlarge

Styles unlock once you've selected a data source and configured its fields. One style setup applies to the block in every channel. Options that Email doesn't support are disabled there, with an info icon that explains why when you hover over it.

Step 4: Preview

The Preview step lists the personalization tokens the block uses, so you can check exactly what WebEngage generated for you.

Click to enlarge

1. Enter a User ID and click Preview to see the block exactly as that user would get it.
2. You can edit the values for that preview session. This never changes the user's profile.
3. Click Save Block to place the block in your template.

To edit the block later, click it in the editor. The wizard opens with your settings in place.

Email vs Web Personalization

Email clients don't run scripts and support less CSS than a browser, so a few options are limited in Email.

Tile Fields Reference

Image, Name and URL are always on. You can switch the rest off in Configure Tile Fields.

How Auto-Mapping Works

When Configure Tile Fields opens, WebEngage maps each field to the first catalog column whose name contains the recommended column name, ignoring case. For example, a column called Product_Name maps to Name, and discount_pct maps to Discount %.

Name your catalog columns this way and you can skip manual mapping entirely.

Price and MRP move together when you reorder fields.

---

We would love to hear from you! If you have any questions or feedback, drop us a line at [email protected].