FamReynaBrain/projects/emi_subsplash_embeds_2026.md

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

# Subsplash Embeds — EMI Hub Integration

## Embeds Provided (3)

### 1. Upcoming Live Stream — `d/*next-live`
```html
<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:
```html
<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:
```html
<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