Skip to main content

Gaia Avatar

Here’s a clean, professional README.md that fully documents your GAIA Avatar Embed HTML project — including purpose, structure, dependencies, and instructions for running it locally or hosting it.

GAIA Avatar

This project provides a stand-alone HTML page that embeds a D-ID digital avatar (GAIA) inside a branded ALXR-style layout. It serves as a lightweight, static “avatar-only” front-end — no backend or build tools required.

Purpose​

This page lets you display an interactive GAIA avatar (powered by D-ID) directly in the browser with your own ALXR branding and layout.

It’s ideal for:

  • Embedding the GAIA digital wellness mentor on landing pages
  • Demos or pop-up agents without full chatbot integration
  • Lightweight environments where no Node.js or Vite setup is desired

🗂️ Project Structure​

gaia-avatar/
├── index.html        # Main HTML file with D-ID embed
├── assets/
│   └── logoslogan.png # ALXR logo

⚙️ Dependencies​

This page depends only on:

The D-ID SDK is loaded directly from the official CDN and initialized using the provided data-* attributes.

🧩 Environment Details​

The avatar is configured entirely through the <script> tag at the bottom of the HTML:

<script
  type="module"
  src="https://agent.d-id.com/v2/index.js"
  data-mode="full"
  data-client-key="YOUR_DID_CLIENT_KEY"
  data-agent-id="YOUR_AGENT_ID"
  data-name="did-agent"
  data-monitor="true"
  data-target-id="did-agent-container"
  data-orientation="vertical">
</script>

Parameters​

AttributeDescription
data-modeAvatar display mode (full, mini, or fabio)
data-client-keyYour D-ID Client SDK key (browser-safe)
data-agent-idYour specific GAIA agent ID from the D-ID Studio
data-target-idThe HTML element where the avatar will render
data-orientationLayout direction: vertical or horizontal
data-monitorEnables developer console logs (true recommended)

How to Run it on the Server​

  1. Clone or copy this project folder:

    git clone https://github.com/<your-repo>/gaia-avatar.git
    cd gaia-avatar

  2. Access the file in your browser using your domain name

Security Notes​

  • This demo uses a D-ID Client SDK key, which is safe for browser use. It only allows embedding your public agent, not full API control.

  • To prevent unauthorized use:

    1. Go to your D-ID Dashboard → API Keys.

    2. Edit your Client key.

    3. Add Allowed Domains, for example:

      alxr.ai
      store.alxr.ai

    This ensures only those domains can use the key.