There are three ways of adding a booking button:
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
Customize Button Appearance
| Attribute | Description | Default | Example |
|---|---|---|---|
| caption | Text for the caption of the button | "Book Appointment" | "text" |
| bg_color | Background color for the button | "#2d54de" | "#2d54de" |
| text_color | Text color of the button | "#ffffff" | "#ffffff" |
| font_size | Font size of the button | "16px" | "14px" |
| border | Border of the button, accepts values like | none | "1px solid #000000" |
| border_radius | Border radius of the button | "0px" | "10px" |
| margin | CSS margin of the button | "0px" | "10px 20px" |
| padding | CSS padding of the button | "10px 20px" | "10px 20px" |
| align | Alignment of the button | "left" | "center", "left", "right", "justify" |
| css | If style attributes are not enough, you can simply enter custom css into this attribute and it will be applied as an inline css to the button. Note: if you want to use this attribute, you can NOT set other style attributes from the list above, otherwise this will be ignored. |
padding: 10px 20px; border: none; | |
Customize Form Appearance
| Attribute | Description | Default | Example |
|---|---|---|---|
| hide_side_panel | Setting to "yes" hides the left side panel of a booking form | "no" | "yes", "no" |
| hide_summary | Setting to "yes" hides the summary panel | "no" | "yes", "no" |
Skip steps and control available data
| Attribute | Description | Example | |
|---|---|---|---|
| Pre-selecting step value | |||
| selected_location | Skip location step by setting to location "ID" or to "any" to auto assign any available location. | "1", "any" | |
| selected_agent | Skip agent step by setting to agent "ID" or to "any" to auto assign any available agent. | "1", "any" | |
| selected_service | Skip service selection step by setting to service "ID". | "1" | |
| selected_duration | Skip duration selection step by presetting duration in minutes. | "60" | |
| selected_total_attendees | Preselect number of attendies to skip that step. | "3" | |
| selected_service_category | Show services from specific category by setting category "ID". | "1" | |
| calendar_start_date | Setting this attribute to a date forces the calendar to start on that date. You can also use dynamic values like "tomorrow", "+1 week", "+2 months" etc... and it will automatically show calendar 2 months or 1 week in the future, depending on what day is today | "2024-07-25", "tomorrow", "+1 week", "+2 months" | |
| selected_start_date | This attribute should be set together with the selected_start_time attribute. Setting these two attributes to a specific date and time, will make date & time selection step to be skipped. | "2024-07-25" | |
| selected_start_time | Preselect start time of the booking in minutes. For example "600" is 10:00am. Should be set together with selected_start_date attribute | "600" | |
| Data for steps | |||
| show_locations | Show only select locations by setting their IDs | "1,2,3" | |
| show_agents | Show only select locations by setting their IDs | "1,2,3" | |
| show_services | Show only select services by setting their IDs | "1,2,3" | |
| show_service_categories | Show only select service categories by setting their IDs | "1,2,3" | |
| Other | |||
| source_id | Track the source ID for your booking button or form. Source ID for each booking can be found on the booking edit form in admin. | "ANY_VALUE" | |
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:
