Spin the Wheel pop-up powered by a Brickworks schema

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 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.

Prerequisites

• Implement a tracking code on your website.
• Create an API Key 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 for each prize on the wheel.

Process

In this use case, you will go through the following steps:

• Create a HTTPS connection. The external source uses this connection to get data from the the voucher API.
• Create an external source that will be used by Brickworks schema to get up-to-date informations about vouchers.
• Create a main dynamic content that customer will interact with.
• For each reward create a dedicated dynamic content.
• Create a Brickworks schema that defines the data structure for wheel rewards.
• Create records that store individual reward definitions (text, colors, probabilities, voucher pools) and bind schema fields to actual data.
• Adjust the snippet 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.

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.

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.
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

Create a main dynamic content

Create a dynamic content that will be displayed to all website visitors. You can use a ready-made template 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.
   

   

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. They will be later needed in Brickworks schema. This time you will use Jinjava insert.

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.

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 %} 

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.

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 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 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.

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 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:

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.
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.
     
   • 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. You will need these IDs in 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 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 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
• Dynamic Content- main template
• Dynamic Content - templates assigned to vouchers
• Brickworks schema - fields definition
• Brickworks schema - records
• Snippet

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 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
• Dynamic Content
• Jinjava Interts
• Brickworks
• Snippets