Skip to main content

​
Prerequisites

Before you begin, make sure you have:
  • An active Ringg AI account
  • Your API key (X-API-KEY)
  • An assistant configured for web calls
  • Access to modify your website’s HTML

​
Execution

Step 1: Configure Your Assistant for Web Calls
  • Open your assistant in the Ringg AI dashboard
  • Navigate to the assistant settings
  • Configure the WebCall Settings section
  • Add your website domain to the Whitelist Domains list
Step 2: Get the Embed Code
  • Open your assistant in the Ringg AI dashboard
  • Click the Embed button in the top right corner
  • Copy the provided code snippet
The embed code will look similar to this: 
<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>
Step 3: Customize the Embed Code Modify the configuration object to customize the appearance and behavior of the Web Call assistant: 
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%",
      },
    },
    mic: {
      styles: {
        backgroundColor: "#f44336",
        borderRadius: "50%",
      },
    },
    call: {
      textBeforeCall: "Start Call",
      textDuringCall: "End Call",
      styles: {
        backgroundColor: "#2196F3",
        color: "white",
        borderRadius: "4px",
      },
    },
  },

  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+
   */
});
Step 4: Add the Code to Your Website Paste the embed code into your website’s HTML, preferably just before the closing </body> tag. Step 5: Configure CDN Permissions If your website uses Content Security Policy (CSP), add the following CDN links to your security policies: 
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
Step 6: Test the Integration
  • Visit your website
  • Look for the Web Call button (typically in the bottom right corner)
  • Click the button to start a call
  • Speak to test the voice interaction