All docs

Embed

Third-party service embed component. Translates a service slug + URL into the right embed code (iframe, script, or HTML). Falls back to raw HTML/iframe via service: "custom".

Third-party service embed component. Translates a service slug + URL into the right embed code (iframe, script, or HTML). Falls back to raw HTML/iframe via service: "custom".

Key files

Supported services

Booking — calendly, cal. Payments — stripe, gumroad, kofi. Forms — typeform, tally, jotform. Newsletters — mailchimp, convertkit, beehiiv. Audio — spotify, soundcloud, podcast (Apple Podcasts). Social — instagram, twitter (X), tiktok. Chat — crisp, intercom, tidio. Calendar — googleCalendar. Other — custom.

Props

PropNotes
serviceSlug (see above). Drives transformation of url → embed markup.
urlThe user-facing URL (Calendly link, Spotify track URL, …). The component parses what it needs from this.
codeUsed when service: "custom" — raw HTML/iframe/script.
className, rootStandard.

When to use (vs alternatives)

  • Embed — first choice for any third-party widget. Handles ID extraction, sandbox attrs, loading, and theme.
  • ROOT.props.inject.head/footer — site-wide third-party scripts (analytics, chat widgets that need global mounting).
  • For platform-branded podcast players, Embed spotify/soundcloud/podcast is preferred over Audio.

Gotchas

  • Different services need different URL shapes. The component normalizes; users still need to paste the embed-friendly URL where applicable.
  • Sandbox attributes are restrictive — chat widgets that need top access may need inject rather than Embed.

Related