SmartLinks 2.0

What’s possible

Here are just a few examples of what’s possible.

Provide quick glimpses of linked content to drive clicks using page previews:

Build trust with citations or references for authority with source qualification:

Clarify technical terms or provide additional context seamlessly with references: 

Highlight products, key features, or benefits with engaging previews using product promotion:

You’ll be able to do this and much more with this powerful new feature.

Adding Customization Links

Let’s see how to set up a new customization by building the Trusted Sources use case.

You’ll now see a new Customization tab in the SmartLink Dashboard, where you can fine-tune how specific links behave. Just click the “+” button at the bottom right to add a new customization that will be applied to both editorially created links and smartlinks.

When you start creating customization, you’ll see some default fields like:

• Name - You can give your customization a name.
• Applied to Links that- This dropdown helps you choose the criteria for which links should this customization apply to. Whether it contains, equals, starts with, or ends with a specific part of the URL.
• Filters - Use these to include or exclude articles based on sections or tags.

By default the Add/Edit Customization form doesn’t include any customizations so you will need to define your custom link attributes in the L&D Tool, and once they’re set up, they’ll automatically appear in this form. We’ll cover how to configure these fields in the Setting Up Customization Attributes section of this article.

For this example, we have added the following fields Customization Type dropdown, Site Name, and Site Description text boxes:

Finally you can set up the desired filtering and go to the frontend to see how it looks. Note: customizations are cached for 10 minutes so close any incognito window before trying them out, to prevent any caching issues.

Setting Up Customization Attributes

You need Custom Link Attributes to add context-specific information to your links. These fields are going to be added to as attributes to the <a> tag containing the link. These can be used to apply custom styles and to set a custom behaviour (eg: show tooltip when hover) using JavaScript. They custom link attributes can be organized into groups, making it easier for the editorial team to enter the details relevant to a type of customization.

Now that we understand the why, let’s walk through how to create the custom fields needed to set up our beautiful “Trusted Source” tooltip.

You can add Custom Fields in Layout & Design Tool by going to
Global Settings and then searching for Custom Link Attributes. After selecting it you can click the ➕ button to add new Custom Field elements, where you’ll need to fill out the following details:

• Type – Determines how the attribute is rendered in the form (e.g., text, radio, dropdown, date, etc.).
• Internal Name – Specifies the attribute name in the HTML element.
• Title – label for the form field.
• Grouping – if you have multiple types of customizations, you can group the custom fields by adding the same group name in this field.
• Is Required – Indicates whether the field must be filled to save the Add/Edit customization form.
• Options – Here you can add multiple options for the dropdown customization type.

For the Trusted Source tooltip, you’ll need to set up three custom fields:

1. Customization Type – a dropdown with options like None and Trusted Source.
2. Site Name – a text field to enter the name of the source
3. Site Description – a text field for a short description of the source

If you want to add other customization options later, you can add a new option inside Customization Type and create the Custom Link Attributes that will be used for that customization. You can set a different group so that they are separated from the fields used for the Trusted Sources example.

How to Add CSS/HTML/JS Code

The final step is to style your tooltips or popups using CSS and set up any behaviour using HTML and JavaScript. You can go back to the Post Layout in the Layout & Design Tool to apply your custom designs.

In our Trusted Source example:

1. We added custom CSS to style the tooltip. Gist link
   
   
   
   
2. We also added custom JavaScript to control its behavior and interactions. Gist link

More Targeting Options

Finally, in this new release of SmartLinks we’ve also introduced new targeting options that let you control which articles display SmartLinks based on specific sections and tags.

1. Include articles in sections – Apply SmartLinks only to articles in a specific section.
2. Include articles tagged with – Apply SmartLinks only to articles with specific tags.