Presenting accurate and up-to-date product content across channels often requires combining product catalog data with dynamically generated recommendations. [Brickworks](/docs/assets/brickworks) allows you to define a product template that can pull product attributes directly from your catalog and extend it with AI-based similar products. In this use case, you will create a schema enabling templates to return: - dynamic product information coming from a Synerise catalog - dynamically computed similar products based on an AI recommendation model Additionally, this schema will serve as an in-app template derived from a template available in the Synerise Demo workspace (ID: 1590) and will be displayed directly within the application. The goal is to enable an in-app view that appears when a user adds a product to their favorites from that product’s page (triggered by the product.addToFavorite event). This view will display the selected product alongside AI-generated recommendations of similar items.
In-app message example
## Prerequisites --- - Import a product feed to Synerise. You can find instructions [here](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-search). - 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). - Implement a custom event for adding a product to favorites, which will be available in the customer profile. In this example, the event is called `product.addToFavorite`. Implement custom events in your [mobile application](/developers/mobile-sdk/event-tracking#product-added-to-favorites) or [website](/developers/web/event-tracking#declarative-tracking-custom-events). ## Process --- In this use case, you will go through the following steps: 1. [Create an AI recommendatons](#create-an-ai-recommendations) with similar products. 2. [Create a schema](#create-a-schema) with similar AI recommendations. 3. [Create the record](#create-the-record). 3. [Create an in-app campaign](#create-an-in-app-campaign) based on the brickworks schema. ## Create an AI recommendations --- In this part of the process, you will configure a [similar items recommendation](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign) with context. This recommendation will later act as a reusable data source inside the schema, so any component that uses the schema will automatically access consistent recommendations. 1. Go to AI Hub icon **AI Hub > (AI Recommendations) Models > Add recommendation**. 2. Enter the name of the recommendation (it is only visible on the list of recommendation). 3. In the **Type & Items feed** section, click **Define**. 4. From the **Items Feed** dropdown list, as an item feed, select an item catalog which you configured as a part of [prerequisites](#prerequisites). 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**. 8. Define the minimum and maximum number of items that will be recommended to the customer in each slot. 9. 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). 10. Confirm by clicking **Apply**. 8. Optionally, you can define the **Boosting** factors. 9. In the right upper corner, click **Save**. ## Create a schema --- In this section, you will [create a Brickworks schema](/docs/assets/brickworks/quick-start/creating-a-schema) with fields for product information and AI recommendations. The schema acts as a structured container for all data that will later be displayed to users in different channels. By defining fields here, you create a single place where product-related information is stored, updated, and reused across templates, campaigns, and runtime contexts. 1. Go to **Data Modeling Hub > Schemas > New schema**. 2. Choose **Simple Schema**. 3. Enter a name for the schema, in **Display name** for example **Product template**. **API names** value is pre-filled with the value from Display name. The value in this field is the unique identifier used to reference this schema in API requests. 4. Optionally, fill in the **Description** field. ### Add Product Name 5. Click **Add new field** and choose **String** 3. Complete the fields: - Add **Display name** for the field in our case `Product name`. - **API name** will be pre-filled automatically. 4. Set the field as **Required** by selecting the **Required field** checbox. 5. To save your changes, click **Apply**.
The view of the brickworks configuration
Brickworks configuration
### Add Item ID 5. Click **Add new field** and choose **Jinjava code** 3. Complete the fields: - Add the **Display name** for the field in our case `Item ID`. - The **API name** will be pre-filled automatically. 4. Check the **Cast to** field. By default, Jinjava output is cast to string. Use this option to cast the result to another type (number, boolean, JSON). 5. Choose type as the `Integer`. 5. To save your changes, click **Apply** .
The view of the brickworks configuration
Brickworks configuration
### Add Product Catalog 5. Click **Add new field** and choose **Catalog**. 3. Complete the fields: - Add the **Display name** for the field in our case `Product Catalog`. - The **API name** will be pre-filled automatically. 4. From the catalogs list, choose the catalog with the product feed which you imported as a part of [prerequisites](#prerequisites) 5. Optionally you can enter the primary key used to identify items in the catalog (string or JINJAVA). In this case it will be Jinjava primary key with the value: `{{ record.itemid }}`. 5. Click **Apply** to save your changes. ### Add the AI Recommendations 5. Click **Add new field** and choose **AI Recommendations** 3. Complete the fields: - Add the **Display name** for the field in our case `Similar Products`. - The **API name** will be pre-filled automatically. 4. Choose from the list AI Recommendations created in the [previous step](#create-an-ai-recommendations) 5. Enter the Product context - Item ID passed as context for recommendations. In pur case it will be Jinjava primary key with the value:`{{ record.itemid }}`. It is required in similar/complementary campaigns. Optional in personalized ones. 5. To save your changes, click **Apply**.
The view of the brickworks configuration
Brickworks configuration
### Set up the Audience & Settings 1. Click the **Audience & Settings** tab. 2. In the **Audience** section, click **Define**. 3. Choose the schema recipients, in our case, choose **Everyone**. 4. Click **Apply**. 5. In the upper-right corner, click **Save.** ## Create the record --- [Creating a record](/docs/assets/brickworks/quick-start/creating-a-record) means adding the data to the schema. It means that you fill out schema fields with the actual values. This step fills the structure you created earlier with real data that will be rendered to the user. Anything you enter here becomes the source of truth for templates, recommendations, and dynamic elements across your communication channels. By storing product-specific information inside the record, you ensure that all in-app messages, PDP blocks, or emails referencing this schema always draw from the same, consistent data set. 1. Go to **Data Modeling Hub > Data collection > Select schema**. 2. Choose [schema created in the previous part of the process](#create-a-schema). 3. Click **Add record**. 4. Add a name for the reocrd. 5. Add a slug for the reocrd. Slug is a unique, URL-friendly version of the name. It usually contains only lowercase letters, numbers, and hyphens. In our case it will be `dynamic`. 6. As an itemId add `{{ context.itemid }}`. 7. Click **Publish** to publish your record. ### Previewing records After saving the record either as a draft (in case of records created based on versioned schemas) or publishing it (in case of both schema types), you can [preview the record](/docs/assets/brickworks/quick-start/creating-a-record#previewing-records) for the context of a selected user. This context-driven approach enables your records to adapt dynamically based on the requesting application, user session, or any external factors you define. 1. Go to **Data Modeling Hub > Data collections**. 2. In the header, from **Select schema* dropdown list, select the [schema](#create-a-schema) created previously. 3. Find the record which you want to preview. 4. Enter the record configuration. 5. Click the **Preview context**. 6. From the dropdown list, find a profile for whom you want to generate record preview. This means the same record can render completely differently depending on the context you provide. 6. Click **Add parameter** and choose the parameter from your catalog you want to preview, in our case it will be `itemid`. As the value of this field add the example itemid value for exemplary product.
The view of the brickworks configuration
Brickworks configuration
**Result**: You will see the dynamic preview with the data about the specific product from your catalog.
The view of the brickworks configuration
Brickworks configuration
What is more you can see what similar recommendations will be generated for this specific product for the choosen user.
The view of the brickworks configuration
Brickworks configuration
## Create an in-app campaign --- In this part of the process, you [create an in-app campaign](/docs/campaign/in-app-messages/create-inapp-message) triggered by the `product.addTofFavorite` event. We will use a template available on the Demo Workspace (1590), so there is no need to create a template from scratch, you can copy the template to your workspace and use it. 1. Go to Experience Hub icon **Experience Hub > In-app messages> Create in-app**. 2. Enter the name of the in-app. ### Define the audience --- As the first step, define the target group of customers for the in-app message. 1. In the **Audience** section, click **Define**. 4. Click **Everyone**. 8. To save the audience, click **Apply**. ### Define content --- In this part of the process, you will create the content of the in-app message that will appear in the mobile application with the help of ready-made template. 1. In the **Content** section, click **Define**. 2. Click **Create message**.
We’re using a ready-made template available in the 1590 Synerise Demo workspace. You can use this template as a base and copy it into your own workspace.
**Result:** You are redirected to the code editor.
You can edit the template in two ways, by editing the code of the template [add snippets](/docs/campaign/in-app-messages/creating-inapp-templates/creating-inapp-template#adding-a-snippet-to-the-template-code), [add variables](/docs/campaign/in-app-messages/creating-inapp-templates/creating-inapp-template#adding-a-variable) 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.
#### Edit form in the Config tab --- The form in the **Config** tab is already filled in with default values. You can keep them or change them to fit your business needs.
The view of the brickworks configuration
In-app configuration
1. To the **Schema ID** field, add the ID of the [schema created as the part of prerequisites](#create-a-schema). You can find schema ID in the URL of the schema. 2. To the **Record ID** field, add the ID of the [record created as the part of prerequisites](#create-the-record). You can find the record ID in the URL of the record. 3. To the **ContextID** field, insert a value of the context parameter of the product used in the record. In our case it will be an example itemid for example: `e579487933852f3a83abd9e840175c`. 3. You can optionally edit the copy and design of the template. 10. After you make changes to the template, you can check the preview. 1. Click the **Preview** button on the upper left side. 2. Enter the ID of a customer. 3. Click **Apply**.
Considering that the in-app is very interactive, the preview in the platform may not be enough to test the in-app performance. That’s why we suggest checking the preview directly in the mobile app.
11. If the template is ready, in the upper right corner click **Save this template > Save as**. 12. 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 **Apply**. 13. To continue the process of configuring the in-app campaign, click **Next**. 14. To save your content changes, click **Apply**. ### Select events that trigger the in-app message display --- In this part of the process, you will define the event triggering the display of the in-app message. 1. In the **Trigger events** section, click **Define**. 2. Select **Add event** and from the dropdown list, choose `product.addTofFavorite` event. 3. Click the **+ where** button and select `mobile`. 4. As the logical operator, select **Exists**. 5. Click **Apply**. ### Schedule the message and configure display settings --- As the final part of the process, you will set the display settings of the in-app message such as schedule, capping, priority of the message among other in-app messages. 1. In the **Schedule** section, click **Define** and set the time when the message will be active. 2. In the **Display Settings** section, click **Change**. 3. Define the **Delay display**, **Priority index** and enable the **Frequency limit** toggle to manage the frequency of in-app message display in the application. In our case, we want to display the message to the customer a maximum of 1 time in period of 7 days.
You can additionally enable the **Capping limit** toggle to limit the amount of time the in-app message can be displayed to a user in general.
16. Click **Apply**. 17. Optionally, you can define the UTM parameters and additional parameters for your in-app campaign. 18. Click **Activate**. ## What's next --- After defining this schema, you can reuse the template across other placements as needed. It can be applied not only in PDP blocks, emails, or in-app views, but also in any additional surfaces supported by your setup—for example homepage modules, product carousels, or campaign-specific placements. This allows you to keep product data consistent while still generating similar items dynamically. ## Check the use case set up on the Synerise Demo workspace --- In Synerise Demo workspace, you can check the configuration of: - [Similar Recommendation](https://app.synerise.com/ai-v2/recommendations/Qgt7QWHu35ZB) - [Brickwork schema](https://app.synerise.com/assets/brickworks/schemas/4f90172f-2439-4e32-9588-77a156a8c6e1) - [In-app campaign](https://app.synerise.com/communications/in-app/7f5cc48e-d9d2-4bac-97cc-fb2384d358d1) 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) - [Brickworks](/docs/assets/brickworks) - [In-app messages](/docs/campaign/in-app-messages) - [Recommendations](/docs/ai-hub/recommendations-v2)