Overview

If you have enabled the ability for clients to select a specific staff member during the booking process, you might want to disable this ability in certain situations.

This article will demonstrate how to hide this option when a specific service is selected by using our integration with Google Tag Manager (GTM) to inject a custom HTML tag into the modern client view. Note that most ad blockers will prevent GTM tags from being run in your clients' browsers so this is not to be considered a bullet proof solution. Also note that this article should only be used as an example of what can be done via custom HTML tags and thorough testing should be done before launching this tag.

Configuring the GTM Container ID inside Coconut

Once you have created a GTM container, configure the container ID inside the Client View Settings as per below:

Configuring the Tag

Navigate to your GTM container and the workspace in which you want to create the tag and click on the New Tag button. Give your tag a name.

Hover over the Tag Configuration section with your mouse and click on the pencil icon in the top right corner to edit the tag configuration. From the side panel that comes up, select the Custom HTML tag type.

In the text area that comes up insert the following HTML code:

<script>
var serviceId = JSON.parse(window.sessionStorage["selection-state"]).service.id;
var specificStaffOption = document.querySelector('[data-id="specific"]');
//replace this with the Coconut IDs of the services that you want to disable this option for
//note that you can do something similar by searching through the list of category IDs that 
//the service belongs to which is available at JSON.parse(window.sessionStorage["selection-state"]).service.categories
//(e.g. JSON.parse(window.sessionStorage["selection-state"]).service.categories.includes("31") would return true if the
//selected service belongs to a service category with ID of 31)

var serviceIdsForWhichToDisable = ["16141"]; 
if (specificStaffOption && serviceIdsForWhichToDisable.includes(serviceId)) {
specificStaffOption.parentElement.style.display="none";
}
</script>

Your tag should now look like this:

Configuring the Trigger

In order for your tag to fire at the right point in the appointment booking flow, you need to configure the trigger. Hover with your mouse over the Triggering section of your tag and click on the pencil icon in the top right corner of the section. In the panel that comes up, click on the "+" button in the top right corner to create a new trigger configuration.

Give your trigger configuration a name, hover over the Trigger Configuration section and click on the pencil icon in the top right corner of the section. From the side panel that comes up, select Element Visibility as the trigger type.

Choose CSS Selector as the Selection Method and inside Element Selector enter

section[data-testid*="user-preference-"]

Choose "Every time an element appears on screen" as the option for "When to fire this trigger" and select the checkbox beside "Observe DOM changes". Once done, your trigger configuration should look like this:

Save your trigger configuration and save your tag.

Deploying your Tag

Once your container ID has been setup inside Coconut and the tag and the trigger have been configured inside your GTM container, you can preview your changes by clicking on Preview inside GTM and specifying your Coconut URL.

After you have completed your testing, publish your changes by pressing Submit.