lodge

Building blocks for easier, smarter overlays & embeds

Lodge was made for a more decentralized web where anyone can build a space of their own. Platform features let us talk, upload media, place orders, and connect. They're already used by developers via API. Lodge helps extend them into any site as easily as embedding a video.

Built to bring UI consistency to critical workflows, Lodge is a lightweight, open library with no dependencies. It runs on both page and embed, securely synchronizing events and adding a shared overlay for modals, messages, and (coming soon) even a full checkout flow.

Let's take a look.

We set up a quick demo embed to show off the basics and a little more. Just click below for a tour.

Features

Quickly build smart iframes
A universal and responsive overlay
Secure shared events between embed(s) and a main page
Style it with CSS, extend it with JavaScript
Debug mode to help see what's happening
Automatically show videos in the overlay (optional)
Request user input in the overlay

A few basics

Embed iframes are created from simple markup:


                  <embed class="lodge" src="embed.html">

It's all event driven, and Lodge will tell you when it's ready:


                  window.lodge.addEventListener('ready', function(e) {

                      // ...do something 

                  });

Lodge inserts empty utility classes so you can make a page context-responsive — styles for standalone, embed, and embed-in-overlay:

.lodge__embed, .lodge__embed--overlay

Need to see what's happening in real-time as your scripts run? Just add ?debug=true to the main page URL and see console log activity for the main page and embeds.