Site Variables

Change your website's text, alerts, and toggles from the dashboard — no code changes required.

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

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

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

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:

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

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:

<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

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:

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

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.

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:

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

<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

For custom logic, the same values are available programmatically:

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

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

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

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.

On this page