Target Behavior of Links | Yext Hitchhikers Platform
What You’ll Learn
In this section, you will learn:
- What are the different options for where a link opens upon click
- How to control this behavior for title links and CTA links
Overview
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:
- _blank - opens link in a new tab
- _self - opens the link in the same container as it was clicked (ex. the iFrame)
- _parent - opens in the parent container of the link
- _top - opens the link in the full body of the current tab
- _framename - loads the link in the named frame
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. For example, try clicking any link or button in the Yext page that’s iFramed below. You’ll notice that the page will change within the frame (target=_self) instead of opening in the current window.
Yext.com iFrame
Thankfully, by default in Search, targets are set to “_top”, which opens the link in the full body of the 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 page itself.)
Please see below for more details on how to set target behavior.
Setting Target Behavior for the Title
You’ll set this within your Data Mappings of your card, using the target
property. See example code below:
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 for CTAs using the CTA field
This is set in your CTA objects. You can define the target behavior of each CTA separately, again using the target
attribute here.
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()
}