FamReynaBrain/projects/emi_subsplash_embeds_2026.md

Date, Tags, Source

Date	Tags	Source
2026-07-13	emi subsplash embeds giving live-stream app-promo csp	User provided Subsplash embed codes

Subsplash Embeds — EMI Hub Integration

Embeds Provided (3)

1. Upcoming Live Stream — d/*next-live

<div class="sap-embed-player"><iframe src="https://subsplash.com/u/emmint/media/embed/d/*next-live"frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-read; clipboard-write"></iframe></div><style type="text/css">div.sap-embed-player{position:relative;width:100%;height:0;padding-top:56.25%;}div.sap-embed-player>iframe{position:absolute;top:0;left:0;width:100%;height:100%;}</style>

• Uses responsive 56.25% (16:9) padding-top technique
• Src https://subsplash.com/u/emmint/media/embed/d/*next-live — wildcard next-live resolved by Subsplash to next upcoming live
• Works with florida.emmint.com custom domain? Florida uses storage1.snappages.site/G2XZK8 but Subsplash universal u/emmint should work for global

2. Giving — u/-G2XZK8/give

Original provided:

<script id="subsplash-embed-p4y7" type="text/javascript">
        var target = document.getElementById("subsplash-embed-p4y7");
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.onload = function() {
          subsplashEmbed(
            "u/-G2XZK8/give?&embed=true",
            "https://subsplash.com/",
            "subsplash-embed-p4y7"
          );
        };
        script.src = "https://dashboard.static.subsplash.com/production/web-client/external/embed-1.1.0.js";
        target.parentElement.insertBefore(script, target);
      </script>

• Embed ID subsplash-embed-p4y7 — note duplicated with App Promo below — needs distinct IDs to avoid collision
• Uses external embed-1.1.0.js loader pattern: create script element, onload call subsplashEmbed(channel, base, id)
• Channel u/-G2XZK8/give?&embed=true — -G2XZK8 is Florida? Actually Florida media library uses G2XZK8 asset path, but this is global emmint Subsplash? Likely global giving — need confirm global vs Florida giving separate?
• Base https://subsplash.com/
• This embed will inject iframe for giving form recurring + one-time + ACH + Apple Pay etc

3. App Promo — +p4y7/ap — redo better

Original:

<script id="subsplash-embed-p4y7" type="text/javascript">var target = document.getElementById("subsplash-embed-p4y7");var script = document.createElement("script");script.type = "text/javascript";script.onload = function() {subsplashEmbed("+p4y7/ap","https://subsplash.com/","subsplash-embed-p4y7");};script.src = "https://dashboard.static.subsplash.com/production/web-client/external/embed-1.1.0.js";target.parentElement.insertBefore(script, target);</script>

• Same id subsplash-embed-p4y7 duplicated — both Giving and App Promo use same id — will break second embed if both on same page (getElementById returns first, second script tag same id invalid HTML)
• Channel +p4y7/ap — Subsplash app promo channel? + indicates short link? p4y7 likely corresponds to EMI app code
• Should be subsplash-embed-app distinct id
• "let's redo our implementation of this better" — per user — means current app promo implementation on WP maybe poor, needs better design (VOUS editorial style, not generic box)

Fixes Applied for Integration

• Use distinct IDs: subsplash-embed-give for Giving, subsplash-embed-app for App Promo, keep live as iframe class sap-embed-player
• Avoid id collision by renaming
• For both script embeds, ensure script src https://dashboard.static.subsplash.com/production/web-client/external/embed-1.1.0.js — needs CSP allow script-src https://dashboard.static.subsplash.com https://subsplash.com plus frame-src https://subsplash.com
• Instatic publisher CSP currently script-src none — will block inline scripts — need to allow these specific scripts via site_apply_css? Actually Instatic publisher blocks script via CSP header meta? Need to check: Instatic published artefacts add CSP script-src none by default for security (Layer A). Subsplash embeds require script execution — so need to either:
  • Allow via publishing as raw HTML file in /app/uploads/published/current/ which may have CSP none — but then scripts blocked
  • Solution: Instatic has way to allow external scripts? Need to use site_apply_css? No, need check CSP config in Instatic site settings or add meta to allow — or host embeds as iframes only (Live already iframe, Giving can be iframe alternative? Subsplash give also has iframe URL: https://subsplash.com/u/-G2XZK8/give could be embedded via iframe instead of script loader)
  • Alternative iframe for Giving: <iframe src="https://subsplash.com/u/-G2XZK8/give?embed=true" ...> — test
• For now, publish as artefact with CSP meta override? Instatic may strip? But we control artefact directly writing to /app/uploads/published/current/ so we can set CSP meta ourselves to allow these domains

Integration into EMI Hub Sections

• / main already has Give placeholder with link to https://www.emmint.com/give/ + https://florida.emmint.com/give — now replace with real Giving embed
• / main Media Hub has Subsplash media embed placeholder — now replace Latest Sermon with d/*next-live for upcoming live, plus add App Promo better implementation below media
• Also need new subpage /give/ dedicated giving page with Giving embed + transparency + Books Shop link
• /live/ or /watch/ subpage with Upcoming Live Stream embed + past sermons + YouTube Walking Voice Media

Related Brain Docs

• emi_publication_roadmap_2026 — Give section P0, Media Hub P0
• emi_immich_resource_2026 — office.reynafamily.com 43 albums
• emi_books_inventory_2026 — 12 books Amazon enriched 25KB /books/
• emi_portfolio_data_collection_2026 — 22 locals expanded
• emi_local_ministries_draft_2026 — locals filter implementation

Implementation Steps

1. Save these embeds to brain — this doc
2. Update main index.html artefact to use real embeds with fixed ids
3. Create dedicated /give/ subpage with Giving embed + transparency
4. Create /watch/ or /live/ subpage with Next Live embed
5. Redo App Promo better — not generic box — editorial VOUS style with phone mockup + QR + App Store badges
6. Check CSP — if blocked, fallback to iframe version for Giving
7. Test on laptop http://192.168.68.110:3005/ sections