# Site Variables (/docs/blog/site-variables)



Site variables let you define values in the dashboard that your own website reads dynamically. Update a headline, switch on an alert banner, or toggle seasonal content — the change appears on your site within about a minute, without touching your website's code or redeploying it.

Like the blog, site variables are scoped to a location, so multi-location businesses manage each site's content separately.

Creating Variables [#creating-variables]

1. Navigate to **Dashboard > CMS > Site Variables**
2. Click **New Variable**
3. Choose a key, type, and value
4. Save — your website picks up the change automatically

Variable Fields [#variable-fields]

| Field           | Description                                                                                                                                                                            |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Key**         | How your website refers to the variable. Lowercase letters, digits, and underscores only (e.g. `hero_headline`). Dots aren't allowed — they're reserved for reaching into JSON values. |
| **Type**        | `Text`, `Number`, `Boolean`, or `JSON` — determines the editor shown and how your site can use the value.                                                                              |
| **Value**       | The content itself.                                                                                                                                                                    |
| **Description** | An optional note about what the variable controls.                                                                                                                                     |
| **Enabled**     | Disabled variables are hidden from your website entirely — handy for parking a seasonal banner without deleting it.                                                                    |

Each location can hold up to 200 variables, and each value can be up to 16 KB.

Using Variables on Your Website [#using-variables-on-your-website]

If your site already loads the Resytech script for bookings, there's nothing extra to install. Otherwise, add the script tag with just your location ID:

```html
<script
  src="https://cdn.resytech.com/resytech.js"
  data-resytech-location-id="YOUR-LOCATION-ID"
></script>
```

Text Substitution [#text-substitution]

Add `data-resytech-var` to any element. The library replaces the element's text with the variable's value; whatever you write inside the element acts as the fallback while loading or if the variable doesn't exist:

```html
<h1 data-resytech-var="hero_headline">Book your adventure</h1>
```

Change `hero_headline` in the dashboard and the headline updates for every visitor — no website edit needed.

Showing and Hiding Content [#showing-and-hiding-content]

Add `data-resytech-show` to conditionally display an element. When the variable is truthy the element is shown; when it's false, missing, or disabled, the element stays hidden:

```html
<div data-resytech-show="show_winter_notice" hidden>
  Winter hours: open weekends only.
</div>
```

<Callout title="Author hidden elements with the hidden attribute">
  Write conditional elements with the `hidden` attribute (or `style="display:none"`) so they don't flash before the variables load. The library removes the attribute when the variable is truthy.
</Callout>

JSON Variables and Dot Paths [#json-variables-and-dot-paths]

JSON variables hold structured data, and bindings can reach into them with dot paths — the classic example is an alert banner your site renders only when needed:

```json
{
  "active": true,
  "message": "High winds today — jet ski tours may be delayed."
}
```

```html
<div data-resytech-show="site_alert.active" hidden class="alert">
  <span data-resytech-var="site_alert.message"></span>
</div>
```

Flip `active` to `false` in the dashboard (or disable the variable) and the banner disappears from your site.

Reading Variables from JavaScript [#reading-variables-from-javascript]

For custom logic, the same values are available programmatically:

```js
// After the script loads
const message = window.ResytechSiteVariables.get('site_alert.message');

// Re-fetch and re-apply bindings (e.g. after client-side navigation)
await window.ResytechSiteVariables.refresh();
```

Or through the API client if you're already using it:

```js
const api = new ResytechApi();
const response = await api.siteVariables.getVariables('YOUR-LOCATION-ID');
console.log(response.variables); // { hero_headline: "…", site_alert: { … } }
```

How Updates Propagate [#how-updates-propagate]

Variable reads are cached for up to 60 seconds, so a dashboard edit can take about a minute to appear on your website. Pages with no variable bindings never make a request at all.

Good to Know [#good-to-know]

* Values are inserted as plain text — a variable can never inject HTML or scripts into your page.
* If a variable is missing or disabled, `data-resytech-var` elements keep their fallback content and `data-resytech-show` elements stay hidden.
* Renaming a key means updating any `data-resytech-var` / `data-resytech-show` attributes on your site that reference it — treat keys as a contract with your website.