CTAs | Yext Hitchhikers Platform
Call to actions (CTAs) are a critical component of cards - these are how you prompt a customer to take an immediate action, and ultimately convert. Our built-in cards will have CTAs built in as well, but you can change them to tailor to your needs.
The CTA Object
By default, we can feature up to two CTAs on each card. Each will be defined separately as an object,
CTA2. The CTA objects are found in the card > component.js file as they are data mappings.
// The primary CTA of the card
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
// ariaLabel: '', // Accessible text providing a descriptive label for the CTA
Using Content Fields
You’ll see in the example above, we’re mapping properties to the
c_primaryCTA custom field:
labelproperty maps to the
labelsubfield on the
urlproperty uses the built-in formatter to generate the correct URL using the URL and link type subfields on the
If you’ve created custom fields named Primary CTA and Secondary CTA of type ‘Call to Action’, you can use cards that map to these fields by default (such as the built-in or forked Standard and Accordion cards). You just need to populate these fields in Content and your CTAs will start appearing.
You can also map these properties to any field on an entity profile you desire! Read