Skip to main content

three.ws

Tutorials

Build with 3D agents

From a one-liner embed to on-chain identity — everything you need to ship a 3D agent in your app.

Embed in 30 seconds

Drop one script tag into any HTML page. Your agent loads, auto-sizes, and starts animating immediately.

<!-- Paste before </body> on any page -->
<script
  src="https://three.ws/cdn/agent-3d.js"
  data-agent-id="YOUR_AGENT_ID"
></script>
Create your agent · Full embedding docs

Customize appearance

Control size, background, corner placement, and animation speed entirely through data-* attributes — no JavaScript required.

<script
  src="https://three.ws/cdn/agent-3d.js"
  data-agent-id="YOUR_AGENT_ID"
  data-size="320"
  data-background-color="transparent"
  data-position="bottom-right"
  data-rotation-speed="20"
></script>
Open Widget Studio · All data attributes

JavaScript API

Listen for the ready event, trigger animations, and send speech — drive your agent from any app logic.

<script
  src="https://three.ws/cdn/agent-3d.js"
  data-agent-id="YOUR_AGENT_ID"
  id="my-agent"
></script>

<script>
  const agent = document.getElementById('my-agent');

  agent.addEventListener('ready', () => {
    agent.playAnimation('wave');
  });

  // Trigger from anywhere in your app
  document.querySelector('#checkout-btn')
    .addEventListener('click', () => {
      agent.speak('Order placed! Check your inbox.');
      agent.playAnimation('celebrate');
    });
</script>
Full JS API reference

Widget Studio — no code

Pick an avatar visually, configure behavior with toggles, then copy a ready-to-paste snippet. Zero typing required.

1

Go to Widget Studio — browse the avatar gallery and click the one you want.

2

Use the panel on the right to set size, position, background, and the greeting message your agent will say on load.

3

Click Copy snippet. Paste the script tag before the closing </body> of your page. Done.

4

Changes to your agent's name, avatar, or behavior sync live — no need to update the snippet on your site.

Open Widget Studio

On-chain agent identity

Give your agent a verifiable Solana identity. Mint a token on Pump.fun, link your wallet, and publish an ERC-8004 attestation — all from three.ws.

// Resolve on-chain identity from the SDK
import { resolveAgent } from 'https://three.ws/sdk/agent-resolver.js';

const agent = await resolveAgent('YOUR_AGENT_ID');

console.log(agent.wallet);      // Solana pubkey
console.log(agent.tokenMint);   // Pump.fun mint address
console.log(agent.attestation); // ERC-8004 attestation URI
Pump.fun stream · Vanity wallet · ETH vanity (CREATE2) · Solana SDK docs