Documentation Index
Fetch the complete documentation index at: https://cdialai-0073e50a.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
Overview
This guide shows you how to make a web call to your Indigenius agent.
You can create an assistant using either:
- The Web SDK
- The Indigenius Dashboard
For apps built with Next.js (v0):
-
Go to Settings → Environment Variables
-
Create a new variable called:
NEXT_PUBLIC_INDIGENIUS_AGENT_ID
-
Add your Agent ID from the dashboard.
Installation
Install the SDK with your preferred package manager:
npm install indigenius-ai-widget
<script src="https://cdn.jsdelivr.net/npm/indigenius-ai-widget/dist/index.js"></script>
Quick Start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Call Demo</title>
</head>
<body>
<h1>Web Call Demo (Tag Only)</h1>
{/* Widget tag only */}
<indigenius-convai agent-id="YOUR_AGENT_ID"></indigenius-convai>
{/* SDK script */}
<script src="https://cdn.jsdelivr.net/npm/indigenius-ai-widget/dist/index.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Call Demo</title>
</head>
<body>
<h1>Web Call Demo (Script + Instantiation)</h1>
{/* Button to toggle call */}
<button id="toggle-call" disabled>Loading...</button>
{/* SDK script */}
<script src="https://cdn.jsdelivr.net/npm/indigenius-ai-widget/dist/index.js"></script>
<script defer>
if (window.CdialWidget) {
const widget = new window.CdialWidget({
agentId: "YOUR_AGENT_ID",
mountUI: false
});
const button = document.getElementById('toggle-call');
let widgetReady = false;
widget.init().then(() => {
widgetReady = true;
button.disabled = false;
button.textContent = 'Start Call';
});
widget.on('dialing', () => button.textContent = 'Dialing...');
widget.on('connected', () => button.textContent = 'End Call');
widget.on('ended', () => button.textContent = 'Start Call');
widget.on('error', console.error);
button.addEventListener('click', () => {
if (!widgetReady) return;
widget.toggleCall();
});
} else {
console.error("CdialWidget is not available on window.");
}
</script>
</body>
</html>
import { useEffect, useRef, useState } from "react";
import { CdialWidget } from "indigenius-ai-widget";
export default function App() {
const widgetRef = useRef<CdialWidget | null>(null);
const [callState, setCallState] = useState("idle");
const [widgetReady, setWidgetReady] = useState(false);
useEffect(() => {
const widget = new CdialWidget({
agentId: process.env.NEXT_PUBLIC_INDIGENIUS_AGENT_ID!,
mountUI: true,
});
widgetRef.current = widget;
widget.on("dialing", () => setCallState("dialing"));
widget.on("connected", () => setCallState("connected"));
widget.on("ended", () => setCallState("ended"));
widget.on("error", console.error);
widget.init().then(() => setWidgetReady(true));
return () => widget.destroy();
}, []);
const toggleCall = () => widgetRef.current?.toggleCall();
return (
<div>
<h1>Cdial Widget Demo (React)</h1>
<button onClick={toggleCall} disabled={!widgetReady}>
{callState === "connected"
? "End Call"
: callState === "dialing"
? "Dialing..."
: "Start Call"}
</button>
</div>
);
}
<template>
<div>
<h1>Cdial Widget Demo (Vue)</h1>
<button @click="toggleCall">{{ buttonLabel }}</button>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { CdialWidget } from "indigenius-ai-widget";
const callState = ref("idle");
const widget = ref<CdialWidget | null>(null);
onMounted(() => {
widget.value = new CdialWidget({
agentId: import.meta.env.VITE_INDIGENIUS_AGENT_ID,
mountUI: true,
});
widget.value.on("dialing", () => (callState.value = "dialing"));
widget.value.on("connected", () => (callState.value = "connected"));
widget.value.on("ended", () => (callState.value = "ended"));
widget.value.on("error", console.error);
widget.value.init();
});
onBeforeUnmount(() => {
widget.value?.destroy();
});
const toggleCall = () => widget.value?.toggleCall();
const buttonLabel = computed(() =>
callState.value === "connected" ? "End Call" : "Start Call"
);
</script>
import { Component, OnInit, OnDestroy } from "@angular/core";
import { CdialWidget } from "indigenius-ai-widget";
@Component({
selector: "app-root",
template: `
<h1>Cdial Widget Demo (Angular)</h1>
<button (click)="toggleCall()">{{ buttonLabel }}</button>
`,
})
export class AppComponent implements OnInit, OnDestroy {
callState = "idle";
widget: CdialWidget | null = null;
get buttonLabel() {
return this.callState === "connected" ? "End Call" : "Start Call";
}
ngOnInit() {
this.widget = new CdialWidget({
agentId: process.env["NG_APP_INDIGENIUS_AGENT_ID"],
mountUI: true,
});
this.widget.on("dialing", () => (this.callState = "dialing"));
this.widget.on("connected", () => (this.callState = "connected"));
this.widget.on("ended", () => (this.callState = "ended"));
this.widget.on("error", console.error);
this.widget.init();
}
ngOnDestroy() {
this.widget?.destroy();
}
toggleCall() {
this.widget?.toggleCall();
}
}
| Option | Type | Required | Default | Description |
|---|
agentId | string | ✅ Yes | — | Unique Agent ID for your AI agent |
mountUI | boolean | ❌ No | false | Auto-mount floating UI if true, manual control if false |
Available Events
| Event | Payload | Description |
|---|
dialing | void | Fired when connecting to the AI agent |
connected | void | Fired when connection established |
ended | void | Fired when call ends |
error | Error | Fired on internal widget error |
Tip
✅ Use mountUI: true for quick integration.
✅ Use mountUI: false for custom UI.
✅ Listen to events for granular call control.
