Start with a dedicated embed wrapper
Choose the section where the mascot belongs, then give its wrapper a predictable width and aspect ratio at each breakpoint. The character should sit within the layout instead of floating over text or relying on absolute coordinates tied to a desktop screenshot.
A custom embed can hold the canvas and static fallback, with runtime initialization loaded through the project’s supported custom-code area. Availability depends on your Webflow setup. Review Webflow’s custom-code documentation before choosing the embed location.
Use published URLs for the runtime and export
The .riv file must be reachable by the visitor’s browser. Use an approved static asset host if the project’s asset manager does not support the required file type. Confirm cross-origin access when the animation and website use different origins.
The runtime script and its matching WebAssembly asset also need stable paths. Keep the initialization code in one place so repeated embeds do not each load another runtime. Use unique canvas identifiers or scope queries to each wrapper.
Keep behavior independent from Designer structure
Avoid selectors that depend on a long chain of generated classes. Give the mascot wrapper an intentional class or data attribute and scope its controls beneath that element. This makes design revisions less likely to break the animation.
Webflow interactions and the Rive state machine solve different problems. Let the rig control its own expressions and transitions. Avoid applying a second set of transforms to the canvas that fights the character’s intended motion or shifts its hit area.
Connect forms and CTAs carefully
A hover reaction can listen to a specific CTA and set the corresponding input. A form success reaction should follow the form’s confirmed success state rather than the submit button click. Make sure validation failure cannot produce a success expression.
If the project includes custom scripts or third-party forms, document which event actually confirms completion. Where no reliable event is available, keep the mascot decorative instead of implying an outcome the website cannot verify.
Review the published experience
Test on a staging or published Webflow page, because custom-code behavior may differ from the design canvas. Verify the embed at desktop, tablet and mobile breakpoints, and check that touch scrolling remains natural around the character.
Keep a static fallback and reduced-motion path, and pause when offscreen. The project handoff should identify the wrapper, code location, asset URLs and input contract. Integration support is scoped separately from the Rive artwork and animation export.