No-code embeds

What this is for

No-code embeds are the fastest way to add live functionality to an otherwise static page. The page stays editable in StaticPagesApi, while the hosted service owns submissions, confirmations, scheduling, survey logic, or intake workflow behavior.

Use this path when a trusted third-party tool already solves the interaction and you do not need to build a custom React, Vue, or backend-powered widget.

• Google Forms for simple surveys, signups, questionnaires, or intake forms.
• Typeform or Tally for polished multi-step forms.
• Calendly or another scheduler for booking flows.
• Airtable, HubSpot, CRM forms, payment links, maps, chat widgets, or other services that provide iframe or script embeds.

Add the embed

Create the form or workflow in the hosted service, copy its embed snippet, then paste that snippet into a StaticPagesApi raw HTML target.

• Use a raw_html section when the embed should be the whole section.
• Use a split-pane overlay when StaticPagesApi should own the heading, body copy, and CTA on one side while the embed sits on the other side.
• Use a full-width overlay when the embed needs a large form, scheduling, or app-like area.
• Keep the snippet scoped to one form or tool so future edits are easy to find.

<div class="ratio ratio-4x3">
  <iframe
    src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
    width="100%"
    height="800"
    frameborder="0"
    marginheight="0"
    marginwidth="0">
    Loading...
  </iframe>
</div>

How exports behave

The exported page keeps the iframe or script markup. After publishing to WordPress, Shopify, Rails, S3, or another destination, the browser still loads the live tool from the original hosted service.

StaticPagesApi does not store Google Forms or Typeform submissions in this workflow. The embedded service remains the source of truth for responses, notifications, and follow-up automations.

• Confirm the destination site allows iframe or script embeds from the service domain.
• Check Content Security Policy, theme sanitization, and platform rules before relying on the published destination.
• Test the final published page, not only the StaticPagesApi preview.
• Use the hosted service's privacy, consent, spam protection, and notification settings for submitted data.

When to upgrade to custom components

Move from a no-code embed to a deployed component when the interaction needs custom UI, first-party APIs, versioned code review, analytics control, or tighter integration with your product.

• Use component deploy targets when engineers should update trusted raw_html from CI by deployment key.
• Use standalone interactive components for React, Vue, Svelte, or plain JavaScript widgets.
• Use SPA host overlays when the custom app should own the whole body of a full-width section.
• Keep the no-code embed path for fast experiments, lightweight forms, and tools already managed by marketing or operations.