How to Create Anchor Links

Help readers jump to content

Anchor links are a reader-friendly feature that should be part of your email design toolkit. They improve readability and the user experience. Readers can skip the fluff and jump to the content that grabs their interest.

If long-form content (e.g. newsletters, industry bulletins, or product promotions) is a regular part of your publishing schedule, you should consider the pros and cons of anchor links.

A cautionary word

The only real con is display. Some email clients on mobile devices don't support anchor links. The most recent research I can find indicates some support for anchor links, but it is not universal. Here's what we found.

These email clients support anchor links:

Samsung email app (Android)
Windows Mail (Windows 10)
Gmail (Web)
Gmail (Android app)
Inbox by Gmail (Android app)
Yahoo! Mail (desktop)

These ones do not:

Gmail (iOS app)
Apple Mail (iOS)
Outlook.com (Web)
Outlook (Android App)
Outlook for MAC

Creating an anchor

Ok, you've mulled over the pros and cons, and you're ready to try anchor links. Here's how.

Each anchor has two points: the source and the destination. The source holds the link, and the destination holds a unique anchor label. Sources are usually text, images, or buttons. The destination can be any component you see in the tinyEmail editor.

There are two ways to create anchor links: with blocks or with custom code.

Blocks

Set the destination first

Open a template and select a block on the editor that will be the endpoint. In this example, we select an Image block (but you can choose any component) and click it one time.

On the side panel, scroll down to the Add an anchor link heading. Switch on the toggle and then enter a unique name for the anchor.

create anchor block

Set the source

Go back to the editor and select a block that will be the start point. This block will hold the link. Readers jump from here to the destination. In this example, we select a Button block.

Click the block one time, go to the Link heading on the side panel and click Site. Scroll down to the Anchor Links heading and click the anchor name you created in the previous step.

You're done.