Add a talking support mascot in the bottom right

Build a bottom-right ecommerce support widget. Fern stays beside the launcher when closed and moves into the panel when opened. Visitors choose plant care, delivery or a message to the shop team.

leaf & loomPLANTS FOR EVERYDAY LIVINGBag (0)

Thoughtfully grown. Naturally at home.

THE HOUSEPLANT COLLECTION

Bring a little
outside in.

Meet the easygoing rubber plant. Glossy leaves, a slow pace, and very little fuss.

Ficus elastica£28

✓ Care card included✓ Packed with care

Download the complete React source and media · Detailed integration tutorial

What to build

Your website owns the forms, saved data and user actions. Masko v1 generates the character and transparent clips while you build. Published playback needs no API key and no generation call per visitor. The preview creates no real orders or support messages.

1. Create the reference

Fern: approved character reference and animation recipe

Copy this character prompt into Studio, or send it as prompt to Masko v1. Replace the name and brand details for your own product.

A friendly little terracotta plant pot with two jade leaves, large dark eyes, a small smiling mouth, short rounded arms and feet, warm clay texture, full character centered, soft 3D lighting, no text or extra props.

Use a write key from API keys in MASKO_API_KEY, and an existing PROJECT_ID from GET /v1/projects. Run generation in a terminal or on your server.

curl -X POST "https://api.masko.ai/v1/mascots" \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: fern-reference-001" \
  -d '{
  "project_id": "PROJECT_ID",
  "name": "Fern",
  "prompt": "A friendly little terracotta plant pot with two jade leaves, large dark eyes, a small smiling mouth, short rounded arms and feet, warm clay texture, full character centered, soft 3D lighting, no text or extra props.",
  "settings": {
    "cdn_enabled": true,
    "animation_sizes": [
      360
    ]
  }
}'

Save data.id as MASCOT_ID and the first data.reference_asset_ids entry as REFERENCE_ASSET_ID. This request generates a reference image. Inspect it before animating; preview options first if you want a choice.

2. Map the interaction states

Fern: website states, triggers and selected clips

Keep panel visibility, selected topic and team contact as website state. All help topics returns to the menu. Closing or Escape returns focus to the launcher. Topic clips play once; the demo holds the last frame, and Hear Fern replays the line. Team contact uses the idle clip and a message form.

This diagram describes the website’s state machine. You do not need to create a Masko canvas or send these UI events to the generation API.

Website state	Clip	Trigger
Closed launcher	`idle`	Page load
Help panel	`welcome`	Click Ask Fern
Topic answer	`care / delivery`	Choose a topic
Contact the team	`idle`	Talk to our team

3. Generate the animation set

Start with a five-second Standard idle loop from the approved reference. The animation prompt describes movement; the reference supplies the character’s identity.

A tiny relaxed sway and a friendly blink; the jade leaves move gently. Keep the pot, arms and feet consistent. Full character in frame, still camera, seamless loop.

curl -X POST "https://api.masko.ai/v1/mascots/MASCOT_ID/generate" \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: fern-idle-001" \
  -d '{
  "type": "animation",
  "name": "Idle",
  "source_image_asset_id": "REFERENCE_ASSET_ID",
  "animation_model": "standard",
  "animation_prompt": "A tiny relaxed sway and a friendly blink; the jade leaves move gently. Keep the pot, arms and feet consistent. Full character in frame, still camera, seamless loop.",
  "duration": 5,
  "loop": true
}'

Save data.job_id, data.item_id and data.asset_ids. Each paid request needs its own idempotency key; retry an uncertain request with the same key and identical body.

Choose Fern’s voice

A warm, practical adult voice with a gentle British accent, relaxed conversational pace.

curl -X POST "https://api.masko.ai/v1/mascots/MASCOT_ID/voice/samples" \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: fern-voices-001" \
  -d '{
  "description": "A warm, practical adult voice with a gentle British accent, relaxed conversational pace."
}'

Listen to the returned data.samples[].url files, then keep the chosen sample’s id:

curl -X PUT "https://api.masko.ai/v1/mascots/MASCOT_ID/voice" \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: fern-voice-001" \
  -d '{
  "sample_id": "SAMPLE_ID"
}'

Copy the talking scripts

Bracketed movements direct the performance and are not spoken. Keep the same words visible as text in the UI.

welcome

[waves gently, warm] Hi, I’m Fern. Looking for plant care or delivery help?

care

[gestures toward the plant, helpful] Give your plant bright, indirect light. Check the soil before watering. Each plant comes with its own care card.

delivery

[small reassuring nod, clear] Our example shop dispatches plants in two working days, packed with care. Your confirmation email has the tracking link.

Estimate, then generate a talking clip

