Add Socialjuice to React or Next.js

Start with your own snippet

Create and save the widget in Website widgets, or copy the collection-form snippet from Collection forms. Preserve every URL, query parameter, space ID, widget ID, and filter. An example ID from another site will display someone else’s content.

Build the component

1. Place the iframe in a component at the intended location. Convert HTML attributes to React equivalents, such as className and allowFullScreen. Give the iframe a descriptive title.
2. Keep browser-only initialization on the client. In Next.js, follow your project’s client-component and Script conventions.
3. If the supplied snippet uses a resize helper, load that external script once. Initialize only after both the helper and target iframe exist.
4. Clean up resize handlers when the component unmounts and avoid duplicate IDs or initialization when navigating between routes.
5. Keep the frame responsive inside its parent. For a collection form, preserve the supplied camera and microphone permissions and use HTTPS.

Verify navigation and mobile

Test the initial page load and navigation away and back. Check that the iframe is not initialized twice and that the page does not scroll horizontally. A collection form should also have a normal open-in-new-tab link for browsers that block embedded recording.

Use Agent embed instructions in the dashboard and choose React / Next.js for a handoff containing the exact snippet. Do not install structured-data scripts inside the iframe; those belong to the host page.