Integrating the Widgets
This document will show you how to integrate the portal widgets into your own website.
Last updated
Was this helpful?
This document will show you how to integrate the portal widgets into your own website.
Last updated
Was this helpful?
This document assumes you already have a solid understanding of basic Web Development technologies such as JavaScript, React, HTML & CSS.
Below is a list of the current widgets that can be dynamically loaded into the portal, along with a brief description of their purpose.
First, you need to import the compiled portal JavaScript. In plain HTML, this can be done via a script tag anywhere in your site.
From this point you're ready to start dropping in components, it's as easy as that.
Adding a widget to your page is as easy as adding any other semantic element (sort of) - you'll need to provide 3 different properties.
Each widget has it's component name, which is usually just a hyphenated version of what you see above. Each components name will be provided in it's documentation.
This will be your external API key which can be found at the bottom of the Portal Directory page in Squeegee.
This is the server endpoint, you're most likely a production user, so just put the usual app.squeeg.ee endpoint in there.
Once it's on your page, you'll be immediately greeted with a nice shiny widget!
To lay out your widgets, use the above code for each widget you want on the page. Unlike the previous portal version, you can't list multiple components in the data-sqc attribute. It's one div per widget. To maintain the flexibility, we've introduced a widget that allows you to control the layout with an easy, no-code, drag-and-drop editor. After your initial implementation, you likely won't need to modify the code again.
To implement the layout widget, the key difference from the above implementation is that you need to specify the layout attribute if you want to select a specific layout, otherwise it defaults to Layout 1. This determines which layout (stored on our server) you want to render.
Displays any amount of upcoming future appointments.
Renders a preview of components, useful for demonstrating changes before they go live.
Displays today's appointments, allowing customers to view the appointment details at a glance.
Lists the user's past appointments, offering a historical view of services received and a place to provide feedback.
Provides a record of financial transactions, aiding in financial tracking and management.
Shows your published business ratings, displaying feedback on service quality.
Facilitates real-time communication through a web chat interface.
Allows customers to set up & manage their automatic payment methods, streamlining the billing process.
Lists all job & service quotes, making it easy to review and manage service inquiries.
Enables non-recurring customers to book ad-hoc appointments, enhancing the scheduling experience.
Greets customers with a customisable welcome message.
Allows customers to search for addresses, improving location-based service bookings.
Displays customer profile information, allowing them to quickly update any personal information.
Provides a shortcut to edit the customer's profile, facilitating quick updates.
Integrates with Stripe to manage pre-payments, securing transactions in advance.
Engages customers in creating service quotes, capturing potential customer requirements.
Manages user authentication, enabling secure access to the portal.
Handles user sign-out, ensuring a secure exit from the portal.
