Reservation.Studio JavaScript Widget

Overview

The Reservation.Studio JavaScript Widget lets you embed booking functionality into any website. This lightweight widget provides a customizable booking interface connected to the Reservation.Studio platform.

Quick start

Installation

Add the following code to your website:

<script>
  var RSConfig = {
    type: 'location_services',
    slug: 'your-location-slug',
  };
  !(function (b, c, d) {
    var a,
      e = b.getElementsByTagName(c)[0];
    b.getElementById(d) ||
      (((a = b.createElement(c)).id = d),
      (a.src = 'https://js-widget.reservation.studio/v2/widget.min.js'),
      e.parentNode.insertBefore(a, e),
      (a.onload = function () {
        window.RSWidget(RSConfig);
      }));
  })(document, 'script', 'rs-booking-widget-js');
</script>

Configuration

Required options

Option	Type	Description	Default
type	string	Booking view type	location_profile
slug	string	Unique identifier for your location or business	-

Supported types:

• location_profile
• location_services
• location_service_category
• location_classes
• business_profile

Optional options

Option	Type	Description	Default
language	string	Widget language (bg, en, de, es, it, fr, tr, ro, el, mk, ru)	Browser language
buttons_selector	string	CSS selector for elements that should open the widget	-
parameters	object	Additional parameters to pass to the widget	-

Sticky button options

Configure the floating button under sticky_button:

Option	Type	Description
text	string	Button text
text_color	string	Text color
background_color	string	Background color
tooltip_text	string	Tooltip text
tooltip_expire_time	number	Tooltip expiration in seconds
tooltip_show_delay	number	Delay before showing tooltip in seconds
position	string	Button position

Tooltip state is managed using cookies. After the user closes the tooltip, it will not appear again until it expires (tooltip_expire_time).

Available positions:

• top-left, top-middle, top-right
• right-top, right-middle, right-bottom
• bottom-left, bottom-middle, bottom-right
• left-top, left-middle, left-bottom

Modal window options

Configure the modal window under modal:

Option	Type	Description	Default
max_width	string	Max width (e.g., 500px or 90%)	1320px
max_height	string	Max height (e.g., 500px or 90%)	98%

Request parameters

Pass additional parameters using parameters:

var RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  parameters: {
    category: '123',
    services: '123,124',
  },
};

Supported parameters:

Parameter	Type	Description	Example
category	string	Displays a category	'123'
services	string	Comma-separated list of service IDs to preselect	'123,124'

UTM parameters

Track marketing campaigns with the utm options:

Option	Type	Description
source	string	Traffic source
medium	string	Traffic medium
campaign	string	Campaign name
content	string	Content identifier
term	string	Search term

The widget automatically detects UTM parameters from the page URL (utm_source, utm_medium, etc.) and stores them in local storage. They are used for all widget interactions until they expire (default: 1 hour). If no UTM parameters are present, the widget uses defaults source: 'reservation.studio', medium: 'js-widget'.

Advanced usage

Custom trigger buttons

Use buttons_selector to specify which elements should open the widget on click:

<!-- HTML -->
<button class="open-booking-widget">Book now</button>

<!-- JavaScript config -->
<script>
  var RSConfig = {
    type: 'location_services',
    slug: 'your-location-slug',
    buttons_selector: '.open-booking-widget',
  };
</script>

Selectors can target elements by class, ID, tag name, or complex CSS selectors.

Note: Elements must exist when the widget initializes. Dynamically added elements may not work as expected.

Dynamic configuration with data attributes

Customize widget behavior for specific buttons using data attributes:

<!-- Different location -->
<button class="open-booking-widget" data-slug="location2">
  Book at Location 2
</button>

<!-- Different language -->
<button class="open-booking-widget" data-language="en">Book in English</button>

<!-- Custom UTM parameters -->
<button
  class="open-booking-widget"
  data-utm='{"source":"newsletter","medium":"email"}'
>
  Book from newsletter
</button>

<!-- Filter by category -->
<button class="open-booking-widget" data-parameters-category="123">
  Book by category
</button>

<!-- Filter by services -->
<button class="open-booking-widget" data-parameters-services="123,124">
  Book specific services
</button>

For request parameters, use the form data-parameters-{name} where {name} is the parameter name. Nested parameters can be expressed by chaining names with hyphens.

Note: The slug, language, utm, and request parameters (via data-parameters-*) can be overridden via data attributes.

Full list of options and descriptions: Component options.