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

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

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

Scheduling a Variable

Use the Schedule fields to set a variable live at a future date and retire it automatically — a holiday promo, a seasonal notice, a "closed for maintenance" banner. Outside the window the variable is treated exactly as if it were disabled: your site falls back to whatever content is already on the page.

Both bounds are optional and can be used on their own:

Times are your location's local time. If you manage several locations, or you're logged in while travelling, the times you enter are always read in the location's own time zone — the dashboard shows which one next to the fields. Daylight saving transitions are handled for you.

The variables list shows where each one stands at a glance:

Scheduling and the Enabled toggle work together: a scheduled variable still has to be enabled to appear. Switching a variable off is the manual override, and flipping it back on resumes its schedule — the dates aren't lost.

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>

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.

Because of the same 60-second cache, a variable can take up to a minute to appear or disappear at its scheduled boundary. Schedule anything time-critical a minute early.

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, disabled, or outside its schedule, 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.