Call for Availability

Where can I find it? Services/Company >>> Default Settings >>> Booking preferences >>> Cut-off time.

Instructions

Step 1: Activate the Feature

You can activate this feature either at a Company level or individually on each service. Go to  Services >>> PX >>> Default Settings >>> Booking preferences >>> Cut-off time or Company >>> Default Settings >>> Booking preferences >>> Cut-off time and check the option depicted in the screenshots below:

"Company" view

"Services" view

Step 2: (optional) Add a Legend

If you also want to show a legend explaining the meaning of each color in your booking calendar, you can copy and paste the following code on each service using this feature, within Services >>> PX >>> Default Settings >>> Service Custom HTML:

<center>
<label class="event-label" title="Available"><span title="Available">AVAILABLE</span></label>

<label class="event-label-closed too-late" title="CALL FOR AVAILABILITY"><span title="CALL FOR AVAILABILITY">CALL FOR AVAILABILITY</span></label>

<label class="event-label-closed" title="SOLD OUT"><span title="SOLD OUT">SOLD OUT</span></label>
</center>

 Keep in mind: this option can be used for all services at once by enabling the Use company booking preferences option on each service.

Opciones para la leyenda

Instead of merely telling your users that they can call you to check the availability of that event, you can offer direct links for them to make the call or contact via WhatsApp at the phone number of your choice.

To do this, you must add the corresponding code in the service(s) where you want it to appear, inside Services >>> PX >>> Default Settings >>> Service Custom HTML. 

Legend + call

You must change the phone number inside the href="tel:+34XXXXXXXXX" attribute to the one you want. You will see it highlighted in red in the code:

<script>

var legend= $( '<div style="margin-top:0;text-align:left;"><label class="event-label" title="Available"><span title="Available">AVAILABLE</span></label><label class="event-label-closed too-late" title="CALL FOR AVAILABILITY"><span title="CALL FOR AVAILABILITY">CALL FOR AVAILABILITY</span></label><label class="event-label-closed" title="SOLD OUT"><span title="SOLD OUT">SOLD OUT</span></label></div>' );

$( document ).ready(function() {

setTimeout(function(){    

//$('#eventsCalendar-slider').append($legend);

legend.insertAfter($('.eventsCalendar-slider'));

}, 100);

});

/* Add phone to violet */

$(document).on( "afterInsertAfter", null, function() {

$('.event-label-closed.too-late span').wrap( '<a style=“text-decoration:none” href="tel:+34XXXXXXXXX"></a>');

});

</script>

Legend + whatsapp

For this code to work, the associated number must be active in Whatsapp.

You must change the phone number inside the href="https://api.whatsapp.com/send?phone=34XXXXXXXXX&text=" attribute to the one you want. You will see it highlighted in red in the code:

<script>

var legend= $( '<div style="margin-top:0;text-align:left;"><label class="event-label" title="Available"><span title="Available">AVAILABLE</span></label><label class="event-label-closed too-late" title="CHECK VIA WHATSAPP"><span title="CHECK VIA WHATSAPP">CHECK VIA WHATSAPP</span></label><label class="event-label-closed" title="SOLD OUT"><span title="SOLD OUT">SOLD OUT</span></label></div>' );

$( document ).ready(function() {

setTimeout(function(){    

//$('#eventsCalendar-slider').append($legend);

legend.insertAfter($('.eventsCalendar-slider'));

}, 100);

});

/* Add phone to violet */

$(document).on( "afterInsertAfter", null, function() {

$('.event-label-closed.too-late span').wrap( '<a style="text-decoration:none" href="https://api.whatsapp.com/send?phone=34XXXXXXXXX&text=" target="_blank"></a>');

});

</script>