Add a Table of Contents to a Campaign

This feature requires Author user level or higher.

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

  • 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 list, 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. Navigate to the Design step of the Campaign Builder
  2. 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.
    Cursor highlights text.
  4. In the editor toolbar, click the Styles drop-down menu and choose TOC heading or TOC title.

    Table of contents styles
    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.

  1. Navigate to the Design step of the Campaign Builder.
  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.

    Table of contents tag

  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 Campaign: Enter Preview Mode

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.

 

 

title mc-toc-title
<span class="ttitle"> <span class="mc-toc-title">
<div class="title"> <div class="mc-toc-title">
<h1 class="title"> <h1 class="mc-toc-title">
<h2 class="title"> <h2 class="mc-toc-title">

 

 

 

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

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 >

Was this article helpful?
What can we do to improve articles like this?

Technical Support