Booking Widget｜Reservalue Developer Docs

Overview

The widget ships as a UMD bundle that registers a global ReservalueWidget class. Include one CSS file and one JS file, add a container element to your page, and call the constructor. The widget auto-loads its own dependencies — you don't need to include them yourself.

You can also tweak styles visually in the admin dashboard under "Services → Embed widget" and copy a ready-made embed snippet to finish integrating.

Quick start

Go live in three steps:

<!-- 1. Include the stylesheet and script in <head> -->
<link rel="stylesheet" href="https://static.reservalue.net/widget/v1/reservalue-widget.css">
<script src="https://static.reservalue.net/widget/v1/reservalue-widget.min.js"></script>

<!-- 2. Add a container element -->
<div id="reservalue-widget"></div>

<!-- 3. Initialize -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new ReservalueWidget('your-bu-link', 'your-service-link', {
      container: '#reservalue-widget',
      lang: 'en'
    });
  });
</script>

Replace your-bu-link with your business-unit link and your-service-link with your service link — both are available in the admin dashboard.

Resources to include

In production you only need these two files (stable v1 paths):

Resource	URL
Stylesheet (CSS)	`https://static.reservalue.net/widget/v1/reservalue-widget.css`
Script (JS)	`https://static.reservalue.net/widget/v1/reservalue-widget.min.js`

Dependencies (Moment.js with timezone data, intl-tel-input) are loaded by the widget at init time — no manual includes required.

Constructor

new ReservalueWidget(buLink, serviceLink, options)

buLink — required string, the business-unit link.
serviceLink — required string, the service link.
options — configuration object, see fields below.

Options

The options object supports the following fields:

Option	Type	Required	Description
`container`	string	required	CSS selector of the element to mount into, e.g. `'#reservalue-widget'`.
`lang`	string	optional	UI language, defaults to `'zh-TW'`. Supports `zh-TW` / `en` / `ja` / `ko`.
`styles`	object	optional	Custom colors and appearance — see "Theming".
`showResultScreen`	boolean	optional	Whether to show the result screen after submission, defaults to `true`. Set `false` to handle it yourself via callbacks.
`customField`	string	optional	Free-text value passed in at init time. It travels with the reservation and appears in the admin reservation detail — handy for attaching your own tracking reference such as a campaign code or referral source. Max 255 characters.

Theming

Use the styles object to match the widget to your brand. Every field is optional; omitted values fall back to defaults.

styles: {
  header: { backgroundColor, color, borderBottomColor },
  content: { backgroundColor, color },
  footer: { backgroundColor, borderTopColor },
  button: {
    primary: { backgroundColor, color, borderColor, hoverEffect },
    secondary: { backgroundColor, color, borderColor, hoverEffect },
    slot: { backgroundColor, color, borderColor, hoverEffect }
  },
  result: { icon: { borderColor } },
  calendar: {
    backgroundColor, color, availableColor, disabledColor,
    today: { backgroundColor },
    selected: { backgroundColor }
  }
}

Each color value is a regular CSS color string such as '#e4007f' or 'rgb(228,0,127)'.

The three buttons

Under button, primary, secondary and slot are three independently themeable buttons. Each takes its own backgroundColor, color, borderColor and hoverEffect.

Button	Where it appears
`primary`	The "Next" / "Submit" buttons and the result-screen actions.
`secondary`	The "Back" button.
`slot`	The bookable time-slot buttons in the calendar.

`hoverEffect`

Set per button; defaults to darken when omitted:

Value	Effect
`darken`	Darken the fill and border (default).
`invert`	Swap background and text colors, like an outline button filling in.
`lift`	Raise the button slightly with a soft shadow.
`shadow`	Add a shadow without moving.
`grow`	Scale the button up a little.
`none`	No change.

Languages

Switch the UI language with the lang option. Currently supported:

zh-TW — Traditional Chinese (default)
en — English
ja — Japanese
ko — Korean

An unsupported value falls back to zh-TW.

Events

The widget instance exposes these event registration methods for analytics or custom flows:

Method	Fires when
`onReady(cb)`	The widget has initialized and is ready to use.
`onStepChange(cb)`	The step changes; receives the current step number.
`onReservationRequestSubmitted(cb)`	The user submits the booking form.
`onReservationCreated(cb)`	A reservation is created; receives `{ reservationId }`.
`onReservationFailed(cb)`	Reservation creation failed; receives `{ reason }`.
`onError(cb)`	Any error occurs.

const widget = new ReservalueWidget('your-bu-link', 'your-service-link', {
  container: '#reservalue-widget'
});

widget.onReady(() => console.log('widget ready'));
widget.onReservationCreated((data) => console.log('created', data.reservationId));
widget.onReservationFailed((data) => console.log('failed', data.reason));

Full example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://static.reservalue.net/widget/v1/reservalue-widget.css">
  <script src="https://static.reservalue.net/widget/v1/reservalue-widget.min.js"></script>
</head>
<body>
  <div id="reservalue-widget"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const widget = new ReservalueWidget('your-bu-link', 'your-service-link', {
        container: '#reservalue-widget',
        lang: 'en',
        showResultScreen: true,
        styles: {
          header: { backgroundColor: '#000000', color: '#ffffff' },
          button: {
            primary: { backgroundColor: '#e4007f', color: '#ffffff', borderColor: '#e4007f' },
            slot: { backgroundColor: '#ffffff', color: '#e4007f', borderColor: '#e4007f', hoverEffect: 'invert' }
          }
        }
      });

      widget.onReservationCreated((data) => {
        console.log('Reservation created:', data.reservationId);
      });
    });
  </script>
</body>
</html>

Need help integrating? Reach us on LINE or at support@reservalue.net.