1. Define the placement and behavior
Choose one place where the character supports a useful moment. An inline hero placement is different from a fixed corner companion: the latter needs extra checks around navigation, consent banners and mobile keyboards. Sketch the placement at desktop and mobile sizes.
Write down the behavior before choosing the asset format. A static image needs no animation runtime. A fixed loop may use video. Pointer tracking or application-event reactions need a real-time system such as a Rive rig with a documented input contract.
2. Prepare the asset and fallback
Get the exported animation, its exact state-machine name and an input reference. Confirm numeric ranges, trigger meanings and the neutral state. Ask for a static image that matches the character at its intended size.
Reserve the same space for the fallback and canvas. Explicit dimensions or a stable aspect ratio keep the surrounding layout from shifting as the file loads. The image should remain visible until the runtime and expected state machine are ready.
3. Load the official runtime deliberately
Select a runtime compatible with the file’s features, pin a tested version and host the matching assets. Avoid loading the runtime on pages that only show static examples. A below-the-fold preview can wait until it approaches the viewport.
Create the instance after the canvas exists. Resize its drawing surface after loading and when the wrapper changes size. Clean up the runtime and listeners if the component is removed; a page-level embed also needs a plan for navigation and visibility.
4. Connect one behavior at a time
Start with idle and confirm the file renders correctly. Then connect gaze inputs and a click trigger. Finally, map advanced events from the application’s confirmed states. This sequence makes it easier to distinguish an asset problem from an event-wiring problem.
Do not attach a success expression directly to a submit button. Validation and server processing can still fail after the click. The character should reflect a real outcome, while the normal interface remains responsible for completing the operation.
5. Verify the experience around the animation
- Test pointer, touch and keyboard interaction.
- Check reduced motion and a visible pause control.
- Disable JavaScript and confirm the page content still works.
- Simulate a missing file and verify the fallback remains visible.
- Pause when offscreen or in a hidden tab.
- Measure the full page with the runtime included, on representative devices.
A successful integration is more than a moving character. The page should remain readable, stable and usable if the animation is slow or unavailable. The integration-kit overview explains what to request from your animation provider.