Deep Dive into CTAs | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • How to define your call to actions
  • How to leverage Knowledge Graph fields to make this easy

Overview

Call to actions for a given card are arguably the most critical component - these are how you make a customer conduct an action, and ultimately convert. Our built-in cards will have the best recommendations for each entity type, but we’ll show you how to change those to tailor to a customer’s needs.

The CTA Object

We can feature up to two CTAs on each card. Each will be defined separately as an object, CTA1 and CTA2

CTA1: {
  label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
  iconName: 'chevron', // The icon to use for the CTA
  url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking
  target: '_top', // Where the new URL will be opened
  eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
  eventOptions: this.addDefaultEventOptions()
},
Property Description example
label This defines the text of the cta, ex. Learn More. “Learn More”
iconName This is the icon associated with the call to action. This property accepts only one of the enum values available in the SDK. Full list of icon options available in the SDK here ‘briefcase’
iconUrl If you want to use a custom icon, you can pass an image reference here. You can either hardcode this, or pull it from a field on the entity profile. profile.c_ctaIcon1.url
url This defines the URL of the CTA. This is most often pulled from the profile. If you are using a CTA field, you must use the Formatter Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA)
target This defines where the CTA opens once a user clicks. “_blank”
eventType This is the event that fires when a user clicks on this call to action “CTA_CLICK”
eventOptions These are additional parameters you can provide for the analytics event fired. You typically will not need to edit this.

Using Knowledge Graph Fields

You’ll see in the above example, we’re mapping the label and URL to a property on the c_primaryCTA custom field, and using the Formatter you learned about in the last unit to generate the correct URL.

CTA1: {
  label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
  // iconName: '', // The icon to use for the CTA
  url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking 
}

If you’ve created custom fields named Primary CTA and Secondary CTA of type ‘CTA’ and use the Standard or Accordion card (or a forked version of either), you just need to populate these fields in the Knowledge Graph and your CTAs will start appearing.

You can also map these properties to any field on an Entity profile you desire!

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    What properties can you use to set the icon of a CTA? (Select all that apply)

    Error Success Question 2 of 2

    Can you define CTAs using the Knowledge Graph?

    Climbing that leaderboard! 📈

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Feedback