|

Adding a booking button to your page

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
AttributeDescriptionDefaultExample
captionText for the caption of the button“Book Appointment”“text”
bg_colorBackground color for the button“#2d54de”“#2d54de”
text_colorText color of the button“#ffffff”“#ffffff”
font_sizeFont size of the button“16px”“14px”
borderBorder of the button, accepts values likenone“1px solid #000000”
border_radiusBorder radius of the button“0px”“10px”
marginCSS margin of the button“0px”“10px 20px”
paddingCSS padding of the button“10px 20px”“10px 20px”
alignAlignment of the button“left”“center”“left”“right”“justify”
cssIf 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
AttributeDescriptionDefaultExample
hide_side_panelSetting to “yes” hides the left side panel of a booking form“no”“yes”“no”
hide_summarySetting to “yes” hides the summary panel“no”“yes”“no”
Skip steps and control available data
AttributeDescriptionExample
Pre-selecting step value
selected_locationSkip location step by setting to location “ID” or to “any” to auto assign any available location.“1”“any”
selected_agentSkip agent step by setting to agent “ID” or to “any” to auto assign any available agent.“1”“any”
selected_serviceSkip service selection step by setting to service “ID”.“1”
selected_durationSkip duration selection step by presetting duration in minutes.“60”
selected_total_attendeesPreselect number of attendies to skip that step.“3”
selected_service_categoryShow services from specific category by setting category “ID”.“1”
calendar_start_dateSetting 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_dateThis 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_timePreselect 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_locationsShow only select locations by setting their IDs“1,2,3”
show_agentsShow only select locations by setting their IDs“1,2,3”
show_servicesShow only select services by setting their IDs“1,2,3”
show_service_categoriesShow only select service categories by setting their IDs“1,2,3”
Other
source_idTrack 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.

latepoint booking button 1

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:

latepoint booking button 2

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:

latepoint elementor booking button 1

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:

latepoint elementor booking button 2
Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

%title %title
On this page