Next.js Form Integration
Drop Riven into your Next.js application without installing heavy SDKs. Works perfectly with the App Router, Server Components, and Client Components.
How to integrate Riven with Next.js
1. Create your form
Build your form in the Riven dashboard and publish it to get your unique form ID.
2. Create the Embed Component
Use the native Next.js/React standard iframe tag. Since Riven forms auto-resize, you can set a minHeight to prevent layout shifts before hydration.
3. Listen for postMessage Events (Optional)
Use a useEffect hook to listen for 'RIVEN_SUBMIT' events to trigger conversions in Next.js.
Implementation Code
Next.js Snippet
// components/RivenEmbed.tsx
"use client"; // Only needed if listening to window events
export function RivenEmbed({ formId }: { formId: string }) {
return (
<iframe
src={`https://rivenforms.in/form/${formId}?embed=true`}
width="100%"
height="460"
loading="lazy"
style={{
border: 0,
borderRadius: "16px",
overflow: "hidden",
width: "100%",
minHeight: "460px",
}}
title="Riven Form"
allowFullScreen
/>
);
}