EAM Demo

<!-- wp:html -->
<!-- wp:html -->
<div id="eam-app">

  <section id="ellie-screen" class="eam-screen">
    <div class="eam-card">
      <div class="eam-avatar" style="background:#E6F1FB;color:#185FA5;">EL</div>
      <h2 class="eam-name">Ellie</h2>
      <p class="eam-status" id="ellie-status">Ready to talk</p>
      <div class="eam-btns">
        <button class="eam-btn eam-btn-primary" id="ellie-call-btn" onclick="startAgent('ellie')">Start Call</button>
        <button class="eam-btn" onclick="eamGoTo('milo-screen')">Milo →</button>
      </div>
    </div>
  </section>

  <section id="milo-screen" class="eam-screen">
    <div class="eam-card">
      <div class="eam-avatar" style="background:#E1F5EE;color:#0F6E56;">MI</div>
      <h2 class="eam-name">Milo</h2>
      <p class="eam-status" id="milo-status">Ready to talk</p>
      <div class="eam-btns">
        <button class="eam-btn eam-btn-primary" id="milo-call-btn" onclick="startAgent('milo')">Start Call</button>
        <button class="eam-btn" onclick="eamGoTo('ava-screen')">Ava →</button>
      </div>
    </div>
  </section>

  <section id="ava-screen" class="eam-screen">
    <div class="eam-card">
      <div class="eam-avatar" style="background:#FBEAF0;color:#993556;">AV</div>
      <h2 class="eam-name">Ava</h2>
      <p class="eam-status" id="ava-status">Ready to talk</p>
      <div class="eam-btns">
        <button class="eam-btn eam-btn-primary" id="ava-call-btn" onclick="startAgent('ava')">Start Call</button>
        <button class="eam-btn" onclick="eamGoTo('ellie-screen')">← Ellie</button>
      </div>
    </div>
  </section>

</div>

<style>
html { scroll-behavior: smooth; }
#eam-app .eam-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  padding: 2rem;
}
#eam-app .eam-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 2.5rem 3rem;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
#eam-app .eam-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}
#eam-app .eam-name {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
}
#eam-app .eam-status {
  font-size: 13px;
  color: #888;
  margin: 0;
  min-height: 18px;
  transition: color 0.3s;
}
#eam-app .eam-btns {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
#eam-app .eam-btn {
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#eam-app .eam-btn:hover { background: #f5f5f5; }
#eam-app .eam-btn-primary {
  background: #185FA5;
  color: #fff;
  border-color: #185FA5;
}
#eam-app .eam-btn-primary:hover {
  background: #0C447C;
  border-color: #0C447C;
}
#eam-app .eam-btn-primary.eam-active {
  background: #A32D2D;
  border-color: #A32D2D;
}
#eam-app .eam-btn-primary.eam-active:hover {
  background: #791F1F;
  border-color: #791F1F;
}
</style>

<script type="module">

import vapi from "https://cdn.jsdelivr.net/npm/@vapi-ai/web/+esm";

document.addEventListener("DOMContentLoaded", async function () {

  const PUBLIC_KEY = "d19bb1d8-391c-4332-acc9-41cbb76d994d";

  const AGENTS = {
    ellie: "a6b03c24-326c-4f66-a7a0-601ce5c868e7",
    milo: "41d1bd02-224d-4236-a336-9e4d354b1ff7",
    ava: "db20a4d3-8b07-41c7-a2cb-3c6714723753"
  };

  const assistant = await vapi.create(PUBLIC_KEY);

  window.startAgent = async function(agent) {

    try {

      await assistant.start(AGENTS[agent]);

      document.getElementById(agent + "-status").innerText =
        <script type="module">

import Vapi from "https://cdn.jsdelivr.net/npm/@vapi-ai/web/+esm";

document.addEventListener("DOMContentLoaded", () => {

  const PUBLIC_KEY = "d19bb1d8-391c-4332-acc9-41cbb76d994d";

  const AGENTS = {
    ellie: "a6b03c24-326c-4f66-a7a0-601ce5c868e7",
    milo: "41d1bd02-224d-4236-a336-9e4d354b1ff7",
    ava: "db20a4d3-8b07-41c7-a2cb-3c6714723753"
  };

  const vapi = new Vapi(PUBLIC_KEY);

  window.startAgent = async function(agent) {

    try {

      await vapi.start(AGENTS[agent]);

      document.getElementById(agent + "-status").innerText =
        "Connected — speak now";

    <script src="https://unpkg.com/@vapi-ai/web/dist/index.global.js"></script>

<script>

document.addEventListener("DOMContentLoaded", function () {

  const PUBLIC_KEY = "d19bb1d8-391c-4332-acc9-41cbb76d994d";

  const AGENTS = {
    ellie: "a6b03c24-326c-4f66-a7a0-601ce5c868e7",
    milo: "41d1bd02-224d-4236-a336-9e4d354b1ff7",
    ava: "db20a4d3-8b07-41c7-a2cb-3c6714723753"
  };

  const vapi = new window.Vapi(PUBLIC_KEY);

  window.startAgent = async function(agent) {

    try {

      await vapi.start(AGENTS[agent]);

      document.getElementById(agent + "-status").innerText =
        "Connected — speak now";

    } catch(err) {

      console.error(err);

      document.getElementById(agent + "-status").innerText =
        "Connection failed";

    }

  };

  window.eamGoTo = function(id) {
    document.getElementById(id).scrollIntoView({
      behavior: "smooth"
    });
  };

});

</script>
<!-- /wp:html -->