cancel
Showing results for 
Search instead for 
Did you mean: 
Due to an issue with YouTube, inserting videos in your emails is showing an error. Until they are able to resolve this issue, we recommend using a different video hosting service. We will continue to monitor this outage and update you as we have more information.

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
Occasional Contributor

Really need more help with the Embedded Archive ... what if I can't embed on my page? What if I can only link to? Now what do I do?

CTCT Employee

Hello @SandraC2

 

If you cannot embed the archive onto your page for any reason, you can always use the Short URL for each sent campaign to link to each campaign from anywhere (your website or social media).  Here's some more info on getting the Short URL.

Member

Thank you for these styles.  I really like the line height style and will incorporate it.  With regard to the comment from FrancieK about including the date sent with the email subject line, I would really like to have this too.

CTCT Employee

I am happy to hear that these were helpful, @SharonC273. I will track your request for including the date sent in the archive code. 

 

Thanks for commenting and have a great day! 

Frequent Visitor

We have been a user of the previous archive feature that is no longer being supported by constantcontact.

 

we are trying to embed our "new" archive using the script provided in the password protected, ssl encripted, members only section of our website. However, the archive doesn't seem to be showing up.

 

Is there a known issue around this? Also, because the browsers often "block" scripts like this, we've always had a link for the user to open the archive on it's own page.. Is this feature not available any longer?