Conditional Logic for CTAs

Search Best Practices - Search Front-End
1

As a follow up to this post, if I only want the “Book Appointment” CTA to show up on provider cards when that provider is accepting new patients, can I set up conditional logic in the answers front end configuration? Something like if acceptingNewPatients=true → display tertiary CTA.

I want to avoid adding/removing information from the KG as doctors’ statuses change, so all the client would have to do to “turn on” the book appointment function would be to toggle “Accepting New Patients” and all the other required info will already be there.

2

Hi Sarah,

What a clever idea! You can easily do this by adding a boolean to your component.js file, and modifying the handlebars template to only show the third CTA if that boolean evaluates to true.

component.js
The first step is to pass the information about whether a provider is accepting patients. Add an attribute in your component.js file to store whether or not a provider is accepting new patients. If you use the profile field, when this is marked as ‘Yes’, the boolean will evaluate to true; if it’s marked as false or unpopulated, it will evaluate to false.

acceptingNewPatients: profile.acceptingNewPatients,

You’ll also need to provide the data mapping for the third CTA.

CTA3: { // The tertiary call to action for the card
        label: 'Book Appointment',
        iconName: 'calendar',
        url: Formatter.generateCTAFieldTypeLink(profile.c_tertiaryCTA),
        target: '_top',
        eventType: 'BOOK_APPOINTMENT',
        eventOptions: this.addDefaultEventOptions(),
        // ariaLabel: '',
      }

template.hbs
The next step is to use this boolean to only show the tertiary CTA when acceptingNewPatients = true.

We can do this using an if statement in handlebars. We’ll check if card.acceptingNewPatients evaluates to true; if so, we’ll add the tertiary CTA. You can see the modifications to the CTA partial below:

{{#*inline 'ctas'}}
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url)(all card.CTA3 card.CTA3.url))}}
<div class="HitchhikerLocationStandard-ctasWrapper">
  {{> CTA card.CTA1 ctaName="primaryCTA" }}
  {{> CTA card.CTA2 ctaName="secondaryCTA" }}
  {{#if card.acceptingNewPatients}}
   {{> CTA card.CTA3 ctaname="tertiaryCTA"}}
  {{/if}}
</div>
{{/if}}
{{/inline}}

This will hide the CTA if acceptingNewPatients is not populated or false, and show it if it’s true. Let us know if this works!

3 Likes
3

Works great! Very cool and something that will be easy for the client to maintain. Thanks!!

5

Adding this in case anyone also runs into the same error! For the step where you are adding the data mapping for the Third CTA, be sure to add a Formatter for the URL. Otherwise, the browser console will throw a TypeError at you and won’t show other entities. See below for this. I have added asteriks to the URL field for clarity.

CTA3: { // The tertiary call to action for the card
        label: 'Book Appointment',
        iconName: 'calendar',
        **url: Formatter.generateCTAFieldTypeLink(profile.c_tertiaryCTA),**
        target: '_top',
        eventType: 'BOOK_APPOINTMENT',
        eventOptions: this.addDefaultEventOptions(),
        // ariaLabel: '',
      }
1 Like
6

Hey Rohan,

Great callout! The code Amani posted used our legacy CTA field type, which did not need the formatter. We recommend everyone use our updated Call to Action field type and I have updated her post to incorporate the formatter you called out.

Keep in mind that you’ll only need this formatter if you created a custom field for the tertiary CTA using the built-in Call to Action field type. With this field type, you can specify different types of links, such as URL or phone number. The formatter adjusts the link in the frontend based on the link type specified on the entity in the Knowledge Graph.

If you are using a field that is just a URL, you can just reference that URL directly. For example, if you want to use the built-in Reservation URL field on the Healthcare Professional entity type, you can reference it with:

url: profile.reservationUrl,
1 Like