Checkin Bay - Customer Checkin - Web Component

Get an understanding of how to enable check in capabilities in your websites and apps for your customers using our framework agnostic web component.

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 queueid="<<your queue id>>"></checkinbay-queue>

If using JavaScript, import the component to use it:

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

Properties

Property	Attribute	Description	Type	Default
`containerradius`	`containerradius`	The radius of the container. Determines how rounded the corners of the container are. 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.	`string \| 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'`
`queueid` (required)	`queueid`	The unique ID of the queue. This can be found in the admin portal.	`string`	`undefined`
`theme`	`theme`	The theme to apply to the component's appearance. Default value: `'default'` Valid values: - `'default'`: The default theme with light colors. - `'dark'`: A dark theme with darker background colors. - `'high-contrast'`: A high contrast theme for accessibility. - `'ocean-breeze'`: A theme with light aqua and teal tones. - `'forest-green'`: A green theme with light green and dark green colors. - `'warm-sunset'`: A warm theme with orange and yellow hues. - `'night-sky'`: A deep blue theme resembling the night sky. - `'custom'`: A custom theme where you can specify your own color variables.	`string \| undefined`	`'default'`