Add a Table of Contents to a Campaign

Add a table of contents to your campaign layout to keep your content clear, organized, and easy to navigate. This helps your subscribers quickly find the information that interests them, so they stay engaged with your campaigns.

Mailchimp offers two ways to set up a table of contents in your campaign: the *|MC:TOC|* merge tag and custom anchor links. The *|MC:TOC|* merge tag creates a table of contents for you, which contains links to headings in your campaign. Anchor links allow you to build your own table of contents with custom wording, link style, and formatting.

In this article, you'll learn about the two ways you can add a table of contents to your campaign.

Before you start

Here are some things to know before you begin this process.

• The *|MC:TOC|* merge tag and anchor links are not supported by all email clients, and may not work as expected when a campaign is viewed on a mobile device, so be sure to test your campaign thoroughly.
• The *|MC:TOC|* merge tag inherits the link text style of its campaign section. This means if you place it in the header section, it will look like other header section link text. To change the format of your table of contents, move the tag to a different section, or use anchor links instead.

Use the *|MC:TOC|* merge tag

The *|MC:TOC|* merge tag inserts a table of contents with links to the headings you choose. First, you'll format the heading text you want to appear in your table of contents. Then, add the *|MC:TOC|* merge tag to the section of the campaign where you want to place the table of contents.

When you send to your audience, we'll replace the merge tag with a table of contents that includes the headings you formatted in your campaign.

Format TOC Headings and Titles

First, choose what type of TOC heading style to use. To apply a standard heading format to your text, choose a TOC heading style from the drop-down menu. If you want to manually style how the heading appears in the campaign body, choose TOC title, and apply additional styles. Note that changes you make here won't affect how the table of contents looks.

To format text as a TOC heading or TOC title, follow these steps.

1. In the Content section of the Campaign Builder, click Edit Design.
   
2. On the Design step, click the Text content block that contains the heading you want to include in your table of contents.
3. In the editing pane, highlight the heading you want to format. Be sure that your heading contains text—the *|MC:TOC|* merge tag won’t generate a link to a number alone.
   
4. In the editor toolbar, click the Styles drop-down menu and choose TOC heading or TOC title.
   
   If you choose TOC title, use the other buttons on the toolbar to apply additional styles to the heading.
5. Click Save & Close.
6. Repeat these steps for each heading you want to include in your table of contents.

Add the table of contents merge tag

After you format your content headings, add the *|MC:TOC|* merge tag to any Text content block to insert the table of contents. The text and link style of the table of contents will match the campaign section it's in, and can't be changed. If you need to customize it, try anchor links instead.

To add the table of contents merge tag, follow these steps.

1. In the Content section of the Campaign Builder, click Design Email.
   
2. Click the text area where you'd like to add your table of contents.
3. Click the Merge Tags drop-down menu and choose Table of Contents.
   
4. Click Save & Close.

All done! You've successfully added a table of contents to your campaign. To see how your campaign will appear in your recipients' inboxes, look at it in Preview Mode.

Preview and Test Your Email Campaign
View and Edit Section Design

Add a Table of Contents to a Custom HTML Template

If you use a custom HTML template, you can still use the *|MC:TOC|* merge tag to insert a table of contents. Just be sure you've formatted each heading with the right tags, and you'll be ready to go.

First, open the template's source code and add class="title" or class="mc-toc-title" to the < span >, < div >, < h1 >, or < h2 > tags of the headings you want to appear in the table of contents. These classes don't work with < h3 > and < h4 > tags, so try < span > tags instead if you need them.

Your formatted headings should use one of the examples in this table. Either class type can be used.

After you edit your tags, you'll add *|MC:TOC|* where you want the table of contents to appear in your template.

*|MC:TOC|*
< div class= "title" id= "alumni-news" >

Where to Edit Template Code

Use anchor links

For more flexibility, create links to anchors in your campaign content. It's a little more work, but it allows you to customize the text and link style in your table of contents. First, you'll add anchors to the headings in your campaign content. Then, you'll input your table of contents text, and link each item to its anchor link.

Add anchor links

To add anchor links to your heading text, follow these steps.

1. In the Content section of the Campaign Builder, click Edit Design.
   
2. On the Design step, click the Text content block that contains the heading you want to include in your table of contents.
3. Place your cursor at the beginning of the heading, and click the Anchor icon in the toolbar.
   
4. In the Anchor Properties pop-up modal, type the name for your anchor in the Anchor Name field and click OK. Do not use spaces or special characters in your anchor name.
   
5. Click OK.
6. Repeat this process for every heading you want to link to your table of contents.

Format table of contents

Now that you've added anchor links to your campaign, you're ready to input the table of contents text and add links to each item.

To add and format your table of contents, follow these steps

1. Click the Text content block where you want to add your table of contents.
2. In the editing pane, input your table of contents.
   
3. Highlight the first item, and click the Link icon in the toolbar.
   
   Be careful to only highlight the text you want to link, and avoid spaces around the item. This will be helpful when you format the text later.
4. In the Insert or Edit Link pop-up modal, click the Link to: drop-down menu and choose Anchor Link.
5. Click the Select An Anchor To Link To drop-down menu and choose the anchor name this item should link to.
6. Click Advanced Options and uncheck the box next to Open in a new window.
7. Click Insert.
   
8. Repeat these steps for each item in your table of contents.

You can use the buttons in the editor toolbar to customize the style and wording of your table of contents. When you edit your table of contents, be sure to only highlight the text you want to change. Depending on the edit you make, you could remove an existing link and need to re-add it. To see how your anchor links will appear to recipients, preview and test your campaign.

Preview and Test Your Campaign

Testing and troubleshooting the table of contents

The *|MC:TOC|* merge tag and anchor links are not supported by all email clients, and may not work as expected when a campaign is viewed on a mobile device.

So before you send, we recommend you preview and test your campaign and send a few test emails to yourself. To see how a variety of email clients will display your table of contents, use our Inbox Preview tool.

Campaign Behavior on Mobile
Preview and Test Your Campaign
Test with Inbox Preview

Here are a few other things to keep in mind if your table of contents doesn't display as expected.

• If you used the *|MC:TOC|* merge tag to generate a table of contents, make sure that your heading text is formatted as a TOC heading or TOC title. To check the heading format, highlight the text and click the Styles drop-down menu where you'll see which style is selected.
• If you imported HTML to build your campaign, we'll add a < base > tag to your code that may break your anchor links. To prevent broken anchor links, you'll need to edit the code before you import it to Mailchimp. In your HTML editor, add your own blank base tag, like < base href = " " > inside the < head > element, and then import your HTML code. If we detect a blank < base > tag at the time of import, we won't add our own.

The blank < base > tag you add to your HTML should look something like this.

< head >
 < base href= " ">
< /head >