Bring Virtual Simulations to Your Website with Convai’s Pixel Streaming Experience Embedding

TL;DR: You can create an interactive, AI‑powered avatar or simulation in Convai’s Avatar Studio, publish it, whitelist your domain, and embed it on your site using the Pixel Streaming Embed. Choose a workflow that fits your stack (React TS, React JS, Vanilla JS, or CDN UMD), or route traffic to your own backend for enterprise/on‑prem needs. This blog focuses on why teams embed AI avatar led experiences to their website, what Convai equips these teams with, what the high‑level steps look like, and the benefits once it’s live. Let’s get started!

To learn more about it, watch the full video below:

Why embed an AI avatar or 3D simulation on your website?

If you’re training staff, onboarding customers, showcasing a space, or offering guided product help, a 3D, conversational avatar can turn passive pages into interactive sessions. 

Now with Convai, you can Pixel‑stream such training experiences, which run on powerful GPUs in the cloud, and stream to any modern browser, so your end users don’t need high‑end hardware to get a premium, responsive experience. In plain English: the heavy GPU compute happens server‑side, and your visitors and users see and interact with it in their browser, on any device. A high-fidelity experience running seamlessly on any device! 

Why Convai: XR, training, and “web in one click”

With Convai you can create embodied, conversational AI-powered, 3D avatars for spatial applications (XR) and the open web. You can craft a character’s “mind”, select or customize an avatar, and deploy that experience into websites or immersive environments, all from the same platform. For teams building XR‑style training or experiential marketing, that “author once, deploy anywhere” loop is key.

• No‑code creation with Avatar Studio. Choose avatars, environments, and UI behavior, then publish a shareable experience.
  
  
• XR and training acceleration. Capture natural gestures in VR with Convai’s XR Animation Capture app and reuse those animations in Unity, Avatar Studio, Convai Sim, or Unreal; no mocap suit required! This is great for realistic training simulations or guided tours.
  
  
• Direct‑to‑web without hosting your own model. By default, the Pixel Streaming client connects to Convai’s hosted backend and VMs—so you don’t need to run a local LLM or manage GPUs to get started. (You can still bring your own infra later.) 

How it works 

Pixel Streaming renders your interactive 3D experience on a server (cloud or on‑prem) and streams video + inputs over WebRTC to the browser. That means visual fidelity and conversational logic happen server‑side; the site only needs to load a lightweight client. 

Convai’s Pixel Streaming Embed wraps this into a simple web component/client so you can drop a published experience ID (“expId”) into your site and go. The official docs centralize everything you need. 

High‑level workflow 

This section mirrors the flow in the video—create, publish, whitelist, embed:

1. Design & publish in Avatar Studio

Build your character and UI, set visibility, and publish. When you publish, note the Experience ID (expId)—you’ll use it in your website embed.

2. Whitelist your domain

To embed securely, whitelist the domain you’ll use (e.g., your production URL). The docs call out three essentials before using the embed: the scene is published, you have your expId, and your domain is whitelisted. If you revise the scene, re‑publish to push the latest changes to the embed.

3. Pick your embedding path
   Convai supports several no‑fuss workflows—choose the one that matches your site or team preferences:
   
   
   • React + TypeScript (component‑based workflow)
     
     
   • React (JavaScript) for standard React apps
     
     
   • Vanilla JavaScript (ES Modules) for framework‑agnostic sites
     
     
   • CDN (UMD script) for drop‑in embeds—handy for website builders that support custom HTML/JS (e.g., adding a script and a container)
     
     
4. Enterprise / on‑prem (optional)
   If you need to run on your backend or private cloud, we got you covered. Convai supports on-prem options and gov-cloud deployment. 
   
   
5. Controls & polish
   The embed exposes handy controls you can wire to your UI, all within Avatar studio: things like initializing the experience or toggling camera and character audio.

