Examples
Pick the implementation that matches your site, then copy the tested Rooster snippets.
Choose a Client
Use these examples when you control the website code. Each page shows analytics-only installation, collecting every form, collecting one form group, and a staged form that saves partial progress before the final submission.
Plain HTMLScript tagsStatic sites, server-rendered templates, and pages where you can edit HTML directly.
Next.js App RouterReactInstall analytics in app/layout.tsx and form collection on the route that owns the form.
React SPAViteLoad scripts from React effects and keep form collection scoped to the component.
Vue 3CompositionAdd scripts from onMounted and map Vue forms to Rooster form groups.
SvelteKitRoutesPut analytics in a root layout and collect forms in the route where they render.
Website Builders
Use these pages when a builder controls your markup. Analytics usually goes in the global header. The form collector goes on the page that contains the form, unless the builder gives you a safe way to add it to every page that has forms.
WebflowBuilderUse site or page custom code, and add Rooster form attributes to Webflow forms.
WixBuilderUse Wix custom code for analytics and page-level form collection where the form DOM is accessible.
WordPressCMSUse a header/footer snippet tool for analytics and page HTML or form plugin markup for collection.
FramerBuilderAdd global custom code for analytics and page custom code for contact or lead forms.
SquarespaceBuilderUse Code Injection for analytics and page-level injection or blocks for collected forms.
What Was Verified
The examples are based on the same contract used by the Rooster server tests:
- The analytics endpoint accepts page-view payloads only.
- The analytics endpoint rejects form collection fields.
- The form collector detects form groups and records form-page analytics.
- Basic form submissions are saved.
- Staged forms save partial data and merge it into the final completed submission.
Use YOUR_PUBLIC_KEY in the snippets below as the website key shown in the Rooster dashboard.