Resize embedded voter guides
Keep an embedded Branch voter guide synchronized with the height of its content.
An embedded voter guide changes height as a voter moves between address lookup, ballot, district, and candidate views. Configure the page that hosts the iframe to receive those height changes so the full guide remains visible without an inner scrollbar or excessive empty space.
Use one of the following options. Do not install both on the same embed.
Option 1: NPR Sidechain
NPR Sidechain is a small library for responsive iframes. Follow its installation and host-page documentation, and configure the host element with the sentinel voterguideos-sidechain.
The embedded voter guide is already registered as a Sidechain guest and sends its current height to a compatible Sidechain host.
Option 2: Pre-built resize listener
If you do not want to add a dependency, place the following script on the host page.
The iframe must use the voterguideos ID because the listener uses that ID to find it.
<iframe .../> (get this from https://platform.branch.vote/settings/embed)
<script>
(() => {
const CHANNEL = 'voterguideos:embed:v1';
const iframe = document.getElementById('voterguideos');
const iframeOrigin = new URL(iframe.src, window.location.href).origin;
function initializeIframe() {
iframe.contentWindow?.postMessage(
{
channel: CHANNEL,
type: 'init'
},
iframeOrigin
);
}
window.addEventListener('message', (event) => {
// Both checks are important.
if (event.source !== iframe.contentWindow) return;
if (event.origin !== iframeOrigin) return;
const message = event.data;
if (message?.channel !== CHANNEL) return;
if (message.type === 'ready') {
initializeIframe();
return;
}
if (
message.type === 'resize' &&
Number.isFinite(message.height) &&
message.height > 0 &&
message.height < 100000
) {
iframe.style.height = `${Math.ceil(message.height)}px`;
}
});
iframe.addEventListener('load', initializeIframe);
// Covers cases where the iframe loaded before this script ran.
initializeIframe();
})();
</script>The listener verifies both the sending window and its origin before accepting a resize message. Keep both checks if you adapt the code.
The initial 1100px height prevents a collapsed iframe before the first measurement arrives. After the initialization handshake, the voter guide reports its height whenever its content, viewport, or web fonts change.