You have several options to open the booking widget using custom buttons, links, or the menu on your website. Additionally, you can navigate to a specific page within the booking widget to book a particular accommodation.
# Open booking widget via Hyperlink
To open the booking widget using a hyperlink:
Go to the BNBForms dashboard > Widget script, copy the script, and add it to your website according to your CMS.
To hide the default floating button, make sure to modify the code as described in the tutorial.
- Add a link to your account on any button, link, or menu on your website. An example of the account link is:
https://bnbforms.com/100112/
Now, every time a guest clicks the link on your website, the booking widget will appear.
# Open booking widget via Custom CSS Class
To open the booking widget using a custom CSS class:
Go to the BNBForms dashboard > Widget script, copy the script, and add it to your website according to your CMS.
You might want to hide the Book Now button in case, for example, you want to use any other website button for opening the Book Now widget by BNBForms.
- Add the custom CSS class
bnbforms-bookingwidget-buttonto the preferable button or link on your website.
For example: by clicking on this button with the custom class added, the booking widget will be opened.
# Open a certain page in the booking widget
To allow site visitors to access a specific page within the booking widget by clicking a link on your website, you need to set the href attribute as the URL from your BNBForms account page.
Example for opening the Comfort Triple Room accommodation details:
<a href="https://bnbforms.com/100112/accommodation/comfort-triple-room/">Book Now</a>
Data-attribute is also supported. You may add data-bnbforms-src attribute to open a certain page. Example:
<button class="bnbforms-bookingwidget-button"
data-bnbforms-src="https://bnbforms.com/100112/accommodation/comfort-triple-room/">Book Now</button>