Adding a booking button to your page

There are three ways of adding a booking button:

• Using a Shortcode
• By adding a Block Element
• By attaching a trigger to an existing element

Shortcode

You can add this shortcode to your page:

[latepoint_book_button]

You can also generate a shortcode using PHP in your code:

<?php echo do_shortcode('[latepoint_book_button]'); ?>

You can further customize it by using shortcode attributes, for example:

[latepoint_book_button selected_agent="1" hide_side_panel="yes"]

List of available attributes

[latepoint_shortcode_attributes_customize_button_appearance]

[latepoint_shortcode_attributes_customize_form_appearance]

[latepoint_shortcode_attributes_skip_steps]

Block Element

If you are using a WordPress theme that supports Block Elements, you can search for a booking button element in a list of available Blocks.

You can then control all of the attributes of the booking button using a visual interface, without having to deal with shortcodes or custom data attributes:

Attaching a trigger to an existing element

If your are using a page builder or some custom button that you want to open a booking modal when clicked, you can simply add os_trigger_booking class to that button, which will convert it into a clickable booking button.

Here is an example of adding it to a custom html that you have in your code:

<a href="#" class="os_trigger_booking">Book Now</a>

Here is an example from Elementor plugin:

Setting additional attributes

You can also set all of the attributes, that are available in the regular shortcode, for this trigger element. Just replace underscore with a dash and use data- attribute of the element. For example hide_summary=”yes” will turn into data-hide-summary=”yes”.

Here is an example of adding it to a custom html that you have in your code:

<a href="#" class="os_trigger_booking" data-selected-service="2">Book Now</a>

Here is an example of setting it inside of the Elementor plugin: