When you create a campaign in MailChimp, you can set up a table of contents in your design. Adding a table of contents lets you easily link your subscribers to a specific place in the content, making navigation quick and simple. We'll walk you through the two different ways a table of contents can be added to your email.

In this article:

Create a table of contents using our 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 (as long as their email program supports anchor links).

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

    Edit content block

  3. Add the merge tag *|MC:TOC|* directly or select the tag from the Merge Tag drop down in the toolbar.

    Add merge tag

  4. Click the Save & Close button to exit the edit window.

Format your content titles in the editor

  1. Add and highlight the text you want to display in the table of contents.
  2. On the toolbar, choose the Styles drop down option.
  3. From the drop down menu select one of the options for TOC Title or TOC heading styles to be applied to the text.

    Choose the heading style

Format your content titles in your custom code

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


<span class="title">

<h1 class="title">

<h2 class="title">

<div class="title">

The two classes, title and mc-toc-title can be used interchangeably in the same campaign to create one table of contents. Keep in mind that these classes will need to be added to your h1 or h2 tags. Other heading designations such as h3 and h4 will not be pulled into the table of contents using our merge tag.

The *|MC:TOC|* tag will then recognize the text and create the proper anchor.

If you want a bit more control over the appearance of the table of contents you can use anchor links to manually create a list of links.

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

    Edit content block

  3. Create the headline text you want to use for the table of contents.
  4. In the body of the campaign locate the text you want the table of contents to link to.
  5. Click the Anchor button in the content editor toolbar

    Anchor button

  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 button

  8. In the Insert/Edit Link box, 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 and your table of contents is ready to go!

Preview and test

Once your table of contents merge tag has been added, you can preview the campaign by using the Popup Preview or sending a test email to see how it will appear in the final send. To view the preview in the Design step of the Campaign Builder, click on 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 < > button in the edit window to make sure the correct styles have been applied.

Choose a Title or TOC Header style

Troubleshooting

If you are importing your campaign from a URL, it's possible you will see your anchor links breaking. 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 srcs, etc. However, doing that 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 and we won't override it. Something like this: <base href="">. Since we add the base tag only if one doesn't exist, when you set href="", the browser prepends URLs with nothing, which will allow anchors to work.

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