External Link Targeting

Automatically open external links in a new tab

We are planning to move this into the Rich Text lib.

In most situations, you will automatically want external links to open in a new tab.

This library automatically looks for FQDN links such as https://... and adds a target=_blank.

It will only add a target if none is specified.

Demonstration

External Links

Demonstration page

Url Query Params & Navigation - WebflowUrl Query Params & Navigation

Cloneable site

Usage Notes

Add the wfu-external-links custom attribute to any link, text, or richtext element. Can also be added to DIVs.

Configuration

This library has extensive configuration options.

All SA5 Url lib features are handled in a single urlConfig configuration block, however feature-specific configurations are represented as sub objects. Typically you can enable or disable a feature, and provide a custom configuration if you choose.

Here is an example configuration for External link targeting;

<!-- Sygnal Attributes 5 | Url | Config -->
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['urlConfig', 
  (config) => {
    config.targetExternal = true;
    return config;
  }]); 
</script>

Options

targetExternal = true | false

Enables or disables external targeting. Defaults to false.

Getting Started ( LOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Add your Configuration Callback

Add this configuration section above right after the library in your before HEAD custom code. Typically this will be in the site-wide custom code configuration.