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. You can also pass friendly defaults that shape the first visitor experience.

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

Use window.AtinaSDK.configure() or new Atina() after the SDK loads to customize these runtime settings.

2. Load avatar mode

<div id="atina-root" style="height: 620px"></div>
<link rel="stylesheet" href="https://atina.comfylearnhub.com/atina-embed/assets/index-5b0ac9c0.css">
<script type="module" src="https://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://atina.comfylearnhub.com/atina-embed-sdk/atina-sdk.css">
<script src="https://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>

5. Configure Atina as an agent

After creating an embed app, open the Atina dashboard and add the capabilities this deployment needs. The same public key can power avatar mode or text mode; the agent behavior comes from the app/domain configuration behind the gateway.

• Knowledge Base: upload or paste FAQs, policies, support notes, service details, onboarding content, or sales scripts.
• Product Feeds: connect a secure JSON product feed for searchable catalog, price, availability, and product links.
• Live Tools: connect a secure read-only HTTPS endpoint for real-time stock, order links, bookings, or account-safe lookup flows.

6. Product feed format

Product feeds must be served over HTTPS and return JSON. Atina accepts either a top-level array or an object containing products or items.

{
  "products": [
    {
      "id": "shoe-blue-42",
      "title": "Blue Running Shoes",
      "description": "Lightweight running shoes for daily training.",
      "category": "Shoes",
      "price": 89.99,
      "currency": "USD",
      "availability": "in_stock",
      "url": "https://example.com/products/blue-running-shoes"
    }
  ]
}

When Atina answers with a product URL, the SDK turns the full https://... URL into a clickable link in text mode and conversation history.

7. Live tool endpoint format

Live tools are read-only HTTPS GET endpoints. Atina calls the endpoint with q and keyword query parameters containing the visitor request. Optional JSON headers can be configured in the dashboard.

GET https://example.com/api/atina/product-status?q=blue%20running%20shoes

Response:
{
  "status": "in_stock",
  "title": "Blue Running Shoes",
  "price": 89.99,
  "currency": "USD",
  "link": "https://example.com/products/blue-running-shoes"
}

Return only data Atina is allowed to use. Do not expose private database credentials, admin endpoints, or write actions from browser-facing embed deployments.

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.
• Product feeds and live tools must use HTTPS. Live tools should be read-only and scoped to the minimum data needed for the visitor request.

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 and the sample recommendation prompts with content that matches your page.