When you create a campaign in MailChimp, you can set up a table of contents in your design. A table of contents makes navigation inside your campaign easy for your subscribers.

Below, you'll learn two ways to add a table of contents to your email.

In this article:

Use a Merge Tag

The *|MC:TOC|* merge tag generates a bulleted table of contents list by pulling any text from your email that is formatted as a TOC Title or TOC heading style. Each item in the table of contents will link to that title in the campaign, so your subscribers can jump ahead to that content if their email program supports anchor links.

  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.

    Edit content block

  3. Add the merge tag *|MC:TOC|* manually or select the tag from the Merge Tags drop-down menu in the toolbar.

    Table of contents tag

  4. Click the Save & Close.

Note

The *|MC:TOC|* tag inherits the link styling set for the section it appears in and can't be styled independently. For example, if the merge tag is placed in the header section, the table of contents will automatically be given the link styling set for that section.

Format Content Titles in Editor

  1. Add and highlight the text you want to display in the table of contents.
  2. Click the Styles drop-down menu on the editor toolbar.
  3. Select TOC Title or TOC heading.

    Table of contents styles

Format Content Titles in Custom Code

When you code your own HTML, add class="title" or class="mc-toc-title" to your HTML tags for any titles you want in the table of contents. For example, you might have tags in your HTML that look like one of the below.

<span class="title">
<h1 class="title">
<h2 class="title">
<div class="title">

Title and mc-toc-title are used interchangeably with H1 and H2 tags. These classes won't work correctly with other heading types.

To control how the table of contents looks, use anchor links to create a table of contents manually.

  1. Navigate to the Design step of the Campaign Builder.
  2. Click an editable text area where you want to add your table of contents.

    Edit content block

  3. Type or paste in the headline text.
  4. In the body of the campaign locate the text you want the table of contents to link to.
  5. Click the Anchor icon in the toolbar.

    Anchor link tool

  6. Name your anchor. Anchor names must not include any spaces or special characters to function properly.

    Name the anchor

  7. Highlight the text in your table of contents and click the Link icon in the toolbar.

    Link table of contents text

  8. In the Insert/Edit Link modal, select the Anchor Link option from the drop-down menu. Then select the anchor name from the Select An Anchor To Link To menu.

    Set the anchor

  9. Click the Insert button to save the link. Repeat these steps to add additional links and anchors to your campaign.

Preview and Test

Once your table of contents has been added, preview and test the campaign to see how it will appear in the final send. To view the preview in the Design step of the Campaign Builder, click the Preview & Test drop-down menu and select Enter Preview Mode.

Campaign Preview with the table of contents created

If the table of contents doesn't appear in the preview or test send when using our *|MC:TOC|* tag, the text you're anchoring to may not be formatted with the correct style. Check the text using the Styles drop-down menu or click the Source < > icon in the edit window to make sure the correct styles have been applied.

Table of contents styles

Troubleshooting

If you import your campaign from a URL, your anchor links may break. When you import your campaign from a URL, we insert a <base> tag into the imported HTML. Normally that's great, since it means you can code the HTML just like you would usually, with relative URLs, images sources, etc. However, the <base> tag removes the ability for anchor tags to work.

If you know that you'll have full URLs in your content, add a blank base tag to your HTML code and we won't override it. Something like <base href=""> will work, since we add the base tag only if one doesn't exist.

Was this article helpful?
What can we do to improve your experience with articles like this?
Thanks for submitting your feedback!
At this time, we are unable to reply to any responses, but we'll use this information to keep the site up-to-date.
Sorry, we were unable to submit your feedback. Please try again later. Thank you for your patience.

Related Articles