Integrations Log in Get started

Developer Documentation

Embed anywhere in 5 minutes

Add your guided proposals, configurators, or calculators to any website using a simple iframe. No backend required.

1 line

of HTML code

25+

Platforms supported

100%

Mobile responsive

Quick start

Create Public Template

In your dashboard, create a project with type "Public Template" instead of Standard.

Get your project link

Click "Share", copy your project URL, and use the iframe code from the Embed tab.

Paste anywhere

Add the iframe code to your website, store, or app. It works everywhere.

Code examples

<iframe 
  src="https://www.rocketstep.io/your-company/your-project" 
  width="100%" 
  height="800" 
  frameborder="0" 
  loading="lazy"
  title="RocketStep Project"
  style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
</iframe>

Customization options

Sizing

width="100%"

Full container width (recommended)

height="800"

Fixed height (adjust as needed: 600-1200px)

height="100vh"

Full viewport height

Styling

border-radius: 8px

Rounded corners

box-shadow: ...

Elevation effect

max-width: 1200px

Constrain width on large screens

Display options

Configure what appears in the embedded iframe header via Share modal → Embed Display section:

Show logo

Company logo in header

Default: On

Show project name

Template title

Default: On

Show organization name

Your business name

Default: On

Show Interactive badge

Green "Interactive" badge

Default: On

💡 Pro tip: If you're embedding on your own branded website, disable all header elements so visitors focus only on the form itself.

Common use cases

Product configurator

Let customers build custom products with real-time pricing

Service booking flow

Guide clients through service selection, date, add-ons

Quote calculator

Collect project requirements and generate instant quotes

Lead qualification

Pre-qualify leads before sales calls with structured forms

Advanced features

Webhooks (Zapier, Make)

Receive real-time notifications when visitors complete embedded templates. Connect to 5000+ apps.

POSThttps://your-webhook-url.com/complete

{
  "sessionId": "uuid",
  "projectId": "proj_123",
  "selections": {...},
  "completedAt": "2026-02-10T12:00:00Z"
}

Responsive design

Embeds automatically adapt to mobile, tablet, and desktop. Use CSS for container control:

<div style="max-width: 1200px; margin: 0 auto; padding: 20px;">
  <iframe src="..." width="100%" height="800"></iframe>
</div>

Performance

Add loading="lazy" to defer iframe loading until visible. Reduces initial page load.

Cached worldwide: RocketStep uses CDN edge caching for sub-100ms load times globally.

Security & privacy

🔒

Secure access

Projects are secured with internal tokens. Public URLs use clean company/project slugs.

🚦

Rate limiting

60 requests/minute per IP. Prevents abuse and DDoS attacks.

👁️

Read-only

Embeds cannot modify your account, projects, or settings.

⚡

Instant revoke

Disable embed or regenerate token anytime from dashboard.

Need platform-specific help?

View step-by-step guides for Shopify, WooCommerce, Wix, and 22 more platforms.

Browse 25+ integrations

Troubleshooting

Embed shows "refused to connect"

Ensure your project has an embed token generated and embedEnabled is true. Check that you're using the correct token from the dashboard.

Iframe is blank or loading forever

Check browser console for CSP errors. Ensure your page allows iframe embedding. Some platforms block external iframes by default.

Content is cut off

Increase the height attribute (try 1000px or 1200px). For dynamic height, use JavaScript to listen to postMessage events from the iframe.

Logos not showing in embed

Go to Share modal → Embed Display and toggle "Show logo" and other header elements. They may be hidden intentionally.

Can I customize colors?

Brand colors are set per-organization in Admin → Organization Settings. The embed automatically uses your brand colors.

Does it work on mobile?

Yes. RocketStep embeds are fully responsive and work on all device sizes. Test on various screen widths to ensure your container is also responsive.

Best practices

Test before deploying

Preview the embed on a staging site or localhost first to ensure sizing and behavior match expectations.

Set appropriate height

Start with 800px and adjust based on your template's section count. Longer flows need 1000-1200px.

Use lazy loading

Add loading="lazy" to defer iframe loading until scrolled into view. Improves page speed.

Monitor completions

Check "timesCompleted" counter in dashboard to track how many visitors use your embed.

Ready to embed?

Create your first Public Template and get your embed code in 2 minutes.

Get started free View live demo