How To Create A Widget
To create a new widget:
-
Click “Create New Widget” in your dashboard.
-
Configure the widget settings:
Widget Configuration Options:
-
Logo: Upload your logo to maintain consistent branding.
-
Name: Enter an internal name to identify the widget in your dashboard.
-
Currency: Select the currency for all pricing displayed to customers.
-
Primary Colour: Set your brand’s primary colour.
-
Host URL: Enter the URL where the widget will be hosted.
-
Order # Prefix: Set a prefix for booking reference numbers (e.g., 0001, 0002).
Display & Behaviour
Configure the following settings to control the widget’s display and behaviour:
-
Default Office: Choose which office appears first when the widget opens. Defaults to the first available office if none is set.
-
Results View: Determines how booking results are displayed:
-
Detailed: Shows full booking information.
-
Compact: Shows only essential details.
-
-
Desk Booking View: Choose how users browse desks:
-
Filter Bar: Allows filtering options.
-
Calendar View: Opens directly to a date-based calendar.
-
-
Meeting Room Booking View: Choose how users browse rooms:
-
Filter Bar: Enables filtering by room features.
-
Calendar View: Opens to a calendar showing availability.
-
-
Booking Windows: Define standard half-day and full-day booking times
(e.g., Half-day: 9 AM–1 PM, Full-day: 9 AM–5 PM).
Pricing Configuration
Link your widget to a payment provider and configure tax rates:
Payment Processing Options:
-
Stripe: Integrate Stripe to process payments.
-
Instant Booking: Allow bookings without payment processing.
Tax Rate Providers:
-
None: No tax applied.
-
Custom: Set your own tax rates.
-
Stripe: Automatically uses tax rates from your Stripe account.
Terms and Conditions (Optional):
-
Upload a document (max 5MB) to display during checkout.
Hosting Options
Choose how your widget is hosted:
-
Self-hosted: Use your own server URL.
-
Publicly hosted: OpenSpaces generates a ready-to-share link, no hosting needed.
Managing Your Widget
After creating a widget, you can edit its settings or delete it entirely from your dashboard.
To add the widget to your website, generate a code snippet. This snippet controls how the widget behaves and appears. You can configure redirect URLs to send users to specific pages after successful or cancelled payments.
You can also choose how the widget is displayed on your site:
-
Inline: embedded directly in your page content.
-
Button: opens in a modal overlay.
-
Slide-out: appears from the side.
-
Events: control the widget programmatically using window.openSpaces.show() or .hide().
Finally, set the landing view to determine whether the widget opens on the desks or meeting rooms page by default.
Important: Any changes automatically update the code snippet. Add the updated snippet below the script tag on your website.
Script Tag (Required):
The widget script tag is essential for the widget to function. Add this script to your site’s HTML on any page where the widget should appear:
<script
type="module"
defer
src="https://assets.clearooms.com/openspaces/openspaces.min.js"
></script>
-
See Public View: Use the public view to preview your widget’s design and functionality.
