Filtered Links

How to Create a Filtered Link

The filtering works by appending parameters to the URL of your booking page. The format for the parameters is:

cs_filter_{field_key}={option_value}

Where:

{field_key} is the "Field Key" of the dimension you want to filter. For example, service_type or location.
{option_value} is the exact text of the option you want to pre-select. This is case-sensitive and must match what you entered in the custom field options.

Let's use an example setup for a concrete example:

Your main booking calendar page URL is: https://example.com/booking-calendar/
You have a dimension with the Field Key: service_type
This dimension has two options: General Consultation and Follow-up Visit

1. To Link Directly to the "General Consultation" View:

You would use the following URL:
https://example.com/booking-calendar/?cs_filter_service_type=General+Consultation

(Note: The space in "General Consultation" is replaced with a + sign. Browsers handle this automatically when you copy/paste a URL with spaces.)

2. To Link Directly to the "Follow-up Visit" View:

You would use this URL:
https://example.com/booking-calendar/?cs_filter_service_type=Follow-up+Visit

How It Works Internally

A user clicks your custom link.
The frontend-appointment-calendar.js script loads.
The new applyUrlFilters function runs immediately on startup. It scans the URL's query string for any parameters that start with cs_filter_.
It finds cs_filter_service_type and extracts its value ("General Consultation").
It sets this value in its internal state (currentFilterSelections) and updates the filter dropdown on the page to show "General Consultation" as the selected option.
The calendar then initializes and makes its first AJAX call to fetch events, automatically including the service_type=General Consultation filter in the request.
The backend (Helpers->get_calendar_data()) receives this filter and queries the database only for slots that have that specific dimension.
The result is that the user sees the calendar pre-filtered for the service they clicked, providing a seamless and direct booking path.

Practical Applications

This feature is incredibly useful for marketing and website navigation:

Services Page: On your main "Services" page, you can have a "Book Now" button next to each service description that links directly to the calendar pre-filtered for that specific service.
Email Campaigns: Send an email promoting a specific service (e.g., a "Spring Special Consultation") and link directly to the filtered booking calendar.
Multiple Practitioners: If you had a dimension for practitioner, you could link from each practitioner's bio page to their personal availability calendar.

This functionality is a core part of the plugin's powerful filtering and user experience design.

Of course. You've uncovered a powerful and intentionally built, yet less-documented, feature of the Client Sync plugin. You are absolutely right that you can create custom links to control the calendar filters without a page refresh.

Here is the documentation for how to find the necessary information and build these links.

Documentation: Creating Custom Filter Links for the Booking Calendar

The Client Sync plugin includes a dynamic filtering system that allows you to control the appointment calendar using standard HTML links. This is perfect for creating a "Services" section on your booking page where users can click a link to instantly see availability for that specific service.

How It Works

The plugin's frontend JavaScript (frontend-appointment-calendar.js) is always listening for clicks on elements that have a specific CSS class: cs-service-filter-link.

When a link with this class is clicked, the script does the following:

It prevents the link's default action (so the page doesn't refresh or jump).
It reads two special HTML "data attributes" from the link: data-filter-key and data-filter-value.
It finds the corresponding filter dropdown on the page and programmatically sets its value to the one you specified in the link.
This triggers the calendar to refetch its events with the new filter applied, all via AJAX without a page reload.

Step-by-Step Guide to Creating a Custom Filter Link

To create a link, you need two pieces of information: the Filter Key and the Filter Value.

Step 1: Find Your Filter Key

The "Filter Key" is the unique identifier for the custom field you are using as a filter (e.g., service_type, location).

In your WordPress dashboard, go to Client Sync > Custom Fields.
Click on the Appointment Custom Fields tab.
In the table of existing fields, find the field you use for filtering (it must be a "Dropdown Select" type and marked as "Filterable").
The value you need is in the "Field Key" column. It's usually all lowercase with underscores (e.g., service_type).

Step 2: Find Your Filter Value

The "Filter Value" is the exact text of the dropdown option you want the link to select. For example, if your "Service Type" dropdown has options "Wellness Massage" and "Deep Tissue Massage", those are your filter values.

Step 3: Construct the HTML Link

Now, you will create a standard HTML <a> link with three specific parts:

class="cs-service-filter-link"
data-filter-key="your_key_here"
data-filter-value="Your Value Here"

The href attribute can be set to "#" to make it behave like a link without going anywhere.

Template:

Generated html

<a href="#" class="cs-service-filter-link" data-filter-key="your_key_here" data-filter-value="Your Value Here">
    Your Clickable Link Text
</a>

Concrete Example

Let's assume you have a "Filterable" custom field with:

Field Label: Service Type
Field Key: service_type
Options: Wellness Massage, Deep Tissue Massage, Sports Injury Therapy

You want to write a description for each service and make the service name clickable.

Go to your booking page in the WordPress editor.
Add a "Custom HTML" block (or use the text editor).
Write your descriptions and insert the specially crafted links.

Generated html

<h3>Our Services</h3>

<p>
  Discover our range of therapies designed to help you feel your best. 
  Click a service to see available appointment times.
</p>

<h4>
  <a href="#" class="cs-service-filter-link" data-filter-key="service_type" data-filter-value="Wellness Massage">
    Wellness Massage
  </a>
</h4>
<p>
  A relaxing full-body massage to relieve stress and tension, promoting overall well-being.
</p>

<h4>
  <a href="#" class="cs-service-filter-link" data-filter-key="service_type" data-filter-value="Deep Tissue Massage">
    Deep Tissue Massage
  </a>
</h4>
<p>
  Targets the deeper layers of muscle and connective tissue. Highly effective for chronic aches and pains.
</p>

<h4>
  <a href="#" class="cs-service-filter-link" data-filter-key="service_type" data-filter-value="Sports Injury Therapy">
    Sports Injury Therapy
  </a>
</h4>
<p>
  Focuses on areas of the body that are overused and stressed from repetitive and often aggressive movements.
</p>

<!-- The Client Sync calendar shortcode should be on the same page -->
[cs__appointment]

When a user clicks the "Wellness Massage" link, the service_type dropdown will automatically select "Wellness Massage", and the calendar will instantly update to show the schedule for that service.

Important Note: The data-filter-key and data-filter-value must match the values in your settings exactly, including capitalization and spacing.

test blank wp