TRPL Digital Invite — Embed Builder

Brand combination

Approved pairings from the TRPL Brand Identity System. Pick one, then fine-tune below — every colour picker is loaded with the brand palette.

Invitation & RSVP

Invitation card image URL Portrait artwork works best (5:7 or 2:3). Must be publicly reachable — upload it to this repo or the DAM and paste the full https:// URL. Card alt text RSVP link RSVP button text Open RSVP link in

Email campaign

Fills the Constant Contact template on the Email tab. The email shows a sealed envelope addressed to each guest and links through to the animated invitation. Page holding the invitation Where you pasted the embed code. The email appends ?name= so the envelope arrives hand-addressed. Event name Opening line When Where Button label Name carried in the link A full name needs a space, which becomes %20. If Constant Contact re-encodes that when it wraps the link for tracking, the envelope can read Matt%20Briney or the link can fail outright. A first name has no space and cannot break that way. Where the email images are hosted Email clients need absolute URLs. Leave this unless the assets move.

Event details panel

Optional. On a wide screen the invitation steps left and this panel slides out beside it; on a phone a button turns the card over to show it. Long copy scrolls inside the panel. Headings use Dharma Gothic, body copy ITC Clearface — the editor previews both.

Panel background Slide out after (ms) Measured from the moment the invitation settles. Button label (phones) Close label (phones)

Recipient name

Query-string parameter Read from the page URL, e.g. ?name=Jane%20Doe. Append it to each recipient's link in a mail merge and their name is lettered onto the envelope. Fallback name Shown when no name is in the URL. The name is set in ITC Clearface, the brand's body face — change it under Brand fonts if you need something else.

Pick the ink automatically (recommended)

Postmark text

Brand fonts

Adobe Fonts kit URL Dharma Gothic E, ITC Clearface and Frutiger Next are licensed, so they can't be bundled here. Paste the Library's Adobe Fonts kit URL (the same one trlibrary.com loads) and the embed renders the real faces. Leave it blank and the fallbacks below stand in. Display font — buttons, labels, postmark Dharma Gothic E, all caps, calls to action and titling only. Oswald stands in. Body font — prompt copy ITC Clearface for body copy. Georgia stands in.

Background

Background colour Background image URL (optional) A Badlands photograph works well. Sits above the colour. Background fit

Soft vignette (turn off on light backgrounds)

Envelope

Envelope paper colour Envelope liner colour Flap shape Envelope shape (width ÷ height) 1.38 = a standard A7 envelope, 7¼ × 5¼ landscape. 0.72 gives a portrait one. Envelope size

Stamp & brand seal

Elkhorn brand seal colour (back flap) The brand mark is bundled with the embed and recoloured live — nothing to upload. Perforation depth Depth of one tooth on the stamp's torn edge. auto scales with the stamp; or set a value like 5px. Seal size Postage stamp paper

Buttons & behaviour

Prompt text Button colour

Show replay button (lower left)

Auto-open after (ms) 0 waits for a click. 2500 opens on its own after a moment. Frame height Automatic keeps a portrait shape in a narrow column and caps at the height below once the embed runs full width. Maximum height (automatic only) Maximum width 100% fills the container. Set a px value to keep it narrower. Background corner radius

Live preview

Embed code

Name this invitation (used for the filename)

Download everything saves a zip containing a playable preview, the embed snippet, the Constant Contact email, the email images and a README — everything the web team or your email person needs. Copy share link gives a URL that reopens this builder with every setting already filled in.

Paste the snippet wherever the invitation should appear. Append ?name=Jane%20Doe to the page URL sent to each guest and their name is hand-lettered onto the envelope. The embed loads its own styles in a shadow root, so it will neither inherit nor disturb the host page's CSS.