With our newest lightbox integration, customers can book directly on your main website without leaving the page.
*Important: When following the instructions below, please be sure to replace [subdomain] with your actual subdomain (more info here).
To install, place the following line inside the <head> section of each page that will have a link to the reservation system, replacing [subdomain] with your actual subdomain.
<script type="text/javascript" src="https://[subdomain].starboardsuite.com/assets/frontend/booking-lightbox.js"></script>
After installing the code above, any link on your site can be configured to open the lightbox. Just add the class "starboard-lightbox" to any <a> element and specify the URL in the href attribute.
For example:
<a href="https://[subdomain].starboardsuite.com/online-booking/lightbox/v1/calendar" class="starboard-lightbox" target="_blank">Book Now</a>
Advanced Customization
The following data tags may be added to the <a> link to further customize your integration:
data-width - specifies the width of the lightbox. The default is 90% with a maximum width of 1290px and minimum width of 400px. Any width specified below 400px and above 1290px will be ignored.
data-max-width - specifies the maximum width of the lightbox. The default is 1290px. Best used in combination with % widths specified in data-width.
data-height - specifies the height of the lightbox. The default is 90%.
data-max-height - specifies the maximum height of the lightbox. The default is 100%. Best used in combination with % heights specified in data-height.
data-border-size - specifies the border size of the lightbox. The default is 10px. This setting is ignored on mobile devices.
data-border-color - specifies the border color of the lightbox.
data-hide-giftcertificate - set to "true" to hide the Buy Gift Certificates online link. It is visible by default.
data-hide-concierge - set to "true" to hide the Concierge or Booking Agent / Guest Reservation link. It is visible by default.
data-show-printpass - set to "true" to display a print button in the upper right corner of the bording pass for easier printing.
data-notify-printpass-navigateaway - set to "true" to prompt user with a yes/no to close the lightbox if they have not printed the boarding pass. By default, users will be prompted with yes/no to close the lightbox at all stages until they reach the boarding pass.
Custom Example
The following link will hide the concierge link, display the print button on the boarding pass and prompt the user before exiting if they have not printed the boarding pass:
<a href="https://[subdomain].starboardsuite.com/online-booking/lightbox/v1/calendar" class="starboard-lightbox" data-hide-concierge="true" data-show-printpass="true" data-notify-printpass-navigateaway="true">Book Now</a>
Installing the Lightbox on WordPress? Please be sure to read the WordPress supplement as well.
Installing the Lightbox on Wix? Please be sure to read the Wix supplement as well.
Keywords: embed