EMBED · DEVELOPER GUIDE

Embed your photo wall anywhere.

Drop a live Fotowall on your event homepage, a sponsor strip in your header, or a recap gallery into your blog post. One <iframe> tag. Auto-resize, themed, framework-agnostic.

Open the builder Read the 60-second start
  • First paint < 1s on 3G
  • < 15 kB embed surface
  • Zero cookies by default
  • postMessage auto-resize
WHY EMBED

Meet your guests on the site they're already on.

  • Drive engagement

    The wall on your event homepage gives every visitor a reason to scroll, refresh, and share. Live content keeps people coming back.

  • Integrate with venues

    Venue and partner sites can embed your wall to showcase ongoing energy without you handing over admin access.

  • Bank social proof

    Last year's photo wall on this year's signup page is the most honest testimonial you can show.

  • Brand consistency

    Themes inherit your event's colour palette. Or override with one query parameter to match your existing brand.

QUICKSTART

Sixty seconds, one iframe.

Replace spring-gala-2026 with your event ID and paste this anywhere that accepts raw HTML. 

<iframe
  src="https://freedomgrc-photowall.web.app/embed.html?event=spring-gala-2026&type=wall&theme=auto"
  width="100%" height="640" style="border:0; max-width:100%"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  title="Live photo wall"></iframe>

Don't know your event ID? Open the visual builder — it pre-fills the snippet for you.

THREE FLAVOURS

Pick the surface that fits the page.

WALL

Live wall

Mosaic of the latest 12-20 photos, updating in real time as guests upload.

Fits: Event homepage hero, "happening now" sections, sponsor pages.
TICKER

Ticker

Horizontal scrolling strip of the latest photos. Low-height banner format that pauses on hover.

Fits: Sticky headers, sponsor strips, full-width section breaks.
GALLERY

Gallery preview

Masonry grid of approved photos. Perfect for the recap page after the event ends.

Fits: Post-event recap pages, archive sections, photo highlights.
CUSTOMIZATION

Every option is a URL parameter.

No client-side configuration object. No SDK to install. Just append query params.

Parameter Type Values Description
event required string Your Fotowall event ID. Find it in the admin dashboard URL.
type string wall | ticker | gallery Which embed flavor to render. Defaults to wall.
theme string auto | light | dark Color scheme. auto follows the visitor's system setting.
accent string #hex (no #) Custom accent colour. Overrides the event template.
limit number 1-60 How many photos to render. Defaults vary per type.
captions boolean 1 / 0 Show the uploader name overlay.
hearts boolean 1 / 0 Show heart counts inside captions.
autoresize boolean 1 / 0 Emit postMessage events so parent can auto-fit height.
live boolean 1 / 0 Subscribe to Firestore for real-time updates.
branded boolean 1 / 0 Apply colours from the event template (gala/wedding/etc.).
footer boolean 1 / 0 "Powered by Fotowall" badge. Required on Free plan.
galleryUrl string URL Override the "view full gallery" link.
AUTO-RESIZE

Buttery height changes via postMessage.

Drop in this snippet anywhere the iframe lives. ~700 bytes minified. 

<div id="fotowall-host" style="max-width:640px; margin:0 auto"></div>
<script>
(function(){
  var host = document.getElementById('fotowall-host');
  var f = document.createElement('iframe');
  f.src = 'https://freedomgrc-photowall.web.app/embed.html?event=spring-gala-2026&type=wall';
  f.style.cssText = 'width:100%; border:0; display:block; height:640px';
  f.loading = 'lazy';
  f.referrerPolicy = 'strict-origin-when-cross-origin';
  host.appendChild(f);
  window.addEventListener('message', function(e){
    var d = e.data;
    if (!d || d.source !== 'fotowall-embed') return;
    if (d.type === 'resize' && typeof d.height === 'number'){
      f.style.height = d.height + 'px';
    }
  });
})();
</script>

Message reference

Type Direction Payload (alongside source: 'fotowall-embed')
ready embed → parent { event, embedType, height }
resize embed → parent { height }
photo embed → parent { id, url, name, hearts }
navigate embed → parent { href }
error embed → parent { reason }
theme parent → embed { value: "light" | "dark" | "auto" }
refresh parent → embed {}
PLATFORM GUIDES

Step-by-step for the usual suspects.

WordPress

Use a Custom HTML block, then paste the iframe. A native plugin with a [fotowall] shortcode is on the roadmap; meanwhile the iframe works everywhere.

Squarespace

Add a Code block — not the embed block. Turn off "Display source" and paste the responsive snippet.

Wix

Add an HTML iframe element, choose Custom code, and paste. Match the element dimensions to your iframe size.

Webflow

Drop an Embed element onto the canvas, paste, and publish. Auto-resize works without further setup.

Custom HTML

Anywhere you can paste an <iframe> tag. Add the auto-resize script for buttery height changes.

PRICING

Embeds are on every plan.

  • Essential

    All three embed types. "Powered by Fotowall" badge stays on.

  • Signature

    Remove the badge. Branded accent. Embed analytics.

  • Premier & Enterprise

    Domain whitelisting. SSO-protected embeds. Multi-event embed dashboards.

See full pricing
FAQ

Questions we get every week.

Does the embed slow down my site?

No. The embed surface is a single sub-15kB HTML file. Firebase is loaded lazily after first paint. The iframe also lazy-loads its image content. On a 3G connection, the placeholder skeleton appears in under a second.

Will the embed work if my visitors don't allow third-party cookies?

Yes. The embed sets zero cookies and writes nothing to localStorage by default. It reads photos from Firestore over a public read-only query.

Can I restrict which sites can embed my wall?

Domain whitelisting ships on the Pro tier. Until then, the embed will render on any origin so you can iterate freely during event setup.

How do new photos appear?

When the live option is on (the default), the embed subscribes to Firestore. New approved photos animate in as your moderators clear them.

What if I have a gallery password set?

The embed never prompts for a password — it would be a confusing experience inside someone else's site. If your event uses gallery password protection, the gallery embed type returns a friendly "private" notice. The live wall and ticker continue to work.

Can I remove the "Powered by Fotowall" badge?

On Signature and up the badge can be hidden via the footer=0 query parameter. On the Free plan the badge stays visible.

How do I customise the look beyond the presets?

For most events the accent colour and theme parameters are enough. For deeper customisation, wrap the iframe in a styled container, or use the postMessage protocol to react to events from the parent page.

START_EMBEDDING

One iframe stands between you and a live wall on your homepage.

Open the visual builder, pick a type, copy the snippet, paste. Done.

Open the builder Start your event