Target Behavior of Links | Yext Hitchhikers Platform
Target behavior defines where a link will open after you click on it. It’s an attribute of an <a> tag (ex. <a href=”https://www.yext.com” target=”_blank>Learn about Yext</a>).
The options you have for the target attribute are listed below:
| Target Behavior | Description |
|---|---|
_blank |
Opens the link in a new tab |
_self |
Opens the link in the same container as it was clicked (ex. the iFrame) |
_parent |
Opens the link in the parent container |
_top |
Opens the link in the full body of the window |
_framename |
Opens the link in in the named iframe |
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()
}