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.
- This article tells you how to add a table of contents to an email with a merge tag in the classic builder. This merge tag only works in the classic builder. For more information on each email builder, check out About Mailchimp’s Email Builders.
- 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.
- In the Content section of the Campaign Builder, click Edit Design.
- On the Design step, click the Text content block that contains the heading you want to include in your table of contents.
- 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.
- 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.
- Click Save & Close.
- 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.
- In the Content section of the Campaign Builder, click Design Email.
- Click the text area where you'd like to add your table of contents.
- Click the Merge Tags drop-down menu and choose Table of Contents.
- 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.
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.
|<span class="title">||<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" >
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.
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 >