Table of Contents / Anchor Links Within an Email Message

Details

If you're writing a lengthy eNewsletter, it used to be common practice to create a table of contents at the top, then have it link down to various sections within your email.

Sadly, many email clients (Gmail, Yahoo, Outlook online, etc) have dropped support for this function. As such, we no longer support it either with an automated / out-of-the-box solution - as it would have been 'broken' for many of your email recipients.

Another way of achieving this is to create one main email and link the various sections / articles off to other, smaller, 'article specific' emails that you've built in our platform ...and we have a guide for this too!

However, despite a lack of support in the market, if you want to still really want to use the old method (and you have some knowledge of HTML code), you can still enter HTML code view (on a text component) when designing your email and add in your anchors and links that way ...just understand that it won't work on many email programs and note that we don't offer or provide support for this as it is a legacy method.

Shorter Is Better: The Benefits of Concise Content

Marketing & email design best practice says it's better to keep your emails concise. One way to do this could be to feature teasers for your various articles and then linking off to the full read elsewhere, such as on your website or intranet.

• Using teasers for articles builds anticipation
• Showing a preview and linking to the full read allows you to track who reads which articles and what content is more appealing (via your reports) - meaning you can create better, higher-performing & more relevant content in future by using these insights to guide you
• Posting content online helps with your SEO
• Large emails with lots of imagery take longer to download on mobile devices
• Contacts may ignore lengthy emails & elect not to read them
• A long email may cause contacts to unsubscribe

How-to Guide

To manually add anchors, you will need to be familiar with some HTML code.

The anchor process works best if you build your email and its content first, then add the anchors & links as one of the last things you do.

1. Open your email message for editing.
2. Start by entering the the text for your table of contents (example below).
   
3. Next, we need to add 'anchors' to each of the sections that we want our readers to be able to 'jump' to. To do so, double-click on the text component for your first destination to go into text editing mode.
4. Click the HTML icon on the floating toolbar to enter into HTML mode.
   
5. Our article starts with a 'Heading 3', so here in the HTML code, you will see the code for this - it starts with <h3>. If you used a 'Heading 1', you will see <h1>. You'll see a <h2> if you used a 'Heading 2'.
   
   You will need to add an anchor into this piece of code (the anchor is called an 'id'). Below, you can see what the code now looks like, after we typed in our special 'id' and gave it a name. Note that you can call the id anything you like - we're called it 'firstarticle' to keep things simple.
   Anchors must be unique, otherwise the email client won't know where to jump the recipient down to. Additionally, anchors should be lowercase with no spaces and no symbols (some are supported, but it's best to stick to letters & numbers to keep it easy!) So essentially, we have added some code to our 'heading 3' to tell it that it's 'id' is 'firstarticle', using the following syntax:  id="firstarticle"
   
6. Press Update to save your changes to the HTML code. You've just added your first anchor!
7. Repeat steps 3 - 6 for any other articles that you want recipients to be able to 'jump' to using your table of contents. For our example, we repeated these steps two more times - adding anchor id's called secondarticle and thirdarticle.
8. Once that's done, the next step is adding links into your table of contents. Double-click in the text area that contains your table of contents.
9. Highlight the first section of text in your table of contents and click the world / chain (insert link) icon from the floating toolbar.
10. In the URL field, enter a hash, followed by your anchor id. In our example, we entered the following #firstarticle (as shown).
    
11. Click Insert Link
12. Repeat steps 9 - 11 for any remaining links in your table of contents in order to add links of all of them.
13. Next, click the HTML icon on the floating toolbar to enter into HTML mode for your table of contents section.
14. Our system adds http:// to the front of all links - but for anchor links, we don't need this - so you'll need to remove them. Here's what our links looked like before...
    
    ...and after:
    
15. Click Update to save your edits, then save your changes. You can now preview your email or send yourself a test to try your new table of contents with anchor links!