Adding interactive elements to your website is an effective way to capture attention and encourage users to engage with your brand. A gamified “Spin the Wheel” experience introduces an element of chance and reward, making promotional campaigns more engaging and memorable. In this use case, you will create a Spin the Wheel promotional pop-up triggered by a bottom bar on the website. Instead of displaying the pop-up automatically, the interaction is initiated by the user, which makes the experience less intrusive and more intentional. What makes this scenario different is the use of [Brickworks](/docs/assets/brickworks) to manage reward configuration. Each wheel segment is defined as a structured record containing properties such as label, color, probability, and assigned voucher pool. This approach separates presentation from data, making it easier to update rewards, adjust probabilities, and scale the campaign without modifying the main dynamic content. As a result, you can deliver a flexible and maintainable gamified experience in which users spin the wheel to receive a discount code that can be redeemed during checkout.

Before implementing this use case in a production environment, please review local regulations related to promotional lotteries and games of chance. We recommend consulting your legal or compliance team to confirm all requirements. Any additional formalities, such as preparing terms and conditions or submitting the promotion to the relevant tax or regulatory authorities, remain the responsibility of the implementing company.

## Prerequisites --- - Implement a [tracking code](/developers/web/installation-and-configuration) on your website. - [Create an API Key](/docs/settings/tool/api#adding-api-keys) with basic authentication and permissions connected with the vouchers such as `VOUCHERS_ITEM_LIST_BY_POOL_READ` (used in the External Source configuration for the Brickworks schema). - Create separate [code pools](/docs/assets/code-pools#creating-a-code-pool) for each prize on the wheel. ## Process --- In this use case, you will go through the following steps: - [Create a HTTPS connection](#create-a-https-connection). The external source uses this connection to get data from the the voucher API. - [Create an external source](#create-an-external-source) that will be used by Brickworks schema to get up-to-date informations about vouchers. - [Create a main dynamic content](#create-a-main-dynamic-content) that customer will interact with. - For each reward [create a dedicated dynamic content](#create-a-dynamic-content-for-each-prize). - [Create a Brickworks schema](#create-a-brickworks-schema) that defines the data structure for wheel rewards. - [Create records](#create-records) that store individual reward definitions (text, colors, probabilities, voucher pools) and bind schema fields to actual data. - [Adjust the snippet](#adjust-the-snippet-template) that pulls Brickworks records at render time and exposes them to the main dynamic content, where they are used by JavaScript to render the wheel and apply reward logic. ## Create a HTTPS connection --- In this part of the process, you will create HTTPS connection with Synerise. 1. Go to **Settings > Connections > New connection**. 2. Choose **HTTPS**. 3. Choose **Login & Password**. 4. Complete the fields: - **Connection name** - **Login** - **Password** 5. Click **Apply**.

connection result — Configuration of the HTTPS connection

## Create an external source --- In this part of the process, you will create an external source that connects to API and lets you get up-to-date information about number of active and assigned vouchers per voucher pool.

Responses are cached for 60 seconds. This is a platform-level TTL you **can not** change.

