Back
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!
Daily Quiz Streak: 0
Quiz Accuracy Streak: 0
Question 1 of 2
What properties can you use to set the icon of a CTA? (Select all that apply)
Question 2 of 2
Can you define CTAs using the Knowledge Graph?
Climbing that leaderboard! 📈
