Embed ChurchLinker in your own website or mobile app

When this is for you

Two scenarios. Your church already has a website you love and just wants the events list to render inside it without sending members elsewhere. Or your church already has its own native iOS / Android app and asking members to install a second one would land badly. Embed widgets cover both.

Available surfaces

• Upcoming events

  /embed/events

• Giving

  /embed/give

• Sunday notices

  /embed/notices

• Sermons

  /embed/sermons

Each surface renders the same data staff publish: public events (isPublic + showOnApp), published Sunday notices, public sermons, and giving when Stripe Connect is configured.

Embed in your church website

1. Sign in to ChurchLinker and open Settings → Embed widgets.
2. Add the URL of the site you'll be embedding into to the allowlist (one per line, e.g. https://mychurch.org). Save.
3. Pick a surface and copy the iframe snippet:

<iframe
  src="https://yourchurch.churchlinker.com/embed/events"
  title="Upcoming events"
  loading="lazy"
  style="width:100%;height:560px;border:0;border-radius:12px;"
  allow="payment"
></iframe>

Paste it into any page where you'd like the widget to appear. Height is yours to set; the content inside the iframe scrolls.

Embed inside your existing native app

Render the same URL in a WebView. Snippets for the three most common stacks:

// React Native (Expo or bare)
import { WebView } from 'react-native-webview'

<WebView source={{ uri: 'https://yourchurch.churchlinker.com/embed/events' }} />

// SwiftUI (iOS) — WKWebView
import WebKit
let url = URL(string: "https://yourchurch.churchlinker.com/embed/events")!
let view = WKWebView()
view.load(URLRequest(url: url))

// Android (Kotlin)
val view = WebView(context)
view.settings.javaScriptEnabled = true
view.loadUrl("https://yourchurch.churchlinker.com/embed/events")

WebViews don't need the parent origin to be in the allowlist (they aren't a frame); the CSP rule only matters for browser iframes. The settings page snippet generator includes both for convenience.

Branding the embed

By default each embed uses your church's primary colour. To override per-embed (useful when you want the give button to match a specific page accent), add ?accent=#RRGGBB to the URL. Example: /embed/give?accent=%23047857 (the %23 is just the URL-encoded form of #).

Security model

• Embeds only ever serve public content. Members' private records, draft sermons, unpublished notices, donor names — none of those reach the embed surface.
• Cross-origin framing is enforced by a Content-Security- Policy frame-ancestors directive built from your allowlist. A site that isn't in the allowlist can't frame the page in any modern browser.
• Embedding is off by default — adding the first origin to the allowlist is the explicit opt-in.
• Giving surfaces always hand off to your own connected Stripe account at checkout time; ChurchLinker never touches the funds.

Troubleshooting

• Page won't load inside the iframe. Open the embed URL in a normal tab and check it renders. If it does, the most likely cause is the parent origin not being in the allowlist — recheck the URL exactly (scheme + host, no path) at Settings → Embed widgets.
• Empty list when you know there's content. The embed shows public content only. For events: ensure they're marked Public AND Show on App. For sermons: ensure Public is ticked. For notices: ensure status is PUBLISHED.
• Mobile WebView shows a sign-in page. You've pointed at a member route (/member/something) by mistake. Embed URLs always start with /embed/.