Introduction

This document describes the usage of Arrivy Bookings Widget with sample code snippets including available options and functions.

Getting started

Installation

Node Environment

Add Arrivy Booking Widget to your project by executing npm install --save @arrivy/bookings-widget

import ArrivySchedulingWidget from '@arrivy/bookings-widget';

let initialASW = new ArrivySchedulingWidget({
                      booking_url:'<paste_booking_url_safe_id_here>', 
                      selector: '#asw-container'
                  });

Vanilla Javascript

Include javascript and CSS files on the page where the bookings widget need to be rendered. Typically CSS file import goes inside the head tag and javascript before the ending tag of the body.

<link href="https://unpkg.com/@arrivy/bookings-widget/dist/css/style.css" rel="stylesheet">

<script src="https://unpkg.com/@arrivy/bookings-widget/dist/bundle.js"></script>


<script>
let initialASW = new ArrivySchedulingWidget({
                      booking_url:'<paste_booking_url_safe_id_here>', 
                      selector: '#asw-container'
                  });
</script>

Usage

After including/importing the bundle files, create desired HTML element for the bookings widget to be rendered in.

<div id="asw-container"></div>

Bookings widget depend on task booking_url which can be found from the bookings API as booking_url_safe_id .

After initializing, call the renderInitialBooking function to render the widget.

initialASW.renderInitialBooking();