Embedded Archive: Customizing its Appearance

Neil_C
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.

47 Comments
BrettA60
Occasional Participant

This archive functionality is really primitive, to the point of almost being more trouble than it it worth. No way to order the archive list by date sent. No way yo show the date so you can see if things are out of order. The fact that people have been asking for these features since 2016 and essentially nothing has changed is very disappointing.

 

Are there actually any plans to make updates to this feature, or will we just continue to see the same responses about working around the limitations?

 

 

Frankie_P
Moderator

Hi @BrettA60 

 

Thank you for sharing your feedback on our archive feature here in the Community. I apologize there are features you're looking for that are not currently available. While we are always open to ways we can better our user's experience, we do not have a timeline for this particular feature request and there are many factors that are used to decide what is added to our product. Because of this we suggest using the workaround listed in this thread. I apologize for any inconvenience this workaround may cause and have submitted this feature request in your account to our Product Team in the meantime. We also have this section of our Community that helps explain what we do with our customer’s feedback.

BrettA60
Occasional Participant

@Frankie_P

 

Thanks for repeating the same non-answer that has been posted repeatedly for three years now...

 

Based on this it really appears that the only reliable way to get the email archive to show up in the correct order is to manually copy the URL's for each email and embed them individually on a page. And if additional meta data is required, like the date published, then that also has to be manually entered.

 

Pretty obvious that this is a "check box only" attempt. i.e. somebody checked the box that "Of course you can show your archived emails!", but since that box was checked three years ago, there has not been any actual effort in making the feature usable for your customers. Might as well remove the code from your site at this point since there is obviously no intent to actually improve/support it.

 

ShaunKirkland
Participant

I've copied the code into my website and it is pulling Archived emails, only problem is it is not displaying the most recent ones. 

I have checked to make sure recent ones are marked to archive. What could be the issue?

Brigitte_P
Employee

Hey @ShaunKirkland I hope your day is going well!

 

So I took a look within your account, and what is happening here is the archived emails are showing up in the order that they were archived in, not in the chronological order that they appear within the account. Basically the order that the emails will show up in on your website are determined by the order that they were originally archived in on Constant Contact.

 

This can happen if you archived a few emails within a few seconds of each other. Whichever one finishes archiving first will be at the bottom of the archive list. You can avoid this in the future by archiving emails one at a time then making sure the action completes before moving on, should guarantee that they are archived in the right order.

 

Unfortunately un-archiving and re-archiving the emails will not change the order. If the emails are already in the wrong order. However you can fix this by making a sent copy of each affected email, and archiving them one at a time in the desired order.

WandaDaveZ67
Regular Participant

Hi! I'm new to the archived email widget but love the concept. I have it up and running but I would like to group by dates rather than one long list. As travelers, we would like to group newsletters sent from Texas (by dates we were there), New Mexico (by dates we were there) and Utah (by dates we were there). End result would be to have three columns (or more) of archived newsletters on our website rather than one long list. Please advise. Thanks!

Zoe_H
Employee

Hello @WandaDaveZ67,

 

Thank you for sharing your feedback on our archive feature here in the Community. I apologize there are features you're looking for that are not currently available. While we are always open to ways we can better our user's experience, we do not have a timeline for this particular feature request and there are many factors that are used to decide what is added to our product. I apologize for any inconvenience this workaround may cause and have submitted this feature request in your account to our Product Team in the meantime. We also have this section of our Community that helps explain what we do with our customer’s feedback.