In this article
Scenario
You have enabled Phone & Video Appointments and you want to encourage clients/members to use one of these digital channels rather than visiting a branch for an in-person appointment. Below is an example of what promoting digital engagements might look like (notice both the prompt above the list of available meeting methods as well as the fact that the In Person meeting method is moved to the bottom of the list):
Suggestion
Use our Google Tag Manager (GTM) integration to inject a custom HTML tag into the modern client view.
NOTE: Many ad blockers will prevent GTM tags from being run in your clients' browsers, so this solution may not work in all cases. As a best practice, ensure you thoroughly test the custom HTML tag prior to launching it.
Where to begin?
Configure the GTM Container ID inside Coconut
Once you have created a GTM container, configure the container ID inside Coconut by going to the Google Tag Manager section inside the Client View Settings.
Configure the GTM 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>
//select the DOM element with the meeting methods
var meetingMethods = document.querySelector('[data-testid="mobile-list"]');
if (meetingMethods && meetingMethods.childElementCount == 3) { //if there are three meeting methods available (i.e. not just In Person)
//move the In Person meeting method from the first position in the list to the bottom of the options
meetingMethods.appendChild(meetingMethods.removeChild(meetingMethods.firstChild));
//update the text here with the text that you want displayed above the list of available meeting methods
var text = "In order to keep you and our staff safe, please consider attending via phone or video rather than in person if possible.";
//insert the prompt above the available meeting methods
var newElement = document.createElement("div");
newElement.innerHTML = "<div style=\"background-color: #FFEBEE;display: flex;padding: 0.875rem;flex-wrap:wrap;border-radius:0.25rem;\"><div><span>"+text+"</span></div></div>";
meetingMethods.parentNode.insertBefore(newElement, meetingMethods);
}
</script>Your tag should now look like this:
Configure the GTM 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*="-meeting-methods"]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.
Deploy the GTM 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.
Additional Resources
For more information on Google Tag Manager functionality, please refer to Google's documentation.