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

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

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