1. Go to **Data Modeling Hub > External Sources > New external source**. 2. Select the method of authorization as **Login & Password**. 3. Select a connection you created in [HTTPS connection step](#create-a-https-connection). 4. From the **Method** dropdown list, select **POST**. 5. In **URL**, provide the endpoint adress: `https://api.synerise.com/v4/vouchers/item/count/{{record.voucherpoolid}}` 6. In **TTL** field enter `60`. 7. In the **Headers** section, by clicking **Add header** three times define such request headers: - In the key field, enter **Accept** and provide the `application/json` as the value - In the next key field, enter **Api-version** and provide the `4.4` as the value - In the last key field, enter **content-type** and provide the `application/json` as the value

external source configuration — Configuration of the external source

## Create a main dynamic content --- Create a dynamic content that will be displayed to all website visitors. You can use a [ready-made template](https://app.synerise.com/campaigns/dynamic-content/content-manager/template/281906) available on the Synerise Demo workspace. 1. Go to **Experience Hub > Dynamic Content > Create new**. 2. Enter the name of the content. 3. Choose the **Insert object** type. ### Define audience 1. To select the recipients of the dynamic content, on the **Audience tab**, click **Define**. 2. Select **Everyone**. 3. Click **Apply**. ### Define content In the next step, you will create the dynamic content with the help of a ready-made template. 1. In the **Content** section, click **Define**. 2. Click **Create message** and from the list of template folders, select **Spin the Wheel**. 3. Select the **[UC] Spin&win** template. **Result**: You are redirected to the code editor. 4. Edit the template according to your needs.

spin the wheel DC template — DC template

5. After customizing your dynamic content, click **Save**. 6. Set an appropriate **CSS selector** to define the placement of the banner that releases the pop-up. The correct selector depends on your website’s structure, so make sure to reference an element that ensures the bar is displayed in the intended position. 7. Click **Apply**. ### Define schedule and display settings As the final part of the section, you will define the display settings of the dynamic content such as schedule, triggers, and delay. 1. In the **Schedule** section, click **Define** and set the time when the dynamic content will be active. 2. Click **Apply**. 3. In the **Display Settings** section, click **Define**. If you want the banner to be displayed to all users continuously across the website upon landing, keep the default settings. 4. Click **Apply**. 5. Optionally, you can define the UTM parameters and additional parameters for your dynamic content. 6. Click **Activate**. ## Create a dynamic content for each prize --- In this part of the process, you will create dynamic content templates that will be assigned to different [voucher pools](/docs/assets/code-pools). They will be later needed in Brickworks schema. This time you will use [Jinjava insert](/developers/inserts/insert-usage#code-pools). 1. Go to **Experience Hub > Dynamic Content > Create new**. 2. Enter the name of the content. 3. Choose the **Insert object** type. ### Define audience 1. To select the recipients of the dynamic content, on the **Audience tab**, click **Define**. 2. Select **Everyone**. 3. Click **Apply**. ### Define content In the next step, you will create the dynamic content with the [Jinjava tag for vouchers](/developers/inserts/insert-usage#code-pools). 1. In the **Content** section, click **Define**. 2. Click **Create message** and then **New template**. 3. Select the **Code editor** type. **Result**: You are redirected to the code editor. 4. Enter this code in the **HTML** tab replacing `pool-uuid` with those from your voucher pools: ``` {% vouchervar id=pool-uuid %} {{ voucher_result }} {% endvouchervar %} ```

config panel — Code editor with jinjava insert

5. After customizing your dynamic content, save the changes by clicking on **Use in communication** button. 6. Set **CSS selector** to `#synSpinPromoCode` and its **location** to `Inner`. Those settings define the placement of the prize that can be claimed through modal showed after spin. The correct selector depends on your main dynamic content template’s structure, so make sure to reference an element that ensures the result is displayed in the intended position. 7. Click **Apply**. ### Define schedule and display settings As the final part of the section, you will define the display settings of the dynamic content such as schedule, triggers, and delay.

Make sure that all dynamic content templates have the same schedule options as it is required for use case to work correctly.

1. In the **Schedule** section, click **Define** and set the time when the campaign will be active. 2. Click **Apply**. 3. In the **Display Settings** section, click **Define**. If you want the banner to be displayed to all users continuously across the website upon landing, keep the default settings. 4. Click **Apply**. 5. Optionally, you can define the UTM parameters and additional parameters for your dynamic content. 6. Click **Activate**. Repeat [this step](#create-a-dynamic-content-for-each-prize) for each voucher pool that should be included in the wheel. ## Create a Brickworks schema --- In this step of the process, you will create a [Brickworks](/docs/assets/brickworks) simple schema that defines the structure of the spin&win. The schema specifies the field names, types, and configuration options. 1. Go to **Data Modeling Hub > Schemas > New Schema**. 2. Choose **Simple Schema**. 3. Enter the **Display name**, for example `spin&win`. 4. In **API name** field enter `spinWin`. 5. Optionally, add a **description**. ### Add id field 1. Click **Add new field** and choose the **String** field type. 2. In the **Field basics** section, complete the fields: - **Display name**: `id` - **API name**: `id` 3. In the **Validation** section, enable the **Required field** checkbox. 4. In the **Advanced** section, enable the **Unique values only** checkbox. 5. Click **Apply**.

Configuration of the id field in the Brickworks schema

### Add displayColor field 1. Click **Add new field** and choose the **String** field type. 2. In the **Field basics** section, complete the fields: - **Display name**: `displayColor` - **API name**: `displaycolor` 3. In the **Validation** section, enable the **Required field** checkbox. 4. Click **Apply**.

### Add displayText field 1. Click **Add new field** and choose the **String** field type. 2. In the **Field basics** section, complete the fields: - **Display name**: `displayText` - **API name**: `displaytext` 3. In the **Validation** section, enable the **Required field** checkbox. 4. Click **Apply**.

### Add probability field 1. Click **Add new field** and choose the **Number** field type. 2. Select **Integer**. 3. In the **Field basics** section, complete the fields: - **Display name**: `probability` - **API name**: `probability` 4. In the **Validation** section, enable the **Required field** checkbox. 5. Click **Apply**.

### Add winChance field 1. Click **Add new field** and choose the **Number** field type. 2. Select **Integer**. 3. In the **Field basics** section, complete the fields: - **Display name**: `winChance` - **API name**: `winchance` 4. In the **Validation** section, enable the **Required field** checkbox. 5. Click **Apply**.

### Add resultText field 1. Click **Add new field** and choose the **String** field type. 2. In the **Field basics** section, complete the fields: - **Display name**: `resultText` - **API name**: `resulttext` 3. In the **Validation** section, enable the **Required field** checkbox. 4. Click **Apply**.

### Add voucherCampId field 1. Click **Add new field** and choose the **String** field type. 2. In the **Field basics** section, complete the fields: - **Display name**: `voucherCampId` - **API name**: `vouchercampid` 3. In the **Advanced** section, enable the **Unique values only** checkbox. 4. Click **Apply**.

### Add voucherPoolId field 1. Click **Add new field** and choose the **String** field type. 2. In the **Field basics** section, complete the fields: - **Display name**: `voucherPoolId` - **API name**: `voucherpoolid` 3. In the **Advanced** section, enable the **Unique values only** checkbox. 4. Click **Apply**.

### Add voucherData field 1. Click **Add new field** and choose the **External Data** field type. 2. In the **Field basics** section, complete the fields: - **Display name**: `voucherData` - **API name**: `voucherdata` 3. In the **Configuration** section, select an [external source](#create-an-external-source) you made at the beginning of the process. 4. Click **Apply**.

### Overview of the complete schema After adding all fields, the schema should contain the following fields:

fields definition — Overview of all fields in the spin&win Brickworks schema

### Set up the Audience & Settings 1. Click the **Audience & Settings** tab. 2. In the **Audience** section, click **Define**. 3. Choose **Everyone**. 4. Click **Apply**.

5. In the upper-right corner, click **Save**. ## Create records --- In this part of the process you will define the prizes that will be displayed on the wheel. 1. Go to **Data Modeling Hub > Records**. 2. Click **Select schema** and choose Brickworks schema you created in [previous step](#create-a-brickworks-schema). 3. Click **New record**. 4. Add a name for the record, for example `reward1`. 5. Add a **slug** for the record. Slug is a unique, URL-friendly version of the name containing only lowercase letters, numbers, and hyphens. For example: `reward-1`. 6. Fill in the field values by assigning the appropriate data to each field: - **id** → provide unique reward identifier, for exaple `reward1`. - **displayColor** → provide hex color of the segment, for example: `#47002c`. - **displayText** → provide text that will be displayed on the wheel segment, for example: `5% OFF`. - **probability** → provide relative weight for segment selection, for example: `35`.

Total probability weight of all prizes **must** sum up to 100. More details on how the algorithm works are provided in the [snippet](#adjust-the-snippet-template).

- **winChance** → provide percentage chance of acually winning once the wheel land on that segment (in scale from 0 to 100), for example: `98`. - **resultText** → provide text shown in the result modal, for example: `You won 5% off your next purchase!`. - **voucherCampId** → provide **dynamic content ID** that assigns the voucher. - **voucherPoolId** → provide **voucher pool's ID** inside dynamic content pointed by voucherCampId. 7. Click **Publish** to publish your record.

After publishing the record, note the **schema ID** and **record ID** from the [URL](/docs/assets/brickworks/core-concepts#record-identifiers). You will need these IDs in the [snippet template](#adjust-the-snippet-template) to reference the Brickworks data via the `{% brickworksgeneratevar %}` tag, which is later used in the main dynamic content (in its JavaScript layer) to load reward data at render time.

Repeat [this step](#create-records) for each prize that should be included in the wheel. ## Adjust the snippet template --- To conclude this process, adjust the snippet template to your needs. This snippet pulls reward data from Brickworks at render time and is used directly in the main dynamic content, where it acts as a single source of truth for reward configuration, probability rules, and real‑time voucher availability, keeping the campaign logic centralized and easy to maintain. 1. Go to **Data Modeling Hub > Snippets**. 2. Select the **spin&win-config & analytics** snippet. 3. Go to the **Code** tab. 4. Add one block per reward, swapping `SCHEMA_ID` and `RECORD_ID` for each [Brickworkd schema record](#create-records) from its URL: ``` {% brickworksgeneratevar schemaId=SCHEMA_ID recordId=RECORD_ID %} {% do entries.append( "{id: \"" ~ brickworks_result.id ~ "\", displayText: \"" ~ brickworks_result.displaytext ~ "\", remaining: " ~ (brickworks_result.voucherdata.data.activeCount - brickworks_result.voucherdata.data.assignedCount) ~ ", displayColor: \"" ~ brickworks_result.displaycolor ~ "\", winChance: " ~ brickworks_result.winchance ~ ", probability: " ~ brickworks_result.probability ~ ", voucherPoolId: \"" ~ brickworks_result.vouchercampid ~ "\",timestamp: \"" ~ brickworks_result.voucherdata.data.countAt ~ "\", resultText: \"" ~ brickworks_result.resulttext ~ "\"}" ) %} {% endbrickworksgeneratevar %} ``` 5. Click **Save**. ## Check the use case set up on the Synerise Demo workspace --- You can check the configuration of each step directly in Synerise Demo workspace: - [External Source](https://app.synerise.com/assets/brickworks/external-sources/29e9a4cc-ae0a-4ad5-923b-7f4dc4d9f4ed) - [Dynamic Content- main template](https://app.synerise.com/campaigns/dynamic-content/content-manager/template/281906) - [Dynamic Content - templates assigned to vouchers](https://app.synerise.com/campaigns/dynamic-content/content-manager/template-directories/27c4b548-8f8b-497c-984e-fdb164b5d380) - [Brickworks schema - fields definition](https://app.synerise.com/assets/brickworks/schemas/cf9c1db3-bcf8-468a-9718-453a6b6c8873) - [Brickworks schema - records](https://app.synerise.com/assets/brickworks/schemas/cf9c1db3-bcf8-468a-9718-453a6b6c8873/records) - [Snippet](https://app.synerise.com/assets/snippets/ea31c15a-2be6-4a85-a66c-3b69ef3fc410) 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://www.synerise.com/demo-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 --- - [External Source](/docs/assets/brickworks/creating-external-source) - [Dynamic Content](/docs/campaign/dynamiccontent) - [Jinjava Interts](/developers/inserts) - [Brickworks](/docs/assets/brickworks) - [Snippets](/docs/assets/snippets)