The enterprise booking widget cannot be created at app.appointedd.com so is currently available only through account management. If you would like to use the enterprise widget, get in touch through the support messenger.
Please note: The enterprise booking widget is being phased out.
We recommend exploring our new widget 2.0 instead.
⚙️ Customizing the enterprise widget
The enterprise widget allows for much more customization including changing the font, colors, wording, headers, and adding images to services on the service selection step (recommended image dimensions 625px wide, 450px high).
Please note: this widget is not available from within the account. For any help to customize the enterprise widget, please reach out to your Appointedd account manager.
👩💻 How to place the enterprise widget on your site
There are three formats of your enterprise widget that we can send to you...
Microsite URL (the slug is your account ID)
https://slug.appointedd.com/widget/widgetid
Embed code:
<div id="apwidget"></div> <script src="https://retailwidgets.appointedd.com/widget/widgetid/widget.js"></script> <script>appointeddWidget.render('apwidget');</script>
Each customised widget has it's own unique widget ID.
We recommend embedding your widget into your website landing page for a more native look and feel, and overall better customer journey. However, should you prefer to redirect customers entirely to a separate page, either the raw or microsite URL would work.
For the microsite URL, we can attach banners to further customize the look and feel. The recommended banner image dimensions are 960 px width, 200 px height.
⚙️ Rendering the enterprise booking widget
The Appointedd widget only requires the ability to add a small piece of HTML and Javascript onto the page where it should be hosted.
<div id="booking-widget"></div>
<script src="https://appointeddwidgetdomain.com/widget/{widget-id}/widget.js"> </script>
<script>appointeddWidget.render('booking-widget');</script>
Please scroll right on the image to see the whole code!
Replace the widget script URL with your own - this will be provided by your account manager.
This will inject the widget as an iframe into the div above with the ID booking-widget.
📝 Rendering the enterprise booking widget with a configuration
You can pass predefined configurations into the widget when it is rendered. This can allow you to skip steps, for example pre-setting a store and skipping the map step.
You can also pre-fill customer details. This can be useful if you are rendering the widget on a page within your website where you already have some of their details.
If you have any “internal only” custom fields set up on your Appointedd account, you can still pass values through and they will be saved against the customer, without them seeing or being able to change it. For example this can be useful if you have a user ID for the customer which you want to be saved in Appointedd for reporting purposes.
appointeddWidget.render('booking-widget',{
preset:{
organisations:['55c36b5edda1dd93b7d63af1'],
notes: "Some notes which are stored against the booking",
customer:{
firstname:"Greg",
lastname: "Dickson",
email:"greg@appointedd.com",
mobile:"447594942941",
custom_fields:{
"membership_id":12345,
"age": 28
}
}
}
});
In the above example, we have passed configuration object to the render method, which contains both the store and the customer’s details as preset values:
Because the store is pre-set, the widget will skip the store selection step and render straight into the step after. It is also possible to define multiple preset stores, which wont skip the store step but instead only show the stores you define.
The set notes will not be visible to the user when making their booking. They will however be stored on the booking and will be visible to the business on Appointedd.
Because the customer details are pre-set, the customer will find that their details have been pre-filled on the step where they would usually enter their details.
🌍 How to pre-fill customer's location in the location search field?
If you are using the enterprise widget across multiple locations and wish to have the customer's location pre-filled to show the closest locations to them, you can apply the below code to achieve it. For example, if you detect that the customer is in Edinburgh, the code would look like this:
<div id="apwidget"></div>
<script src="https://retailwidget.appointedd.com/widget/[widget_id]/widget.js"></script>
<script>
appointeddWidget.render('apwidget',{
preset:{
location:{
query:"Edinburgh"
}
}
});
</script>
Here is how it would look on the map without the customer having to add the location into the search bar:
🧐 Listening for events in the enterprise booking widget
You can listen for some events which are emitted by the widget iframe. Events which can be listened for include:
booking_created
Triggered when a booking is created in the widget.ready
Triggered when the booking flow has been injected into the website and finished loading.user_engaged
Triggered the first time the user engages with the booking flow. It is considered an engagement when the user clicks or taps on anything within the flow.
📚 Example
appointeddWidget.on('booking_created', function(data){
// data.booking will contain booking information
});booking_created can be used for a variety of reasons e.g. where you want to perform your own conversion tracking, or redirect to a new page when a booking is made.
With the booking_created event, the booking data is passed back to the event callback. This allows you to access data about the booking. An example of what this booking object can look like:
{
"booking": {
"id": "5c7f809db04deeaaad473af2",
"organisation_name": "Mamas & Papas - Fort Kinnaird",
"organisation_id": "55c36b5edda1dd93b7d63af1",
"service_id": "5bae0d0bb04deedd034788f2",
"service_name": "Personal shopping",
"resource_id": "595501f247ade12f2da26b07",
"start_time": "2019-02-17T01:30:00+00:00",
"end_time": "2019-02-17T02:00:00+00:00",
"timezone": "Europe/London",
"customer": {
"id": "598d8b2f9e8dd9d9530041a7",
"profile": {
"firstname": "Greg",
"lastname": "Dickson",
"email": "greg@appointedd.com",
"mobile": "447594942941"
},
"custom_fields": { "membership_id": 12345 },
"questions": [
{ "Where did you hear about us?": "Social media" }
]
}
}
}
Please note: The widget needs to load first, before the tracking code is loaded. This note is important in particular when you load your scripts through Google Tag Manager that is in the header of your webpage.