Add Atina 3D AI to your site in a few minutes

1. Configure your page

public_key is required. The SDK sends it with the browser origin to create a temporary session token after your domain is validated.

<script>
window.ATINA_CONTEXT = {
  public_key: "atina_pk_live_your_public_key",
  external_user_id: "optional-user-id-from-your-app",
  mode: "text"
};
</script>

2. Load avatar mode

<div id="atina-root" style="height: 620px"></div>
<link rel="stylesheet" href="https://www.atina.comfylearnhub.com/atina-embed/assets/index-5b0ac9c0.css">
<script type="module" src="https://www.atina.comfylearnhub.com/atina-embed/assets/index-bc07bc84.js"></script>

3. Load text mode and callbacks

<div id="atina-text-root"></div>
<div class="my-atina-history"></div>
<link rel="stylesheet" href="https://www.atina.comfylearnhub.com/atina-embed-sdk/atina-sdk.css">
<script src="https://www.atina.comfylearnhub.com/atina-embed-sdk/atina-sdk.js"></script>
<script>
window.AtinaEvents.registerCallbacks([
  function (event) {
    console.log("Atina conversation updated", event.conversation_id);
  }
]);

window.AtinaSDK.mountChatHistory(".my-atina-history");
</script>

4. Toggle text and avatar mode

The SDK starts in window.ATINA_CONTEXT.mode when provided. You can also switch modes from your own button or menu.

<button id="atinaModeToggle">Toggle Atina Mode</button>
<button onclick="window.AtinaSDK.setMode('text')">Text</button>
<button onclick="window.AtinaSDK.setMode('avatar')">Avatar</button>

<script>
document.getElementById("atinaModeToggle").addEventListener("click", function () {
  window.AtinaSDK.toggleMode();
});
</script>

Security model

• Never expose secret API keys in the browser. Embed uses only atina_pk_live_ public keys.
• Every request is checked against the submitted browser origin and your authorized domains.
• Validated embeds receive short-lived session tokens for history, uploads, rating, and streaming.
• Uploads are extracted as temporary context and expire through the existing cleanup workflow.

Drop-in starter snippets

Choose your frontend, copy or download the starter, then replace atina_pk_live_your_public_key with your own public key.