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()
}