Mostfound Booking Widget - Documentation & Test Page

Complete guide to all available configuration options and examples for the Mostfound booking widget.

Live Widget Builder

Configure your widget options below and see the generated code. The preview will update in real-time.

Configuration

Domain *

Use your domain name from https://mostfound.com/services/yourdomain

Widget Type

Button: Floating button that opens a panel. Responsive: On mobile (<640px), width becomes auto and height adjusts to 70vh.

Position

Button Label

Button Scale

1.0 = normal, 1.2 = 20% larger

Language

Width

Width in pixels (px only). On mobile (<640px): automatically adjusts to full width.

Height

Height in pixels (px only). 600px is optimal for best widget display. On mobile (<640px): automatically adjusts to 70vh.

Pre-selection Options

Location ID

Find the Location ID in the URL: https://mostfound.com/services/devsalon?location_id=4

Product IDs (comma-separated)

Employee ID

Date (YYYY-MM-DD)

Time (HH:MM)

Generated Code

Place this code in your HTML, typically before the closing </body> tag or anywhere in your page body.

Loading...

Live Preview

Resize:

https://your-website.com

Note: All widgets are displayed within this preview container. Drag the resize handle to adjust the preview size.

Configuration Options

All available data attributes and their descriptions:

Attribute	Type	Default	Description
`data-type`	string	"minimized"	Widget display type: `"minimized"` (button + panel) or `"embedded"` (inline in page). Responsive: `"minimized"` automatically adjusts on mobile (<640px): width becomes auto, height becomes 70vh. `"embedded"` size is controlled by the parent container.
`data-position`	string	"right"	Position for floating widgets: `"left"` or `"right"` (only applies to minimized type)
`data-width`	number	420	Width of the widget in pixels. Responsive: For `"minimized"` type, on mobile devices (<640px) the width automatically becomes `auto` (full width with 16px margins). For `"embedded"` type, width is controlled by the parent container.
`data-height`	number	640	Height of the widget in pixels. Responsive: For `"minimized"` type, on mobile devices (<640px) the height automatically becomes `70vh` (70% of viewport height). For `"embedded"` type, height is controlled by the parent container.
`data-label`	string	"Book Now"	Text label for the minimized button
`data-lang`	string	undefined	Language code: `"en"` or `"nl"` (adds language prefix to URL). Can be left empty - will fall back to browser language detection.
`data-button-scale`	number	1.0	Scale factor for the minimized button size (e.g., 1.2 = 20% larger). Can be left empty - defaults to 1.0.
`data-domain`	string	undefined	Salon domain identifier (used to build booking URL: /services/{domain}/booking). Required if `data-booking-url` is not provided.
`data-booking-url`	string	undefined	Override booking URL (can be relative like "/booking" or absolute URL). Required if `data-domain` is not provided.
`data-location-id`	number/string	undefined	Pre-select a specific location. Can be left empty - user will select location in the form.
`data-product-ids`	number/string	undefined	Pre-select specific products/services (comma-separated for multiple, e.g., "5,12"). Can be left empty - user will select products in the form.
`data-employee-id`	number/string	undefined	Pre-select a specific employee/stylist. Can be left empty - user will select employee in the form.
`data-date`	string	undefined	Pre-select a date (format: YYYY-MM-DD). Can be left empty - user will select date in the form.
`data-time`	string	undefined	Pre-select a time (format: HH:MM). Can be left empty - user will select time in the form.

Note: Either data-domain or data-booking-url is required for the widget to initialize automatically.

Mostfound Booking Widget v1.0 | All widgets point to https://mostfound.com