​
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 variables for your assistant
    "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"
      }
    }
  }
});

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