Define and Configure Transformers

Transformers enable you to convert personalization data that you receive in a JSON format from the Decisioning API into dynamic HTML. Einstein Personalization currently supports Handlebars-based transformers that use the Handlebars templating language to convert personalized JSON data, such as product or content recommendations, so that you can later inject that data into the HTML structure of your website.

A Handlebars transformer has this structure.

FieldDescription
nameThe unique name of the transformer.
transformerTypeSpecifies the transformer type.
lastModifiedDateOptional. A timestamp used to track updates to the transformer.
substitutionDefinitionsA set of key-value pairs that define placeholders in the template that are replaced with actual values when the template is rendered.
transformerTypeDetailsContains the HTML template and the logic for rendering the content. The template can use Handlebars helpers like {{#each}} and {{subVar}}.

Creating and configuring a Handlebars transformer involves these steps.

  1. Define the transformer object
  2. Add substitution definitions
  3. Create the Handlebars template

Define a new transformer object with these fields.

Substitution definitions are key-value pairs that map user-friendly variable names as placeholders in your transformers to fields in the Decisioning API response. These placeholders are used to represent values like product names, images, and other content attributes, that are subsequently replaced with personalized content received from Einstein Personalization at runtime.

When creating substitution definitions, define a variable (such as, name or image) and specify the field in the Decisioning API response that must supply the value for that variable.

For example, to include a recommended product, its name, and its associated image URL from this Decisioning API response in your transformer.

To define substitionDefinitions for this response, first source the field names from the response (data, ssot__Name__c, and ssot__Image__c). Then, map and define these substitutions as shown in this example.

In this example:

  • introText is mapped to [attributes].[introText] and represents introductory text, like a greeting or heading.
  • recs is mapped to [data] that contains a list of recommended items.
  • name is mapped to and populates values from ssot__Name__c that contains item names.
  • image is mapped to and populates values from ssot__Image__c that contains the image URL for each item.

For each substitution, you must define a defaultValue that represents the mapping of the substitution string with a field from the Decisioning API response.

Within transformerTypeDetails, write the Handlebars HTML that is rendered on the website. To use each of the substitutionDefinitions defined in your template, use the defined variables (such as name and image) along with Handlebars expressions such as subVar.

Here's an example of a transformer that renders a list of recommended items.

Here are three examples of transformers that serve specific purposes. Each transformer includes substitution definitions and Handlebars code for converting and injecting personalized content into your website’s frontend.

The Decisioning API response fields used in the substitutionDefinitions of these transformers are for illustrative purposes only. Since these fields are derived from Decisioning API responses, ensure that you compare the fields used in these example transformers with the fields in your Decisioning API response and adjust them wherever necessary.

This transformer generates a carousel of product recommendations.

This transformer generates a hero banner with a call to action.

This transformer generates an overlay banner with a call to action.