For the buyer
Buyer’s guide
This template is a two-day conference site with a CMS behind it. Change the content in the CMS collections, set two dates, replace the placeholders, publish.
What each collection does
Settings: one record. Brand name, dates, venue, tagline, marquee, notice bar, contact addresses, phase override. Every page reads from it.
Tracks: four records. Name, one-line description, colour token key. Sessions reference a track by name.
Speakers: sixteen records. Name, role, company, bio, topics, website, social handle, portrait, featured flag.
Sessions: twenty-four records. Title, abstract, start and end (with timezone offset), day, track, room, type, speakers, level, recording URL, slides URL, featured flag.
Tiers: three records. Name, price, availability window, sold-out flag, recommended flag, four bullets, ticket URL.
Sponsors: twelve records. Name, tier, URL, wordmark.
Editions: three records. Year, city, venue, tagline, attendee count, two recap paragraphs, three highlight captions.
News: four records. Title, excerpt, three-paragraph body, date, category.
FAQ: eight records. Category, question, answer.
The three phases and the override
BEFORE: now is earlier than eventStart. The hero sells tickets, the tickets section shows tier states, the recordings page shows the waiting copy.
DURING: now is between eventStart and eventEnd. The hero shows the running session and the next one, the agenda highlights Now and Up next, the livestream button appears.
AFTER: now is later than eventEnd. The hero points at recordings, the tickets page shows Register interest for 2027, the notice bar hides unless you keep it on.
phaseOverride in Settings: Auto uses the clock. Before, During or After forces a phase so you can preview and screenshot each state.
How to set dates
eventStart is when doors open on day one. eventEnd is when the building closes on day two. Both with the timezone offset.
Lisbon is UTC+0 in November and UTC+1 from late March to late October. The CFP deadline in September carries +01:00. Event dates carry +00:00. Change both if you move city or season.
Every session has its own start and end. Sessions in the same room must not overlap. The agenda sorts by start time.
Tier windows: availableFrom and availableTo drive Upcoming, On sale, Ends in N days and Ended. soldOut overrides all four.
Components and their props
EventClock: eventStart, eventEnd, timezone, phaseOverride, labels for each phase. Renders the countdown before, the running-session line during, the closing line after.
AgendaFilter: sessions, tracks, rooms, days, emptyState text. Filters client-side, no page reload, keeps the choice in the URL.
DayLink: day (‘Day 1’ or ‘Day 2’), label, activeColour. Scrolls to that day’s first session and marks the current day during the event.
AddToCalendar: title, start, end, timezone, location, description. Produces an .ics download and Google and Outlook links.
LazyVideo: src, poster, autoplay (boolean), loop (boolean). Loads the video only when it enters the viewport; shows the poster until then.
Replace the placeholders
Orbena is the event name. Search the whole project and replace it once.
Every email is at a .example domain. Replace hello@, conduct@, tickets., live., recordings., slides. with your own.
Phone +351 000 000 000 and handle @yourhandle are visible placeholders. Replace them or hide the fields.
Speaker portraits are stock photographs of real people, used for layout only. Replace every one with your actual speakers before publishing. Do not ship the stock portraits with speaker names attached.
Sponsor wordmarks are generated placeholders. Replace with the real logos.
The street address Rua do Cais 00 is a placeholder form. Replace it and the map link.
Forms
The Speak, Contact, Sponsor and Newsletter forms post to the action URL you set and then redirect to the Thank you page.
Set the action in each form’s settings. The newsletterAction field in Settings holds the newsletter one.
Nothing is stored in the site itself.
The components, exactly
EventClock. One code component, eight modes, all reading Event Start, Event End, Timezone and Phase Override from Settings. Modes: Phase Link (a button whose label and link change with the phase), Countdown (days, hours, minutes to Event Start), Session (the marker inside every agenda row: Live, Up next in N min, Ended, plus the row’s day, track, type and level for the filter), Tier (price in the Settings currency, Upcoming, On sale, Ends in N days, Ended, Sold out, the buy button and the stamp), CFP (open until, closes in N days, closed), Gate (shows or hides the layer whose name you type, in the phases you pick), Live Dot, Phase Text.
Gate is how the site changes shape. Put a Gate inside a layer, type that layer’s name in ‘Layer to show or hide’, pick the phases. The hero has three gated blocks named Hero Before, Hero During, Hero After. Do not rename a gated layer without updating its Gate.
Phase Override in Settings: Auto uses the real clock. Before, During and After simulate a moment inside that phase so every instance agrees: During is Day 1 at 11:20, After is the day after the event.
AgendaFilter. Mode Controller once above the Agenda List (counts, empty state, Clear, URL state ?day=&track=&type=&level=). Mode Chip for every button: kind (day, track, type, level), label, value. An empty value means ‘all’ for that kind. Chips inside the Tracks list bind label, value and rail colour to the track.
The agenda row must be named Session Row and the list Agenda List. The Session marker inside the row uses those names to mark and reorder rows. Keep them.
DayLink. Mode Link opens /agenda?day=… or ?track=…; mode Anchor drops an id for in-page jumps.
AddToCalendar. Builds the .ics on the phone from Title, Start, End, Room, the venue name and address from Settings. Mode Whole day uses Day start and Day end.
LazyVideo. Poster first, video only within 800 px of the viewport and never on a phone. Two posters: desktop and phone. Video ≤ 1.2 MB, palindrome loop, MP4.
LazyImage. A CMS image that loads lazily and at the size it is shown: set Displayed size to the frame’s pixel size and it asks for the smallest rendition that covers it at 2×. Used for the 28 px speaker avatars in every agenda row (874 KB became 319 KB). Keep Framer’s own fill for heroes and portraits above the fold.
Things only you can do in Framer
Site Settings, General: set the language to English (or yours). The published HTML has no lang attribute until you do.
Every form: open the form settings, set the notification email and Redirect to /thank-you. There are six forms: newsletter (footer), contact, call for speakers, 2027 interest (Speak, closed state), become a sponsor, register interest (Tickets, after the event).
Replace the sponsor wordmarks, the speaker portraits (stock photos of real people) and the hero loop with yours. Keep the poster under 250 KB.
The DARK alternate: swap paper and ink tokens (paper #0F0F0F, ink #F6F4EF, line #2A2A2A, muted #A9A6A0) and keep accent. Tokens carry the whole site; nothing has a raw colour.