Note: The advanced embed options require coding to execute. We recommend that, in the event you do not read coding language, you reach out to a developer for assistance. |
If you want more control over the drop-in booking widget, then there are additional parameters that you can add to direct users to a preselected space, space type, date, time, duration, and/or capacity. For example, you could make it so that your drop-in booking widget will automatically only display meeting rooms available at your downtown location on June 1st, rather than all of your spaces. You could also limit it to just one space, and even choose to only include the transactional elements, hiding any additional information like photo and space details.
Parameters for drop-in booking embed code
Below is the default code for embedding the drop-in booking widget. Note that you will need to add your venue subdomain after optix-venue. You can also change whether the widget is embedded or appears in a modal by changing optix-mode to either "popup" (for a modal) or "embed".
<!-- The widget script binds the click event to any html component that has the class below, you may include as many links you want at your page, make sure to use your venue subdomain -->
<div
class="optix-booking-widget"
optix-venue="yourvenuesubdomain"
optix-mode="popup"
>Sample popup link or any html tag/element</div>
<!-- The script below should be included ONCE after the </body> (body close tag) -->
<script>
(function(o, p, t, i, x) {
x = p.createElement(t);
var m = p.getElementsByTagName(t)[0];
x.async = 1;
x.src = i;
m.parentNode.insertBefore(x, m);
})(window, document, "script", "https://apps.optixapp.com/web-plugin/optix.v1.js");
</script>
You can add your parameters to the tag where you are defining the class "optix-booking-widget". The following parameters are available:
optix-args-locations=”123,456,653” - Will only show resources from the specificed location numbers (where to find these numbers is detailed below). If you provide an invalid ID, then the widget will simply ignore it. The location filter will disappear if you provide only one location, or if any of the locations have no spaces available. You may use more than one ID, separating them with comma.
optix-args-duration=”3600” - Defines the default duration in seconds for the booking. The user will still be able to change this filter.
optix-args-capacity=”3” - Defines the default minimum capacity filter. The user will still be able to change this filter.
optix-args-date=”2021-03-30” - Defines the default date. The user will be able to change this filter. Always use the date in ISO format. If you do not set this filter, we will use the current date as the default booking date. For future dates, we suggest including optix-args-time=”00:00” to ensure all times of the day are presented.
optix-args-time=”20:30” - Defines the default start time for the booking. The user will be able to change this filter. Always use the format HH:MM in 24 hour format. If you do not set this filter, we will use the current time as the default start time for the meeting.
optix-args-resource=”12345” - This will skip the space finder interface and show a specific space to the user. The user will not be able to go back to the finder interface and will only be able to book the specified resource. Where to find the resource ID is detailed below.
optix-args-picker=”true” - Skip the resource details page and show the date/duration/time picker by default. Note: This must be used in conjunction with optix-args-resource to take effect.
optix-args-types=”Meeting Room” - Filter by a type of space. Make sure to use the exact wording, including case. The options are: Hot Desk, Dedicated Desk, Conference Room, Meeting Room, and Private Office. You may filter by more than one, separating the options with a comma.
Note: You may combine optix-args-resource with other attributes, but be aware that optix-args-locations and optix-args-capacity have no influence on the resource details page since a specific space is already selected. |
We've included an example of embed code with added attributes below. This would take the user directly to the date/duration/time picker for resource number 12345.
<!-- Example opening one specific resource, directly on the duration picker page -->
<div
class="optix-booking-widget"
optix-venue="yourvenuesubdomain"
optix-mode="embed"
optix-args-resource="12345"
optix-args-picker="true"
style=”width:400px;height:700px”
>Sample popup link or any html tag/element</div>
<!-- The script below should be included ONCE after the </body> (body close tag) -->
<script>
(function(o, p, t, i, x) {
x = p.createElement(t);
var m = p.getElementsByTagName(t)[0];
x.async = 1;
x.src = i;
m.parentNode.insertBefore(x, m);
})(window, document, "script", "https://apps.optixapp.com/web-plugin/optix.v1.js");
</script>
Here's what this would look like embedded onto your website:
Parameters for drop-in booking links
The default code for the drop-in booking link will be in the format: yoursubdomain.optixapp.com/book. You can add the following parameters to this URL:
Date - E.g. yoursubdomain.optixapp.com/book?date=2023-03-20
Link to a specific resource - E.g. yoursubdomain.optixapp.com/book/resource/1234 (Where to find the resource ID is detailed below)
Link straight to the date/duration/time picker for a specific resource - yoursubdomain.optixapp.com/book/resource/1234/pick
Where to find the location ID
Please contact support@optixapp.com to retrieve your location IDs. Optix support hours are Monday - Friday, 9AM - 5PM PST.
Where to find the resource ID
To link straight to a specific resource, you need to have the resource ID. You can find this in your dashboard from Settings > Web widgets > Drop-in bookings. On this page, you’ll see a list of your resources. When you click the 3-dots icon to the right of the resource, you’ll have the option to copy the resource ID to your clipboard so you can paste it into the embed code:
Need more info on Settings?