Checkin Bay Customer Web Component

This is the official web component for Checkin Bay, a product enabling online customer check-ins. Use this customizable web component to easily integrate Checkin Bay's functionality into any web page or app.

Table of Contents

• Overview
• Installation
• Usage
• Properties
• License

Overview

The checkinbay-customer-web component is designed to provide users with an interactive way to manage and handle check-ins within your web page or app. It's optimized to integrate directly with the Checkin Bay services.

Installation

Installing via npm

Install the package via npm for use in JavaScript or TypeScript projects:

npm install checkinbay-customer-web

Using a CDN

Include the component directly in your HTML with a script tag:

<script type="module" src="https://js.checkinbay.com/checkinbay-customer-web.js"></script>

Usage

Once the component is installed, you can add it to your HTML or JavaScript code:

<checkinbay-queue orgslug="<<your org slug>>"></checkinbay-queue>

If using JavaScript, import the component to use it:

import 'checkinbay-customer-web/checkinbay-queue';

Properties

| Property | Attribute | Description | Type | Default | | --------------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------- | | containercorners | containercorners | Determines how rounded the corners of the container that houses this component should be. Default value: 'rounded-md' Valid values: - 'rounded-none': No border-radius, sharp corners. - 'rounded': Small radius, slightly rounded corners. - 'rounded-md': Medium radius, more prominent rounding (default). - 'rounded-lg': Large radius, very rounded corners. - 'rounded-xl': Extra large radius for very soft corners. - 'rounded-2xl': Larger radius for highly rounded corners. - 'rounded-3xl': Maximum rounded corners. | "rounded" \| "rounded-2xl" \| "rounded-3xl" \| "rounded-lg" \| "rounded-md" \| "rounded-none" \| "rounded-xl" \| undefined | 'rounded-md' | | corners | corners | Controls the overall corner roundness of the elements in this component (e.g., buttons, input fields). Default value: 'rounded-md' Valid values: - 'rounded-none': No border-radius, sharp corners. - 'rounded': Small radius, slightly rounded corners. - 'rounded-md': Medium radius, more prominent rounding (default). - 'rounded-lg': Large radius, very rounded corners. - 'rounded-xl': Extra large radius for very soft corners. - 'rounded-2xl': Larger radius for highly rounded corners. - 'rounded-3xl': Maximum rounded corners. Notes: - This controls corner radius of all elements in the component, other than queue selection chips and the component container. - Use 'queuechipcorners' if you have selected 'chips' for 'queueselectionstyle' and want to change its corner roundness. - Use 'containercorners' to control the roundness of the overall component container | "rounded" \| "rounded-2xl" \| "rounded-3xl" \| "rounded-lg" \| "rounded-md" \| "rounded-none" \| "rounded-xl" \| undefined | 'rounded-md' | | customthemebg | customthemebg | Background color for the theme when theme="custom". Default value: #ffffff (White) Used as the primary background color. | string \| undefined | undefined | | customthemeerror | customthemeerror | Error color for the theme when theme="custom". Default value: #dc2626 (Red-600) Used to indicate errors or urgent elements like text or icons. | string \| undefined | undefined | | customthemeonbg | customthemeonbg | Text and icon color on the background when theme="custom". Default value: #111827 (Gray-900) Used for text and icons on primary and shaded backgrounds. | string \| undefined | undefined | | customthemeonbgmuted | customthemeonbgmuted | Muted text color for the background when theme="custom". Default value: #6b7280 (Gray-500) Used for low-emphasis text and icons on the primary background. | string \| undefined | undefined | | customthemeonprimary | customthemeonprimary | Text and icon color for elements with the primary accent when theme="custom". Default value: #ffffff (White) Used for text and icons on primary accent elements. | string \| undefined | undefined | | customthemeonsecondary | customthemeonsecondary | Text and icon color for secondary accent elements when theme="custom". Default value: #3730a3 (Indigo-800) Used for text and icons on secondary background elements. | string \| undefined | undefined | | customthemeoutline | customthemeoutline | Outline color for borders when theme="custom". Default value: #d1d5db (Gray-300) Used for important outlines, such as text fields. | string \| undefined | undefined | | customthemeoutlinevariant | customthemeoutlinevariant | Outline variant color for decorative elements when theme="custom". Default value: #e5e7eb (Gray-200) Used for less prominent borders or dividers. | string \| undefined | undefined | | customthemeprimary | customthemeprimary | Primary accent color for the theme when theme="custom". Default value: #4f46e5 (Indigo-600) Used for high-emphasis elements like buttons or containers. | string \| undefined | undefined | | customthemesecondary | customthemesecondary | Secondary accent color for the theme when theme="custom". Default value: #eef2ff (Indigo-50) Used for less prominent containers, text, and icons. | string \| undefined | undefined | | customthemeshadedbg | customthemeshadedbg | Shaded background color for the theme when theme="custom". Default value: #f9fafb (Gray-50) Used to highlight sections like headings and input fields. | string \| undefined | undefined | | font | font | The font family to be used for text within the component. Default: "sans" - If a custom font is provided, the consuming application must ensure that the font is available or properly imported. - This property allows the use of custom fonts, such as Google Fonts, which the consuming application must load. Example usage with Google Fonts: 1. Add the Google Fonts link in your HTML: <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> 2. Set the component's font property: <checkinbay-queue font="'Open Sans'"></checkinbay-queue> Note: The value of this property should be properly formatted, especially when using font names with an invalid identifier like spaces (e.g., "Open Sans" should be enclosed in quotes). | string \| undefined | 'sans' | | language | language | Sets the language for all text and interface elements in the component. Default Value: Detected from the user's browser settings, or 'en' if not available. Valid Values: - 'en': English - 'es': Spanish (Español) Usage: - Leave blank to automatically use the browser's language preference. - Set to a supported language code to override automatic detection. Behavior: - If set, the component displays all labels, instructions, and messages in the specified language (if supported). - If the value is not set or not supported, the component will use the browser's preferred language, or fall back to English. - Date, time, and number formatting will match the selected or detected language as closely as possible. | string \| undefined | undefined | | layoutstyle | layoutstyle | Controls whether the check-in process is displayed on a single page or split into multiple steps. Default Value: 'single-page' Valid Values: - 'single-page': Renders all check-in fields (queue selection, services, form) together. - 'multi-step': Breaks the check-in into separate pages/steps (e.g., queue selection, service selection, then check-in form) a wizard-like experience. Notes: - In multi-step mode, if there’s only one queue or one service, those steps may be skipped automatically. | "multi-step" \| "single-page" \| undefined | 'single-page' | | orgslug (required) | orgslug | The web slug of your organization. This can be found in the admin portal. Usage: - Required. Provide your organization's orgslug as input to the component. Behavior: - The component uses the orgslug to identify your organization. - If queueslug is not provided: - If the organization has more than one queue: - The component will display a list of queues for the user to select from. - If the organization has only one queue: - The component will display the check-in form for that single queue directly. - If queueslug is provided: - The component will directly display the check-in form for the specified queue. | string | undefined | | queuechipcorners | queuechipcorners | Controls the corner roundness of the queue selection chips. Default value: 'rounded-3xl' Valid values: - 'rounded-none': No border-radius, sharp corners. - 'rounded': Small radius, slightly rounded corners. - 'rounded-md': Medium radius, more prominent rounding (default). - 'rounded-lg': Large radius, very rounded corners. - 'rounded-xl': Extra large radius for very soft corners. - 'rounded-2xl': Larger radius for highly rounded corners. - 'rounded-3xl': Maximum rounded corners. Notes: - This applies only if 'queueselectionstyle' is 'chips'. | "rounded" \| "rounded-2xl" \| "rounded-3xl" \| "rounded-lg" \| "rounded-md" \| "rounded-none" \| "rounded-xl" \| undefined | 'rounded-md' | | queueselectionstyle | queueselectionstyle | Controls how multiple queues (if offered) are displayed for selection. Default Value: 'tabs' for 'single-page' layout, 'chips' for 'multi-step' layout Valid Values: - 'tabs': Shows each queue as a separate tab. (Supported only in 'single-page' layout.) - 'chips': Displays queues as selectable chips. - 'stacked-cards': Displays queues as a list of clickable stacked cards. Important: - If using a 'multi-step' layout, avoid 'tabs' as it’s not supported in that flow. In 'multi-step' mode, use 'chips or 'stacked-cards' instead. Notes: - If there's only one queue, this selection may be skipped automatically. | "chips" \| "stacked-cards" \| "tabs" \| undefined | 'tabs' | | queueslug | queueslug | The web slug of the queue you want to display. This can be found in the admin portal. Usage: - Optional. Provide the queueslug if you want the component to load a specific queue directly. Behavior when queueslug is provided: - The component will display the check-in form for the specified queue. Behavior when queueslug is not provided: - The component will display all queues associated with the orgslug. - If there is more than one queue, a list of queues will be presented for the user to choose from. - If there is only one queue, the component will display the check-in form for that queue directly. | string \| undefined | undefined | | serviceselectionstyle | serviceselectionstyle | Determines how services (if multiple are available) are presented to users. Default Value: 'dropdown' Valid Values: - 'dropdown': Shows services in a single or multi-select drop-down, depending on your backend setup (one or more services can be chosen). - 'panel': Displays services as radio buttons (single-select) or checkboxes (multi-select) in a stacked panel layout. Notes: - If there's only one service, this step may be skipped automatically. | "dropdown" \| "panel" \| undefined | 'dropdown' | | theme | theme | The theme to apply to the component’s appearance. Default Value: 'default' - (This uses the same palette as 'indigo-light'.) Valid Values: - 'default' (alias for 'indigo-light') Red: 'red-light', 'red-dark', 'red-pastel' Orange: 'orange-light', 'orange-dark', 'orange-pastel' Sky: 'sky-light', 'sky-dark', 'sky-pastel' Green: 'green-light', 'green-dark', 'green-pastel' Indigo: 'indigo-light', 'indigo-dark', 'indigo-pastel' Pink: 'pink-light', 'pink-dark', 'pink-pastel' - 'custom': Use the customtheme* properties to define your own palette (e.g., customthemebg, customthemeshadedbg, customthemeonbg, etc.) Note: - If you set theme="custom", ensure you provide corresponding customtheme* props for each color you wish to override. | string \| undefined | 'default' |

Events

| Event | Description | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | | checkinBayEvent | Generic event emitter for checkinbay-queue component events. Event structure: - eventName: Type of event ('queueDataRetrieved' | 'checkinCompleted') - data: Event-specific data payload - timestamp: When the event occurred (Date.now()) Events: - queueDataRetrieved: Fired when org and queue data is loaded - checkinCompleted: Fired when a check-in is successfully saved Consumers can listen to this single event and handle different event types based on the eventName property. | CustomEvent<{ name: string; data: any; }> |

License

This package is free to use for accessing Checkin Bay services. Modification and distribution are restricted. See the full license terms in the LICENSE file included with this package.

Copyright (c) Brightient Works LLC. All rights reserved.