The Power of Visual 3D Guidance
An animated 3D AI avatar creates an immediate, welcoming impression on website visitors. Instead of relying on users to read walls of text, the avatar gestures toward buttons, guides user attention, and answers questions using natural speech synthesis and interactive chat bubbles.
Customize Avatar in the Studio
Log into your dashboard at asiyst.com and open the Avatar Studio. Here, you can:
- Select from multiple 3D avatar character models.
- Adjust brand color accents, clothing textures, and lighting mood.
- Choose a voice profile (e.g., professional, friendly, energetic) and tune speech rate.
Define Guidance Triggers & Page Target Rules
Configure when and where the 3D avatar should appear. You can set rules such as greeting first-time visitors after 3 seconds on your homepage, or proactively offering assistance when a user stays on a checkout or pricing page.
Embed the Web SDK with React or HTML
Install the official package:
npm install @asiyst/sdkMount the client in your application:
import { Asiyst } from "@asiyst/sdk";
const asiyst = new Asiyst({
projectId: "your_project_id",
position: "bottom-right",
avatar: {
enabled: true,
speechVoice: "professional",
greeting: "Welcome! How can I guide you today?"
}
});Verify Asynchronous Performance
Test your page in Google PageSpeed Insights and Bing Webmaster Tools. Because Asiyst renders inside an isolated Shadow DOM and defers WebGL textures until critical content is parsed, your Core Web Vitals remain completely unimpacted.
Learn more about 3D avatar features
Explore full avatar animation specs and gesture capabilities.