Target behavior defines where a link will open after you click on it. It's an attribute of an <a> tag (e.g., <a href="https://www.yext.com" target="_blank">Learn about Yext</a>).

The options you have for the target attribute are listed below:

To understand these options, we first need to understand the concept of iFrames. Put simply, an <iframe> HTML tag allows you to embed a page from a different source onto your webpage into an inline frame. To learn more about iFrames, you can check out W3Schools. Because you could be embedding an interactive page within your webpage, we need to explicitly tell the browser in what frame to open this content.

By default in Search, targets are set to _top, which opens the link in the full body of the browser window. This ensures that if the search experience is being iframed into a page, links will open outside of the iframe. Note that this is different than _parent, which would open in the frame containing the iframe (so if you had an iframe within an iframe, it would open within the "parent" iframe, not the web page itself).

Setting Target Behavior

Link target behavior is set on the card level. Here is where you'll find links and calls to action on individual entity results. Thus, you'll set link behavior on the card component.js file.

Setting Target Behavior for the Title

The title link target behavior is set with the top-level target property like so:

return {
  title: profile.name, // The header text of the card
  url: profile.applicationUrl, // If the card title is a clickable link, set URL here
  target: '_blank', // This will open the URL in a new tab
}

Setting Target Behavior for CTAs

CTA link target behavior is set within the CTA object. You can define the target behavior of each CTA separately, again using the target property.

CTA1: {
  label: 'Apply Now', // The CTA's label
  iconName: 'briefcase', // The icon to use for the CTA
  url: profile.applicationUrl, // 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()
}