
Predefined HTML blocks for email templates can help businesses create professional and visually appealing emails without having to start from scratch. These blocks combine the advantages of two builders - drag & drop, thanks to which you can easily adjust the appearance of the email to your needs, customize with your brand colors, fonts, and images, and at the same time enrich emails with dynamic elements such as recommended products. The configuration of dynamic elements is easy as it only involves selecting appropriate object (such as analysis or recommendation) responsible for the the logic of choosing products. Ultimately, this can drive conversions, boost sales, and enhance customer loyalty.

This use case describes the process of creating a personalized recommendation of items which are similar to those seen recently by the customer. Later this recommendation is sent through an email to customers who did not make any transaction in the last 30 days. Showing products similar to those they recently viewed might encourage undecided customers to make a purchase.

This use case provides you with an instruction how to use a ready-made html block that can be used 1:1 in a business scenario.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/predefined_html_main.png" alt="Recommend similar items through email based on customer’s browsing history"  class="full no-frame">
</figure> 

## Prerequisites 
---
- Implement a [tracking code](/developers/web/installation-and-configuration) into your website.
- [Configure AI engine](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-recommendations).
- [Configure an item catalog for recommendations](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-recommendations). Enable similar items recommendations.
- Implement the [transaction events](/developers/web/transactions-sdk) using [SDK](/developers/web/transactions-sdk) or [API](https://developers.synerise.com/DataManagement/DataManagement.html#operation/CreateATransaction).
- Configure a [sender account](/docs/campaign/e-mail/configuring-email-account).

## Process 
---

In this use case, you will go through the following steps:
1. [Create an aggregate](#create-an-aggregate) returning the ID of the last visited product, it will be used in the template configuration.
2. [Prepare an AI recommendation](#prepare-an-ai-recommendation), it will be used in the template configuration.
4. [Prepare an email template](#prepare-an-email-template) with the predefined HTML block.
3. [Create a workflow](#create-a-workflow).

## Create an aggregate
---
In this part of the process, create an aggregate that returns the ID of the last product a customer had visited. The recently viewed product itself will not display in the template, but will serve as a context for recommendations.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/behavioral-data-hub-icon.svg" alt="Behavioral Data Hub icon" class="icon"> **Behavioral Data Hub > Live Aggregates > Create aggregate**.
2. As the aggregate type, select **Profile**.  
2. Enter the name of the aggregate.
3. Click **Analyze profiles by** and select **Last**.
4. From the **Choose event** dropdown list, select the **Visited page** event.
5. As the event parameter, select **product:retailer_part_no**.
6. Click the **+ where** button.
7. From the **Choose parameter** dropdown list, select the **product:retailer_part_no** parameter.
8. From the **Choose operator** dropdown list, select **Is true (Boolean)**.
9. Using the date picker in the lower-right corner, set the time range to **Last 7 days**. Confirm your choice with the **Apply** button.
7. Click **Save**.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/email_aggregate_lsp.png" alt="The view of the aggregate configuration"  class="large">
<figcaption>Configuration of the aggregate returing the ID of the last seen product</figcaption>
</figure> 

## Prepare an AI recommendation
---
In this part of the process, you will configure a similar items recommendation which will be later used in the email template. You can use a different recommendation type according to your business needs.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/ai-hub-icon.svg" alt="AI Hub icon" class="icon" > **AI Hub > (AI Recommendations) Models > Add recommendation**.
2. Enter the name of the recommendation (it is only visible on the list of recommendations).
3. In the **Type & Items feed** section, click **Define**.
4. From the **Items feed** dropdown list, select an item feed.
5. In the **Type** section, choose the **Similar items** recommendation type.
6. Confirm the settings by clicking **Apply**.
7. In the **Items** section, click **Define**.
    1. Click **Add slot**.
    2. Define the minimum and maximum number of items that will be recommended to the customer in each slot.
    3. Optionally, define [Static filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#static-filters) and [Elastic filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#elastic-filters).
    4. Confirm by clicking **Apply**. 
8. Optionally, you can define the **Boosting** factors and settings in the **Additional settings** section.
9. In the right upper corner, click **Save**.

## Prepare an email template
---
In this part of the process, create an email template. You can use a predefined template or create your own template from scratch. In this case, we will use a predefined template. You will also use a specific HTML block which will let you configure the section with context recommendations in an easy way. In the configuration, we will use the [aggregate](#create-an-aggregate) and [recommendation](#prepare-an-ai-recommendation) created in the previous steps.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/experience-hub-icon.svg" alt="Image presents the Experience Hub icon" class="icon"> **Experience Hub > Email**.  
2. On the left pane, click **Templates** and from the list of template folders, select **Predefined simple templates**.
3. Select any template that mostly fits the campaign assumptions.  
**Result:** You are redirected to the code editor.
4. Edit the template according to your needs.

### Add the HTML block
---

1. From the **Content** section, select **HTML block**. Drag and drop the block to the chosen place in your template.
2. Click the **Configure** button.
3. Choose the **Predefined blocks** folder where you will find the list of all predefined templates. In this case, choose the **Context recommendation 2**.

   <div class="admonition admonition-note"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

   You can edit the template in two ways, by editing the code of the template in the **HTML** tab and/or by filling out the form in the **Config** tab. In this use case, we will use the capabilities of the predefined Config tab.

   </div></div></div>


### Edit the form in the Config tab
---
The form in the **Config** tab is already filled with default values. You can keep them or change them to fit your business needs.  

1. In the **Recommended products** section:
    1. From the **Recommendation campaign ID** dropdown list, select the [recommendation you prepared in the previous step](#prepare-an-ai-recommendation). You can find it by typing its name or ID in the search box.
    2. From the **Agregate ID with context product** dropdown list, select the [aggregate you created in the previous step](#create-an-aggregate). You can find it by typing its name or ID in the search box.
2. In the section below, you have the option to customize email width, number of products, title, price and sale price font color of the product, gap height (height between information about the product and CTA button), background and font color of the button as well as its border radius and text.
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/context_config.png" alt="The view of the html block configuration"  class="large">
    <figcaption>Html block configuration</figcaption>
    </figure> 
3. After you make changes to the template, you can check the preview.
    1. On the upper left side, click the **Preview Contexts** button.
    2. Enter the ID of a customer.
    3. Click **Apply**.
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/html_block_p.png" alt="The view of the html block"  class="large">
    <figcaption>Html block preview</figcaption>
    </figure> 

4. If the block is ready, click **Next** on the upper right side to proceed, or click the arrow next, and from the dropdown select **Save as**. If you want to save the block, on the pop-up:
    1. In the **Template name** field, enter the name of the template.
    2. From the **Template folder** dropdown list, select the folder where the template will be saved.
    3. Confirm by clicking **Save**.

### Save the email template
---
1. If the template is ready, click the arrow next to **Use in communication** in the upper right corner, and from the dropdown select **Save as**.
2. On the pop-up:
    1. In the **Template name field**, enter the name of the template.
    2. From the **Template folder** dropdown list, select the folder where the template will be saved.
    3. Confirm by clicking **Save**.

## Create a workflow
---
In this part of the process, you will create the workflow which sends emails with recommendations of products similar to those last seen by a customer. The workflow is triggered when the customer finishes their session on the site. The email will be sent maximum once a month to customers who didn’t make a purchase in the last 30 days.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/automation-hub-icon.svg" alt="Automation Hub icon" class="icon" > **Automation Hub > Workflows > New workflow**.  
2. Enter the name of the workflow.  

### Define the Profile Event trigger node
At this stage, we will configure the conditions that launch the workflow. As a trigger, we will use the `session.end` event.

1. As the first node of the workflow, add **Profile Event**. In the configuration of the node:
    1. From the **Choose event** dropdown menu, choose the **session.end** event.
    2. Confirm by clicking **Apply**.

### Define the delay
Add the Delay node to define the lag between the `session.end` event and sending an email with a product recommendation to a customer. In this example it is 1 hour.

1. Add the **Delay** node, in the configuration of the node:
    1. In the **Delay** field, enter `1`.
    2. From the **Unit** dropdown, choose **Hour**.
    3. Confirm by clicking **Apply**.

### Define the Profile Filter node
As the next step, add the **Profile Filter** node, which checks if the customer made a transaction in the last 30 days. If the customer has not made a transaction, we will send them an email with recommendations, and if they have, then the workflow ends.

1. Add the **Profile Filter** node.
2. From the **Choose filter** dropdown list, select the **transaction.charge** event.
4. Using the date picker in the lower-right corner, set the time range to **Custom> Last 30 days**. Confirm your choice with the **Apply** button.
5. Click **Apply**.

### Configure the Send Email node

1. To the **Not matched** path, add the **Send Email** node. In the node settings:
    1. In the **Sender details** section, choose the email account from which the email will be sent.
    2. In the **Content** section, type the **Subject** and from the **Template** dropdown, select [the template you prepared in the previous step](#prepare-an-email-template).
    3. In the **UTM & URL parameters** section, you can define the UTM parameters added to the links included in the email. 
    4. In the **Additional parameters** section, you can optionally assign [parameters](/docs/campaign/e-mail/creating-email-campaigns#adding-custom-parameters), which will be added to every event generated by this communication.
2. Click **Apply**.

### Add the finishing nodes and set capping

1. Add the **End** nodes after **Send Email** node and to the **Matched** path after the **Profile Filter** node.
2. In the upper right corner, click **Set Capping** and define the limit of workflows a profile can start:
    1. Set **Limit** to 1.
    2. Set **Time** to 30 days.
4. Confirm by clicking **Apply**.
5. In the upper right corner, click **Save & Run**.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/email_wrkflw.png" alt="The view of the workflow configuration"  class="full">
<figcaption>Workflow configuration</figcaption>
</figure> 

## Check the use case set up on the Synerise Demo workspace
---
You can check the configuration of each step directly in our Synerise Demo workspace:
- [Aggregate](https://app.synerise.com/analytics/aggregates/1162c599-338f-32f7-ba20-b1bb64fcaed0)
- [AI Recommendation](https://app.synerise.com/ai-v2/recommendations/pcJ44bk6rXz2)
- [Template](https://app.synerise.com/campaigns/create/56bf912a-53fc-4785-afd9-fa127c44dd9a)
- [Workflow](https://app.synerise.com/automations/automation-diagram/2dd2c994-cc88-42b2-95d9-a1c82ff0ee3b)

If you’re our partner or client, you already have automatic access to the **Synerise Demo workspace (1590)**, where you can explore all the configured elements of this use case and copy them to your workspace.  

If you’re not a partner or client yet, we encourage you to fill out the contact [form](https://demo.synerise.com/request) to schedule a meeting with our representatives. They’ll be happy to show you how our demo works and discuss how you can apply this use case in your business. 

## Read more
---
- [Aggregates](/docs/analytics/aggregates)
- [Creating email templates](/docs/campaign/e-mail/creating-email-templates)
- [Html blocks](/docs/campaign/e-mail/creating-email-templates/creating-custom-html-block-basic-builder)
- [Recommendations](/docs/ai-hub/recommendations-v2)
