← Demo home

How the widget embeds on WordPress

What runs on WordPress, what is embedded, and the embed code.

The three layers

WordPress
tryfortomorrow.org
  • Facilitator login
  • Real student names
  • Cohort / group / session pages
  • Embeds the widget + hands it a student
→
Pledge widget
GitHub Pages · public_widget/
  • The question, options & counter
  • Captures the pledge
  • Name-blind — only a p_… ref
  • Writes straight to Firebase
→
Firebase
Firestore
  • Runs & pledges
  • Session content
  • Counters
  • Never a name

The tool is hosted on Firebase Hosting (rtf-tft.web.app). The facilitator/ folder stands in for WordPress in this demo.

On WordPress or Wix

The tools are linked to, not embedded. Put a button on the WordPress page that opens the facilitator portal in its own tab. The tool keeps its own sign-in; the hosting stops other sites framing it, which protects that sign-in.

<a href="https://rtf-tft.web.app/facilitator/" target="_blank" rel="noopener">Facilitator sign in</a>

The pledge counter can be embedded anywhere. It's public (no sign-in) and shows only the programme-wide totals, live. WordPress: paste into a Custom HTML block.

<div data-tft-tool="counter"></div>
<script src="https://rtf-tft.web.app/tft-embed.js" async></script>
<!-- options: data-tft-theme="dark" · data-tft-detail="1" (per-session) · data-tft-bg="transparent" -->

Wix (HTML embed) or anywhere scripts aren’t allowed: a plain iframe.

<iframe src="https://rtf-tft.web.app/counter.html" title="Try for Tomorrow pledges" style="width:100%;height:240px;border:0"></iframe>

See the counter →

What a WordPress page with the widget looks like

⊞ WordPress Edit Page Howdy, Alex ▾
Session 1 · Greenhouse Gases & Climate Change

Make your pledge

Everything outside the dashed box is the WordPress page. The box is the embedded widget.

Embedded widget
rtfgit.github.io/TFT/pledge-widget.html?provider=demo-college&session=1&run=embed-demo&cohort=demo
WordPress (this page)
Embedded widget (GitHub Pages)

Live messages between the page and the widget

Messages between this page and the widget (postMessage):

Waiting for the widget…

The embed code

1. Add the iframe to the WordPress page:

<iframe id="tft-pledge"
  src="https://rtfgit.github.io/TFT/pledge-widget.html?provider=demo-college&session=3&run=abc123&cohort=year-9-rugby"
  title="Try for Tomorrow pledge" style="width:100%;border:0"></iframe>

2. Send it each student (the name is shown, never stored):

// WordPress knows the names; the widget only ever gets the pseudonymous ref.
frame.contentWindow.postMessage({
  type: 'TFT_SET_STUDENT',
  student_ref: 'p_a7f3c21b',   // stored
  display_name: 'Jack S.'       // shown only, never persisted
}, 'https://rtfgit.github.io');

// messages the widget posts back:
//   TFT_WIDGET_READY · TFT_PLEDGE_SAVED · TFT_STUDENT_SKIPPED · TFT_READY_FOR_NEXT · TFT_HEIGHT
// and one more the page may send:  TFT_ALL_DONE  (everyone has had a turn)

What deploys where

GitHub Pages (the widget)WordPressFirebase
public_widget/ — pledge-widget.html, pledge-widget-app.js, session-config.js, assets/ facilitator login & portal pages · the roster (names) · a plugin for roster REST + run orchestration · the iframe embed runs · pledges (by student_ref) · session content · counters

facilitator/ and wp-emulator.js are demo stand-ins and are not deployed. Full contract: public_widget/IFRAME_INTEGRATION.md.

Building the WordPress side
See WORDPRESS_BUILD.md in the private repository (ask the RTFxRFL team for access).