3. Using the Variables

Once your SyncVariables are configured, you can easily display them on your website using the data-variable attribute.

Use data-variable="variableName" wherever you want the variable's value to appear, replacing variableName with the name you set in the dashboard.

Example 1

If you named your variable orderCount, you can display it like this:

<h1>Amount of orders: <span data-variable="orderCount"></span></h1>

This code will automatically fetch and display the latest value of orderCount within the <span> tag.

Example 2

You can also apply custom styling to the displayed text. For example:

<span class="text-3xl font-switzer font-black" data-variable="orderCount"></span>

In this example, the orderCount value will be displayed with large, bold, and custom-styled text.

The data-variable attribute can be used within any HTML element to dynamically update your website with real-time data.