Skip to main content

JavaScript integration

This option is the right fit if you have access to your website HTML and JavaScript and want to control where and how the widget opens.

What you need​

  • Online booking enabled for the location.
  • The correct slug for the location or profile you want to show.
  • Access to the page where the code will be added.

Basic initialization​

Add the following code to the page where you want to initialize the widget:

<script>
  window.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>

This loads the widget runtime and passes the core configuration. After that, you still need to decide how the user will open it.

What the required fields do​

type​

It defines what the widget opens. The confirmed values in the current integrations are:

  • location_profile
  • location_services
  • location_service_category
  • location_classes
  • business_profile

slug​

This is the identifier of the profile the widget should open. If slug is missing or does not match the selected type, the widget will not load the correct target.

language​

If you do not pass a language, the widget uses the browser language with fallback to supported languages. The confirmed values in the current code are:

  • bg
  • en
  • de

Example:

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  language: 'en',
};

How the user opens the widget​

From a page button or link​

Use buttons_selector when you want the widget to open from one or more elements on the page:

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

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

All elements matching the selector will open the same target.

Different targets with data-* attributes​

If you want different buttons or links to open different targets, you can keep one shared buttons_selector and pass overrides through data-* attributes on the clicked element.

The confirmed per-element overrides in the current JavaScript widget are:

  • data-slug
  • data-type
  • data-language
  • data-utm

Example:

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

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

<button class="open-booking-widget" data-type="business_profile">
  Open the business profile
</button>

<button
  class="open-booking-widget"
  data-utm='{"source":"newsletter","medium":"email","campaign":"spring"}'
>
  Book from the newsletter
</button>

<script>
  window.RSConfig = {
    type: 'location_services',
    slug: 'default-location',
    buttons_selector: '.open-booking-widget',
  };
</script>

On click, the widget takes the base configuration and overrides it only for the selected element.

How values are passed through data-*​

  • data-slug overrides the target slug.
  • data-type overrides the target type, for example location_services or business_profile.
  • data-language sets the language for one specific trigger.
  • data-utm passes a JSON object with:
    • source
    • medium
    • campaign
    • content
    • term

UTM-only example:

<button
  class="open-booking-widget"
  data-utm='{"source":"facebook","medium":"paid","campaign":"summer"}'
>
  Book from the campaign
</button>

Important:

  • data-utm must contain valid JSON;
  • data-type and data-language only work with values the widget recognizes;
  • in the current confirmed code, the per-element overrides are slug, type, language, and utm, not arbitrary nested parameters from older integrations.

From a sticky button​

If you want the widget to open from a floating button, pass sticky_button:

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  sticky_button: {
    text: 'Book now',
    text_color: '#ffffff',
    background_color: '#343232',
    position: 'right-middle',
  },
};

The confirmed sticky button fields in the current integrations are:

  • text
  • text_color
  • background_color
  • tooltip_text
  • tooltip_show_delay
  • tooltip_expire_time
  • position

The confirmed positions are:

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

How to configure the modal widget​

You can limit the maximum modal size with:

  • max_width
  • max_height

Example:

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  modal: {
    max_width: '1320px',
    max_height: '95%',
  },
};

These settings apply only to the modal widget. They are not used for iframe embed.

UTM parameters​

You can pass UTM parameters in the base configuration:

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  utm: {
    source: 'facebook',
    medium: 'paid',
    campaign: 'summer',
  },
};

Supported keys are:

  • source
  • medium
  • campaign
  • content
  • term

If you do not pass UTM values, the widget may use:

  • UTM parameters from the current URL;
  • previously cached UTM values;
  • the fallback reservation.studio / js-widget values when nothing else is available.

Most common ready-made configurations​

Button to a services catalog​

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

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

Sticky button​

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  sticky_button: {
    text: 'Book now',
    text_color: '#ffffff',
    background_color: '#343232',
    position: 'right-middle',
  },
};

Different buttons to different targets​

<button class="open-booking-widget" data-slug="location-1">Location 1</button>

<button class="open-booking-widget" data-slug="location-2">Location 2</button>

<button class="open-booking-widget" data-type="business_profile">
  Business profile
</button>

<script>
  window.RSConfig = {
    type: 'location_services',
    slug: 'default-location',
    buttons_selector: '.open-booking-widget',
  };
</script>

Button with dedicated UTM values​

<button
  class="open-booking-widget"
  data-utm='{"source":"newsletter","medium":"email","campaign":"spring"}'
>
  Book from the newsletter
</button>

When this approach is the right one​

  • when you have a custom website;
  • when you want to manage the integration directly in page code;
  • when you want a modal widget opened from your own button, link, or sticky button;
  • when you do not want to depend on the WordPress shortcode generator.

Important​

  • type + slug defines the target, but you still need to decide how the user opens the widget.
  • buttons_selector, sticky_button, and modal are modal widget settings.
  • data-* overrides belong to the JavaScript trigger flow. WordPress shortcode buttons and links use the same principle under the hood, but the shortcode usage is documented separately in WordPress integration.
  • In the current documentation, inline iframe embed is documented through the WordPress shortcode flow, not as a separate JavaScript API path.