For product teams

Make your mascot part of the product.

Use an interactive Peekling for product demos, guided tours, consent choices, lead journeys, and real product feedback.

01 · INTERACTIVE MASCOT

Turn your mascot into part of the product.

Peekling gives a brand character a useful role inside the website. The mascot can welcome a visitor, open a guided experience, explain a choice, react to a real product event, and invite the next step through one consistent character surface.

Your team chooses the character, the moments it responds to, and the controls it presents. The result feels alive because the mascot follows real product state instead of playing a disconnected animation.

The character Pack supplies personality and animation. The Plan connects supported Events to visible responses. Your application remains the source of truth for product data, consent, forms, accounts, and business logic.

02 · PRODUCT DEMOS

Let the mascot guide people to the proof.

A product demo works better when every step has a clear reason to continue. Use a Peekling to introduce the goal, reveal the next control inside its bubble, react when the visitor completes a step, and celebrate the useful outcome.

Welcome a visitor with one clear product promise.
Offer a short guided demo or let the visitor explore freely.
Respond to real application Events such as save, publish, or finish.
End with the next relevant route, document, or contact option.

03 · TOURS AND ONBOARDING

Give every visitor a clear next step.

Configure the mascot bubble as a compact tour guide with Back, Next, Skip, and progress controls. Each choice reports an application Event, so the host can advance the real interface and the Peekling can show the matching reaction.

Keep the tour short, preserve a visible exit, and let returning visitors resume the product on their own terms. The mascot should reduce uncertainty at the exact moment a new choice appears.

05 · LEAD GUIDANCE

Ask one useful question, then guide the next step.

The mascot can ask what a visitor wants to accomplish and route that answer to the most relevant demo, documentation, pricing path, or contact form. This creates a small decision tree that feels personal while every form, field, and CRM action stays inside your application.

Offer two or three intent choices in the Peekling bubble.
Use the selected intent to reveal the most relevant destination.
Show a calm confirmation when a form or booking completes.
Measure the host journey through your existing consented analytics.

06 · MORE PRODUCT MOMENTS

Use the same mascot wherever context matters.

One character, several useful roles

Progress companion: Shows a real job's progress, waiting state, completion, or recovery.
Feature guide: Explains a newly available capability when the host reports it.
Empty-state helper: Offers the first useful action when a workspace has no content yet.
Support router: Guides a visitor toward documentation, status, or human support.

07 · PLAN A PILOT

Ship one complete mascot journey first.

Choose one visitor goal and one measurable product outcome.
Select a Pack whose personality fits that moment.
Connect only the Events and controls required for the journey.
Keep consent, forms, analytics, and product state in the host.
Test keyboard access, reduced motion, dismissal, and loading failure.
Review the complete journey in Chromium, Firefox, and WebKit.

A focused pilot gives the team a real interaction to evaluate. Expand the mascot only after the first journey feels useful, clear, and easy to leave.

08 · NEXT STEP

See the interaction

Explore working mascot journeys before you build one.

Explore the live demos →

Ready to connect product Events and controls? Open the developer guide and follow the path from hatch to teardown.