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, CTA1 and CTA2. The CTA objects are found in the card > component.js file as they are data mappings.

// The primary CTA of the card
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()
  // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
},

Property	Description
`label`	The text of the CTA.
`iconName`	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 can be found in the Icons reference doc .
`iconUrl`	If you want to use a custom icon, you can pass an image reference. You can either hardcode the value or map it to a field on the entity profile. The reference format should either be a web URL or a relative URL to an image you uploaded to your repo.
`url`	The URL of the CTA that users should be directed to when they click it. This is most often pulled from the profile. If you are using a CTA field, you must use the formatter.
`target`	Defines where the CTA opens once a user clicks. See the Target Behavior of Links reference doc.
`eventType`	The event that fires when a user clicks on this call to action. See the Search Analytics Event Types reference doc.
`eventOptions`	These are additional parameters you can provide for the analytics event fired. You typically will not need to edit this.
`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:

The label property maps to the label subfield on the c_primaryCTA field.
The url property uses the built-in formatter to generate the correct URL using the URL and link type subfields on the c_primaryCTA field.

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

Back

< Direct Answers

Standard Branding Elements >

Feedback

<% elem.innerText %>