Save this as fern-welcome.json. SOURCE_ITEM_ID is the idle request’s data.item_id, which has the approved source image. Use each script above for its matching clip.

{
  "type": "animation",
  "item_id": "SOURCE_ITEM_ID",
  "speech": {
    "script": "[waves gently, warm] Hi, I’m Fern. Looking for plant care or delivery help?"
  },
  "dry_run": true
}

curl -X POST "https://api.masko.ai/v1/mascots/MASCOT_ID/generate" \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26" \
  -H "Content-Type: application/json" \
  --data-binary @fern-welcome.json

Review data.estimate.credits, duration and too_long. The estimate creates no video and charges no credits. When ready, remove dry_run and send the paid request:

jq 'del(.dry_run)' fern-welcome.json > fern-welcome-generate.json

curl -X POST "https://api.masko.ai/v1/mascots/MASCOT_ID/generate" \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: fern-welcome-001" \
  --data-binary @fern-welcome-generate.json

Repeat for the other two scripts with distinct filenames, clip names in your app and idempotency keys. Talking controls its own duration and looping; omit duration, loop and animation_prompt. Talking animation guide covers the full contract.

4. Wait for ready files

Poll each returned job ID without resending generation. If a wait times out, repeat the GET until data.status is completed or failed.

curl "https://api.masko.ai/v1/jobs/JOB_ID?wait=true&timeout=30" \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26"

Check the WebM and HEVC assets you intend to serve with GET /v1/assets/ASSET_ID; a finished MP4 alone is not enough. For hosted files, read the mascot’s export:

curl "https://api.masko.ai/v1/mascots/MASCOT_ID/cdn-export" \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26"

Use data.items[].animations[].transparent_video_webm for Chrome, Firefox and Edge, and transparent_video_mov for Safari. The export contains only ready hosted files; cdn_export_not_ready means hosting is off or no file is hosted yet; its message says which, and turn on hosting fixes the first. You can also download the files into your app’s public/ directory. Do not ship expiring signed URLs.

5. Connect the player and product events

Copy src/ and public/website-use-cases/ from the source download, then render the complete example:

import { WebsiteMascotDemo } from './WebsiteMascotDemo';

export default function Example() {
  return <WebsiteMascotDemo kind="support" />;
}

Replace the example care and delivery answers with the shop’s real policies. Send the message through your support provider and show success only after it accepts the request. Keep product and purchase controls reachable; opening help is always the visitor’s choice.

The example plays each mascot with the Masko player, from a small canvas it builds from these clips in website-mascot-delivery.ts. Replace media URLs in website-mascots.ts with your own files. In your app, put the clips in a canvas, release it and play the release, with your product events sent by fire (Play a canvas). The integration tutorial shows the React event wiring.

Copy this prompt into Lovable or another coding agent

Build a botanical ecommerce website called Leaf & Loom with forest green, warm cream and terracotta colors, plus a clean plant product cutout. Use Masko v1 to create Fern, a terracotta pot with jade leaves. Place a closed Ask Fern launcher in the bottom right. On click, open a compact support panel with Fern inside, topic cards for Plant care and Delivery & orders, and Talk to our team. Use written answers and optional welcome, care and delivery talking clips. Add a back link, close button, Escape handling and focus return. Connect team messages to our support service and keep checkout reachable.

Follow https://masko.ai/docs/use-cases/web-support-mascot.
Use the REST API at https://api.masko.ai/v1 and inspect
https://api.masko.ai/v1/openapi.json for request shapes.
Read https://masko.ai/llms-full.txt for generation and playback guidance.
Keep MASKO_API_KEY on the server and never print it.
Show the generation costs before creating paid media.
Wait for jobs and transparent formats, then download or publish the files.
Use the finished files in the browser; do not generate on visitor actions.
Keep captions and written answers usable without sound.

Verify and measure

Open with the keyboard, select each topic and return to the menu. Close with Escape and check focus returns to Ask Fern. Preview a team message and verify it clearly says the message was not sent.

Check keyboard use, mobile layout, reduced motion, WebM and Safari playback, plus a media failure with a visible still-image fallback.

Compare resolved questions, completed support handoffs and purchase completion. A mascot may support trust and conversion; accurate answers and a working support service remain essential.

Generation spends your account’s credits; published file playback adds no generation charge. Use current pricing and the talking estimate for your own recipe.

Add a talking support mascot in the bottom right

Bring a littleoutside in.

What to build#

1. Create the reference#

2. Map the interaction states#

3. Generate the animation set#

Choose Fern’s voice#

Copy the talking scripts#

Estimate, then generate a talking clip#

4. Wait for ready files#

5. Connect the player and product events#

Copy this prompt into Lovable or another coding agent#

Verify and measure#

Continue building#