cancel
Showing results for 
Search instead for 
Did you mean: 

Embedded Archive: Customizing its Appearance

CTCT Employee

Hi. I am a part of the team that created the Embeddable Archive feature and we are really excited about the product and the opportunity it gives our customers to customize their Archive list to appear directly on their own web pages. Since launching this product, we have had some feedback that our customers would like to customize the appearance of that list, so we are providing a few examples to show how to make a few different appearance customizations.

In all of these examples, please be sure to replace my archive code snippet with your own snippet! Otherwise your site will just be displaying my own archived emails, which you definitely don’t want. (Reminder: I’m referring to the HTML snippet you get when you go to your “My Campaigns” page and click the gear next to “Archived Campaigns”, take a look here if you need some help finding it.)

Basically what these examples are doing are styling the appearance of the Archive list by preceding the html code snippet with a <style></style> section. Please note that these styles might not cooperate with the existing styles on your website, so please closely examine your page to make sure it still looks exactly the way you want after trying out these changes.

 

1. To make your list bulleted, with hollow circles for bullets:

<style>
       #archiveList > ul {
          list-style-type: circle;
          list-style-position: inside;
        }
</style>
<!--Begin CTCT Archive-->
<script id="archiveScript" src="//static.ctctcdn.com/js/archive-static/current/archive-static.min.js"></script> <div id="archiveList" data-archive-count="10" data-m="a07ea78e8ui0"></div>
<!--End CTCT Archive-->

Tip: There are many different bullet types you can use by changing the value of "circle". Choices include "square", "disc" (filled in circle), "decimal" (numbered list).

 

2. To increase line height to create more space between the list items:

<style>
        #archiveList {
          line-height: 2;
        }
</style>
<!--Begin CTCT Archive-->
<script id="archiveScript" src="//static.ctctcdn.com/js/archive-static/current/archive-static.min.js"></script> <div id="archiveList" data-archive-count="10" data-m="a07ea78e8ui0"></div>
<!--End CTCT Archive-->

Tip: Change the value of "line-height" to any number besides 2.

 

3. To change the color of the links to black:

 

<style>
        #archiveList a {
          color: #000000;
        }
      </style>
<!--Begin CTCT Archive-->
<script id="archiveScript" src="//static.ctctcdn.com/js/archive-static/current/archive-static.min.js"></script> <div id="archiveList" data-archive-count="10" data-m="a07ea78e8ui0"></div>
<!--End CTCT Archive-->

Tip: Want a color other than black? Replace the Hex value (#000000) with any color of your choice! More: HTML Color Picker - W3 Schools

 

4. To combine all of the previous three style change (this is just to demonstrate that you can combine multiple stylings as desired):

<style>
        #archiveList {
          line-height: 2;
        }
        #archiveList > ul {
          list-style-type: circle;
          list-style-position: inside;
        }
        #archiveList a {
          color: #000000;
        }
</style>

If you have any questions, feel free to reply in the comments below. You can also post any support questions in our forums here, or send us your feedback about the new archive feature.

Neil_C

Hi, I’m Neil and I’ve been a part of the Constant Contact Product Team since 2014, involved with teams on several products including Autoresponder, MyLibrary, some of our Social offerings, and Embeddable Archive.

46 Comments
CTCT Employee

Hi @Old_Lutheran,

 

Thanks for your feedback! We are actively tracking customer requests for additional options to the archive. Please feel free to post your sorting idea in our feedback area here in the Community. You can also email us directly at social_support(at)constantcontact(dot)com so that we can track this for you. Please include the username for your account, a reference to this post, and the details of your idea. Thanks!

JSeth
Not applicable

At the request of the person who creates the newsletter, I have placed the code into a webpage on our webist, and it displays "News from Eastern Center for Arts and Technology" 12 times. Is there something that she needs to do so that the titles of the items in the archive will reflect something useful, such as the date of the news letter? Is there any coding that I could add which will extract something from the newsletter instead of the "News from Eastern Center for Arts and Technology". Thank you.

CTCT Employee

Hello @JSeth,

 

With the embeddable archive, the links will display with whatever text was used as the subject line. The easiest way to fix this, would be to make copies of those sent emails, change the subject line, and send them to a list with just you in it. After that, you can archive the new emails and post the code on your website. I hope this helps.

All Star

Is there a way to display an archive depending on which Folder you've placed the email in or is it that once you archive an email is it not found in a Folder any longer?  My issue is that I have multiple categories of emails that are sent out and I don't want to just lump them all in one archive.  That just doesn't help our recipients.  Is there a way to categorize the archive so to speak?

CTCT Employee

Hi, @HeatherL7975. Unfortunately there is not currently any way to categorize or segment your archive list when displaying it via the Embeddable Archive feature.