For your website
Embed the archive
Put “On This Day · Creole Memories” on your own website. Pick a layout, copy one snippet, and the archive’s daily, weekly or monthly memories appear on your page.
Need a key? Every site uses its own free key, bound to your domain. Request one and we'll email it after a quick review.
Request an embed key →Build your snippet below. The live preview uses a demo key — swap in your own key before you publish.
Live preview · sample data from the archive
Copy this into your site
<div data-creole-embed
data-token="YOUR_EMBED_KEY"
data-range="day"
data-layout="card-list"
data-max="6"
data-accent="#7B2D26"
data-month="11"
data-day="20"></div>
<script async src="https://creolememories.org/embed.js"></script>Replace YOUR_EMBED_KEY with your own key — or paste it above and we’ll fill it in.
How it works
- Request a free key. Fill in the short form with your domain — confirm your email, and once we've reviewed it we'll email your key. It's bound to your domain, so it only works on your site, and it's safe to publish in your page source.
- Build your snippet. Choose a layout and range in the builder above, paste your key into the embed key field, then Copy.
- Paste it into your page. Drop the snippet into your HTML where you want the memories to appear — no build step, no library, one script tag.
Options
| Attribute | Values | What it does |
|---|---|---|
data-token | cm_pub_… | Your public embed key (required), bound to your domain. Request one via the form linked above. |
data-range | today · week · month · day | Which memories to show. Default: today. |
data-layout | card-list · calendar · date-grouped · compact · strip · grid · minimal-lead · timeline · headline · ticker | Visual style. Default: card-list. “calendar” shows a big day-number + month beside a thumbnail and description; “date-grouped” titles each day (great for week/month); “headline” is an editorial masthead; “ticker” is a one-line band. |
data-max | 1–24 | Maximum memories to display. Default: 6. |
data-month / data-day | 1–12 / 1–31 | Pin a specific day (use with data-range="day"). |
data-accent | #RRGGBB | Accent colour for year labels and highlights. |
data-header | on · off | The Creole Memories header with the date shown. Off moves the logo to a small footer credit. Default: on (the ticker never has one). |
data-fallback | upcoming · none | When the chosen day, week or month has nothing on record: show what’s coming up next, clearly labelled (upcoming), or a “no memories yet” line (none). Default: upcoming. |
data-api | https://… | Optional — leave it out. The widget fetches from the same domain that serves embed.js. |
data-site | https://… | The public website memory links open to. Defaults to where embed.js is served from; set it only if that differs. |
data-fonts | on · off | Load the archive’s web fonts (Google Fonts). Off = your site’s fonts. Default: on. |
data-target | blank · self | Open memory links in a new tab (blank) or the same tab. Default: blank. |
Match your site’s style
The widget renders in an isolated shadow root, so your page’s CSS can’t break it and its CSS can’t leak out. To restyle it, set any of these CSS variables on the embed element in your own stylesheet:
[data-creole-embed] {
--creole-accent: #1E3D59;
--creole-radius: 12px;
--creole-font: "Georgia", serif;
--creole-max-width: 680px;
}| CSS variable | Controls |
|---|---|
--creole-accent | Accent (year labels, links, timeline dots). |
--creole-bg | Widget background. |
--creole-panel | Raised panels / image placeholders. |
--creole-ink | Primary text. |
--creole-muted | Secondary text (stamps, excerpts). |
--creole-hairline | Borders and dividers. |
--creole-radius | Corner radius. |
--creole-gap | Spacing between items. |
--creole-font | Body font stack. |
--creole-font-display | Heading font stack. |
--creole-mono | Monospace (date stamps). |
--creole-max-width | Maximum widget width. |
Platform notes
- WordPress: add a Custom HTML block and paste the snippet. (On WordPress.com, a plugin-enabled or Business plan is needed to run scripts.)
- Wix / Squarespace: use an Embed / Code block and paste the snippet.
- Plain HTML: paste anywhere in your page body.
- One script tag is enough even with several widgets on a page — add as many
<div data-creole-embed>elements as you like.
Privacy & security
The widget only reads public archive data and sends no cookies. It never executes content from the archive as code — all text is rendered safely — so it’s safe to place on any page. The only external request beyond the archive is to Google Fonts, which you can turn off with data-fonts="off".