Skip to main content
This guide is intended for developers. If you are not comfortable with frontend development, please check our no-code sessions recipe instead.
Equos UI Conversation Triggers
This recipe assumes you have already created an agent and an avatar. If you haven’t done so, please follow our create agent and create avatar recipes first

​
Triggers

Triggers are UI components that you can embed in your web application to automatically start a session when a user interacts with them.

​
Placeholder Trigger

This is a “large” component that takes any size and shape. Background is customizable. The center button triggers the conversation.
Placeholder trigger
"use client";

import { initEquosBrowser } from "@equos/browser-sdk";
import { EquosPlaceholderTrigger } from "@equos/browser-sdk/react";
import { useEffect, useRef, useState } from "react";

import { EQUOS_AGENT_ID, EQUOS_AVATAR_ID, EQUOS_PUBLIC_KEY } from "./env";

import "@equos/browser-sdk/styles.css";

export default function App() {
  const agent = useRef({
    agentId: EQUOS_AGENT_ID,
    avatarId: EQUOS_AVATAR_ID,
    name: "your agent name",
    description: "your agent description",
    thumbnailUrl: "",
  });

  const equos = useRef(initEquosBrowser(EQUOS_PUBLIC_KEY));

  const [dark, setDark] = useState(false);
  const [modal, setModal] = useState(true); // Trigger session in modal or in the placeholder.
  const [ghost, setGhost] = useState(false); // No component, start session programmatically.

  const onStartProgrammatically = () => {
    // Triggers register themselves when the component is mounted.
    // You can start a session programmatically using the trigger id.
    equos.current.start(equos.current.triggers.keys().next().value!)
  };

  return (
    <div className="w-[800px] h-[600px]">
        <EquosPlaceholderTrigger
            agent={agent.current}
            dark={dark}
            modal={modal}
            ghost={ghost}
        />
    </div>
  );
}

Need a React example?

Check our React integration example on GitHub.

​
Bubble Trigger

This is a small circular button that can be placed anywhere on your page. The bubble can be collapsed (small circle), or expanded to look like a pill.
Bubble Trigger
The session appears in a popup anchored to the bubble.
The browser sdk also exports a EquosBubbleList component to display multiple bubbles in row or column.
"use client";

import { initEquosBrowser } from "@equos/browser-sdk";
import { EquosBubbleTrigger, EquosPopup } from "@equos/browser-sdk/react";
import { useEffect, useRef, useState } from "react";

import { EQUOS_AGENT_ID, EQUOS_AVATAR_ID, EQUOS_PUBLIC_KEY } from "./env";

import "@equos/browser-sdk/styles.css";

export default function App() {
  const agent = useRef({
    agentId: EQUOS_AGENT_ID,
    avatarId: EQUOS_AVATAR_ID,
    name: "your avatar name",
    description: "your avatar description",
    thumbnailUrl: "avatar thumbnail url",
  });
  const equos = useRef(initEquosBrowser(EQUOS_PUBLIC_KEY));

  const [dark, setDark] = useState(false);
  const [alignX, setAlignX] = useState<"left" | "right">("right"); // Popup horizontal alignment
  const [alignY, setAlignY] = useState<"top" | "bottom">("bottom"); // Popup vertical alignment

  return (
      <EquosPopup alignX={alignX} alignY={alignY}>
        <EquosBubbleTrigger
          dark={dark}
          agent={agent.current}
        ></EquosBubbleTrigger>
      </EquosPopup>
  );
}

Need a React example?

Check our React integration example on GitHub.

​
Angular, Vue, Svelte, plain HTML

Equos Browser SDK also provides WebComponents that one can use with all modern frameworks or with pure vanilla js. 
import "@equos/browser-sdk/web"; // Registers the web components

import { EquosBrowserEvent, initEquosBrowser } from "@equos/browser-sdk";

import { AGENT, PUBLIC_KEY } from "../env.ts";

const equos = initEquosBrowser(PUBLIC_KEY);

equos.on(EquosBrowserEvent.started, console.log);
equos.on(EquosBrowserEvent.ended, console.log);

const el = document.querySelector("equos-bubble-list");
(el as any).agents = [AGENT];

const placeholder = document.querySelector("equos-placeholder-trigger");
(placeholder as any).agent = AGENT;

Need a vanilla JS example?

Check our Vanilla JS integration example on GitHub.