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.  

• Creating an anchor
• Blocks
• Custom code

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.

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. 

Custom code

The second option is to use the HTML block and a tiny bit of custom code to create your destination. One advantage of this approach is that you can attach an anchor link to text (optional). Also, the destination does not have to be a visible spot on the page. It could, for instance, be an invisible HTML block near a subheading in a long passage.

Set the destination first

Open a template and drag the HTML block to the canvas. In this example, we place the HTML block immediately above some text. When readers click the anchor link, they jump to the gift section in the message.

Click the HTML block one time to open the code editor. Replace the default code with the custom code. Insert your unique anchor name between the quotation " " marks.

You can insert text between the  > < arrows or leave that space blank. That's optional.

<a name = "anchorname"></a>

Set the source

Go to the starting point (e.g. a Menu block or Button block). Click the block one time and then go to the side panel. In this example, we insert a Menu block and customize the label.

Click the Link button and select Other. In the empty field, enter a pound sign followed by the anchor name.

Preview

It's not possible to preview anchor links in the editor. To test your links, create a campaign and send a test message.