Install guide
Add a DreamWidget to React and Next.js
Where it goesComponent
What you needWorks with any React framework.
First, copy your code. In the DreamWidget editor, open Settings and press Copy embed code. It is one iframe and a short script; paste both.
Add a widget to a page
- Render the frameRender the <iframe> from your embed code as JSX in the component where the widget should show (rename style to an object and allowfullscreen to allowFullScreen).
- Load the script onceAdd the snippet's script once, for example with next/script in your layout, or append it in a useEffect.
- DeployBuild and deploy; the widget sizes itself.
A popup, bar or chat buttons on every page
Floating widgets do not need a spot in the layout; they load once per page and float over it.
- Put it in the layoutRender the embed in your root layout for a floating widget on every route.
Worth knowing: Server rendering is fine: the widget draws in the browser inside its own frame.
Check it worked
Open the published page in a private window. The widget draws within a second; if the box is empty, see Checking it worked. Changes you publish in the editor appear on React and Next.js by themselves; you never paste the code again.