Control the popup

The popup includes its own launcher by default:

<script type="module" src="https://asktori.ai/cdn/tori-latest.js"></script>

<tori-popup
  app-id="APP_ID"
  agent-id="AGENT_ID"
></tori-popup>

Start open

<tori-popup
  app-id="APP_ID"
  agent-id="AGENT_ID"
  open
></tori-popup>

Hide the default launcher

Use show-launcher="false" when you want to open the popup from your own button:

<button id="open-support">Ask Tori</button>

<tori-popup
  id="support-popup"
  app-id="APP_ID"
  agent-id="AGENT_ID"
  show-launcher="false"
></tori-popup>

Then control the open property:

<script>
  const popup = document.getElementById("support-popup");

  document.getElementById("open-support").addEventListener("click", () => {
    popup.open = true;
  });
</script>

Listen for open changes

Assign onOpenChange as a JavaScript property:

<script>
  const popup = document.querySelector("tori-popup");

  popup.onOpenChange = (open) => {
    console.log("Tori popup open:", open);
  };
</script>

Function-valued options must be set as JavaScript properties. They cannot be represented as HTML attributes.