Schedule Engine Widget Embed

What does this do?

• Handles how the widget is added to the client's site. Including handling messages that show the service, appointments, repair, and sales modals.
• Includes style overrides necessary on the client's site for the widget to be successfully embedded

Who uses this?

Clients will typically embed this on their website using a <script> tag. We host each version of the script at https://embed.scheduleengine.net/, each identified by their version, with an extra script that represents the current major version of the script.

For example, schedule-engine-3.0.0.js will never change, but schedule-engine-v3.js will point to schedule-engine-3.0.0.js when it is first released, and then schedule-engine-3.1.0.js when it is released. Most, if not all, of our clients point to the major version of the script (e.g., schedule-engine-v3.js).

Setup

We are using node version 16.6.

Please remember to nvm use before you npm install.

Scripts

start

Start Rollup in watch mode, using the 'development' environment

npm start

build

Run the Rollup build, using process.env.AWS_ACCOUNT_KEY as the environment if it is set, and development otherwise.

npm run build

You may override the environment for testing by passing in the environment parameter. Please note the double --:

npm run build -- --environment production

Bundles created

The Rollup build creates 3 outputs:

• UMD - dist/schedule-engine-v{PACKAGE_VERSION}.js
• UMD - dist/schedule-engine-v{PACKAGE_MAJOR_VERSION}.js
• ESM - dist/esm/*

UMD

The UMD versions use src/index.ts as their input, and can be included via a <script> tag in the browser. All exported functions from src/index.ts are exposed under window.ScheduleEngine in the browser (e.g., window.ScheduleEngine.show()).

ESM

The ESM version uses src/index.esm.ts as its root input, and to enable code-splitting, creates a new chunk for every file that matches the pattern src/app/*.ts.

It can be installed using:

npm install se-widget-embed

And any exports can be imported normally, e.g.,

import { show } from 'se-widget-embed';

Schedule Engine Documentation