Embedding Web Call Assistant

<script>
	 function loadAgentsCdn(e, t) {
		 let n = document.createElement("link");
		 n.rel = "stylesheet", n.type = "text/css", n.href = `https://cdn.jsdelivr.net/npm/@desivocal/agents-cdn@${e}/dist/style.css`;
		 var a = document.createElement("script");
		 a.type = "text/javascript", a.readyState ? a.onreadystatechange = function() {
			 "loaded" !== a.readyState && "complete" !== a.readyState || (a.onreadystatechange = null, t())
		 } : a.onload = function() {
			 t()
		 }, a.src = `https://cdn.jsdelivr.net/npm/@desivocal/agents-cdn@${e}/dist/dv-agent.es.js`, document.getElementsByTagName("head")[0].appendChild(n), document.getElementsByTagName("head")[0].appendChild(a)
	 }
</script>

<script>
	 loadAgentsCdn("latest", function() {
		 loadAgent({
			 agentId: "your-agent-id",
			 xApiKey: "your-api-key",
			 variables: {},
			 buttons: {},
		 });
	 });
</script>

loadAgent({
  agentId: "your-agent-id",
  xApiKey: "your-api-key",

  variables: {
    custom_variable_1: "value1",
    custom_variable_2: "value2",
  },

  buttons: {
    modalTrigger: {
      styles: {
        backgroundColor: "#4CAF50",
        color: "white",
        borderRadius: "50%",
      },
      icon: {
        url: "https://example.com/custom-icon.svg",
        size: 24,
      },
    },
    mic: {
      styles: {
        backgroundColor: "#f44336",
        borderRadius: "50%",
      },
    },
    call: {
      textBeforeCall: "Start Call",
      textDuringCall: "End Call",
      styles: {
        backgroundColor: "#2196F3",
        color: "white",
        borderRadius: "4px",
      },
    },
  },

  widgetPosition?: {
    triggerPlacement?: "fixed" | "absolute",
    /**
     * Widget positioning mode.
     * "fixed" - floats over the page, fixed to viewport (default)
     * "absolute" - embeds inside a container with id="revenueable_ai_container"
     * Supported from v1.0.19+
     */

    triggerAlignment?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "center",
    /**
     * Position of the trigger button.
     * Supported from v1.0.19+
     * @default "bottom-right"
     */

    hideTriggerOnExpand?: boolean,
    /**
     * Hide the trigger button when widget is open.
     * Supported from v1.0.19+
     * @default true
     */

    widgetAlignment?: "bottom-right" | "bottom-center" | "bottom-left",
    /**
     * Position of the expanded widget.
     * Supported from v1.0.19+
     * @default "bottom-right"
     */
  },

  defaultTab?: "audio" | "text",
  /**
   * The tab shown by default when the component loads.
   * Supported from v1.0.8+
   * @default "audio"
   */

  hideTabSelector?: boolean,
  /**
   * Whether to hide the tab selector UI.
   * Supported from v1.0.8+
   * @default false
   */

  innerWindowProps?: {
    /**
     * Inner window dimensions when a call is connected.
     * Accepts a number (px) or any valid CSS size string.
     * Supported from v1.0.8+
     */
    width?: number | string,
    height?: number | string,
    borderRadius?: number | string,
  },

  title?: string,
  /** Custom title displayed in the header. */

  description?: string,
  /** Custom description displayed below the title. */

  logoUrl?: string,
  /**
   * Custom logo URL displayed in the header.
   * Supported from v1.0.10+
   */

  logoStyles?: Partial<React.CSSProperties>,
  /**
   * Custom CSS styles for the logo container.
   * Supported from v1.0.10+
   */

  legalDisclaimer?: {
    text: string,
    links?: Record<string, string>
  },
  /**
   * Custom legal disclaimer with clickable links.
   * Supported from v1.0.10+
   */

  feedbackScreen?: {
    title?: string,               // Default: "How was your call/chat?"
    description?: string,         // Default: "Your feedback helps us improve!"
    starsCount?: number,          // Default: 5
    placeholder?: string,         // Default: "We'd love to hear more..."
    submitBtnCTA?: string,        // Default: "Submit Feedback"
    submitBtnStyles?: Partial<React.CSSProperties>,
    starsStyles?: {
      filledColor?: string,       // Default: #FBBF24 (yellow)
      emptyColor?: string         // Default: #D1D5DB (gray)
    }
  },
  /**
   * Optional feedback UI props
   * Supported from v1.0.11+
   */
});

style-src: https://cdn.jsdelivr.net/npm/@desivocal/agents-cdn@latest/dist/style.css
script-src: https://cdn.jsdelivr.net/npm/@desivocal/agents-cdn@latest/dist/dv-agent.es.js

<div id="revenueable_ai_container" style="position: relative; width: 100%; height: 500px;">
</div>

loadAgent({
  agentId: "your-agent-id",
  xApiKey: "your-api-key",
  widgetPosition: {
    triggerPlacement: "absolute",
    triggerAlignment: "center"
  }
});

buttons: {
  modalTrigger: {
    styles: {
      backgroundColor: "#4F46E5",
      width: 64,
      height: 64
    }
  }
}

buttons: {
  modalTrigger: {
    icon: {
      url: "https://example.com/my-icon.svg",
      size: 24
    }
  }
}

window.addEventListener("revenueable:widget_status", (e) => {
  console.log(e.detail); // { status: "maximised", mode: "audio" }
});

window.addEventListener("revenueable:conversation_status", (e) => {
  console.log(e.detail); // { status: "started", mode: "audio", callId: "abc123" }
});

window.addEventListener("revenueable:feedback_status", (e) => {
  console.log(e.detail); // { status: "submitted", callId: "abc123", rating: 5 }
});