Standalone interactive components

When to use this workflow

Use standalone interactive components when your team needs behavior that should be built, tested, and deployed like app code instead of edited as native page copy.

Good examples include React or Vue widgets, custom forms, calculators, booking flows, product demos, checkout-adjacent experiences, and third-party app mounts.

• Keep marketing copy, headings, body text, and CTAs in native section fields when they should stay editable.
• Put functional component mounts in section raw_html or raw_html rows, and mix supporting text, cards, images, testimonials, collapsibles, split content, or Liquid-template rows into the ordered stack as needed.
• Use the overlay section background color or background image to visually integrate the component with the page.

Build and compile the component

Build the component in your normal frontend toolchain, then compile it into static assets that can run on the receiving site.

• Bundle JavaScript and CSS with stable filenames or versioned asset URLs.
• Scope CSS to a component wrapper such as #lead-form-widget or .pricing-calculator-widget.
• Make the mount HTML small: usually one container div plus script and stylesheet tags.
• Load assets from a public CDN, S3 bucket, app asset host, or the receiving platform's theme/app assets.

<div id="lead-form-widget-{{ deployment_instance_id }}" data-source="static-pages-api"></div>
<link rel="stylesheet" href="https://cdn.example.com/widgets/lead-form.v1.css">
<script defer src="https://cdn.example.com/widgets/lead-form.v1.js"></script>

Choose the overlay section

Use overlay with overlay_layout split_pane when the component should sit beside native section content. Use overlay with overlay_layout full_width when the component needs the whole content area, and set full_width_content_position to spa_host when a React/Vue app should own the entire section body.

• For overlay_layout split_pane, set overlay_content_position to leading or trailing; the compiled fragment renders in the opposite pane.
• Legacy overlays with raw HTML rows in both panes continue rendering in row mode with row_group leading and row_group trailing.
• For overlay_layout full_width, use full_width_content_position to place native section content above or below the widget, choose none to hide native content, or choose spa_host when section raw_html should own the full section.

Choose the fragment source

Overlay sections can deploy raw_html directly to the section or render an ordered mixed child-row stack.

• Set overlay_fragment_source to section and attach the deployment key directly to the section for the simplest workflow.
• Set overlay_fragment_source to row to mix built-in, Liquid-template, and raw_html child rows; split overlays stack them opposite overlay_content_position and full-width overlays stack row_group main.
• SPA host mode always deploys directly to section raw_html.
• Switching source preserves inactive raw_html content but removes the inactive source's deployment target so it stops consuming quota and receiving deployments.
• Changing overlay_content_position in row mode moves the complete row stack to the opposite pane when the section is saved.
• Use row order to control the top-to-bottom stack. Raw HTML-capable rows may each have their own deployment key.

Publish and test

After the page exports to WordPress, Shopify, the Rails engine, or another receiver, test the component in the destination site, not only inside StaticPagesApi.

• Confirm the compiled asset URLs are reachable from the public browser.
• Confirm form submissions, API calls, and CORS rules work from the destination domain.
• For body-only exports, make sure the destination site loads any required global CSS or JavaScript.
• Keep the raw_html snippet versioned so you can roll back a component by reverting the asset URL.