Embed Sift on Framer with the Embed component
Framer's Embed component is the cleanest way to drop in third-party scripts. Sift fits naturally into Framer's design-driven workflow, letting you collect rich, AI-extracted form data while maintaining your visual design system.
YOUR_FORM_ID and YOUR_PUBLIC_KEY in the snippets below.Install Sift on Framer
- 1
Open the Framer canvas
Log into Framer and open the project you want to update. Navigate to the page where the widget should appear.
- 2
Insert an Embed layer
From the Insert menu (or press I), search for Embed. Drag the Embed component into your layout where you want the widget.
- 3
Paste the script and publish
Click the Embed layer to open its settings, paste the Sift script into the HTML field, replace placeholders, and publish your site.
<script src="https://siftforms.com/widget/v1.js" data-schema-id="YOUR_FORM_ID" data-api-key="YOUR_PUBLIC_KEY" async ></script>
Alternative install methods
Custom Code (site-wide)
In Framer's Site Settings → General → Custom Code, paste the snippet into the End of body field. The widget script loads on every page automatically.
Code Component
Framer Pro users can create a React Code Component that wraps the Sift widget — useful if you want to expose properties (like form ID) in the Framer property panel.
Tips for the best results
- Set the Embed layer to fill width for a responsive widget
- Use Framer's design tokens to match the Sift widget's primary colour to your brand
- Combine with Framer animations for a polished entrance effect
- The widget Shadow DOM means Framer's typography styles will not affect it
Troubleshooting
Embed shows blank space in the canvas
Framer canvas does not always render embedded scripts. Use the Preview button or publish to a staging URL to see the widget render.
Widget overflows its container
Set the Embed layer to fill width and auto height in Framer's properties panel. The widget will resize to match its container.
Embed Sift on other platforms
Webflow
Add the Sift widget to any Webflow page using the built-in Embed component, or globally via Project Settings → Custom Code.
React / Next.js
Drop the Sift widget into any React, Next.js, or Vite app using a simple useEffect script-loader pattern. Works with React 17, 18, 19, and Next.js App Router or Pages Router.
Plain HTML
The simplest install: paste a single script tag into any HTML page and the Sift widget renders inline. No build tools, no frameworks, no dependencies.
Ready to embed Sift on Framer?
Create your first form in your dashboard, then come back and paste the snippet above.