Plan access note: Convai Pixel Streaming Embed is currently accessible only with the Professional Plan and above. Check your account plan or the pricing page if you’re unsure which tier unlocks embeds for you. 

What you gain when you embed on your website

• Frictionless reach. Stream high‑fidelity, interactive 3D to any modern browser—no installs, no device constraints.
  
  
• Stickier sessions. Conversational avatars keep people exploring, asking, and learning—ideal for guided demos, tours, and training sims.
  
  
• No local model or GPU to start. Convai’s default hosted setup gets you live quickly while you validate value. You can move to self‑hosted later if needed.
  
  
• Flexible dev surface. Choose React TS/JS, Vanilla ES Modules, or a CDN drop‑in—whatever fits your site or builder. 

Perks for enterprises (security, compliance, and deployment)

• Domain whitelisting keeps embeds scoped to approved origins.
  
  
• On‑prem / private cloud routing gives you full control of session management and streaming endpoints (e.g., to keep traffic in your VPC or region).
  
  
• Cloud‑ready and CDN‑simple. A global CDN build (UMD) makes drop‑ins straightforward and performance 

Controls you (or your devs) will care about later

The embed offers properties and methods to:

• Start/initialize the experience on demand
  
  
• Toggle camera (user webcam) and character audio
  
  
• Clean up the stream instance when leaving a page

Use cases we’re seeing succeed

• XR training & safety drills. Put staff into realistic, scripted scenarios (tour guides, emergency walk‑throughs, compliance steps) they can repeat safely.
  
  
• Customer onboarding & support. An avatar that explains complex products, trains users, answers FAQs, and hands off to human support as needed.
  
  
• Campus, venue, or factory tours. An on‑page guide that points out landmarks or procedures in digital twins.
  
  
• Brand ambassadors & event kiosks. A talking host that greets visitors and collects intent while staying on‑brand.

Quick links to the docs (bookmark these)

• Pixel Streaming Embed (overview + plan access) – What it is, where to start. (Convai Documentation)
  
  
• Whitelisting & Publishing an Experience – Publish, grab expId, and whitelist your domain. (Convai Documentation)
  
  
• React + TypeScript workflow – For strongly typed React teams. (Convai Documentation)
  
  
• React (JavaScript) workflow – Standard React devs. (Convai Documentation)
  
  
• Vanilla JS (ES Modules) – Framework‑agnostic sites. (Convai Documentation)
  
  
• CDN (UMD script) – Drop‑in script for builders and static sites. (Convai Documentation)
  
  
• On‑Premise Deployment – Route to your own backend/servers. (Convai Documentation)
  
  
• Publishing in Avatar Studio – Visibility options and where to find the expId. (Convai Documentation)
  
  
• XR Animation Capture (for training realism) – Record gestures in VR and use them in your web experience. (Convai Documentation)

FAQ

Do I need to host an LLM or run a local GPU?
No to both for most teams. By default, the embed connects to Convai’s hosted backend and VMs; you just embed the experience. Later, you can switch to your own backend and streaming servers if your org requires it. 

Which plan includes embedding?
Convai Pixel Streaming Embed is currently accessible only with the Professional Plan and above.

How do I keep traffic in a specific region (e.g., EU)?
Use the on‑premise overrides to route session and streaming endpoints to infrastructure you control in the target region. This pattern supports stricter data‑residency strategies.

Can I do this with a website builder (e.g., Webflow)?
If your builder supports custom HTML/JS, the CDN (UMD) route is the easiest path—add the script and the embed container in your page structure, then follow your builder’s publish flow. 

In conclusion

Whether you need a tour guide for a digital twin, a soft‑skills coach for frontline training, or a brand ambassador for product education, Convai’s Avatar Studio + Pixel Streaming gives you a fast path from idea to embedded, interactive experience—no heavy local setup required. Start with a published experience and a whitelisted domain, choose the workflow that fits your site, and layer in enterprise controls as your program scales.