> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trikon.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Example: Dashboard Integration Guide

> Welcome to the Trikon Voice API! This guide explains the core architecture required to build a custom dashboard (like a CRM) that interacts with your Trikon Voice Agents.

There are three primary features your dashboard needs to support:

* Showing the Voice Agent widget on your website
* Triggering outbound calls from your backend
* Receiving and displaying call logs

<Note>
  **Video Tutorial:** [Watch the step-by-step Loom guide](https://www.loom.com/share/c2b615614bc642a4850afe92470bfd6c)
</Note>

<Card title="View full source code on GitHub" icon="github" href="https://github.com/trikontech/voice-ai-example-dashboard">
  Clone the complete Next.js dashboard example repository to get started instantly.
</Card>

## Prerequisites: What You Need

Before writing any code, gather the following credentials from your [Trikon Dashboard](https://voice.trikon.tech/).

<Note>
  IMPORTANT - Keep your Secret API Key hidden on your backend. Never expose it in browser HTML/JavaScript!
</Note>

* **Secret API Key** (`tvk_...`) — Found in Settings → Developer API
* **Public Widget Key** (`tvk_pk_...`) — Found in Settings → Web Embed
* **Agent ID** — Found in the URL of your specific agent's page
* **Phone Number UUID** — Found in Settings → Phone Numbers & Telephony
* **Workspace Slug** — The unique name of your workspace (found in your URL, e.g. `trikontest`)

## 1. Embed Agent (Frontend)

To add the floating microphone widget to your website, you do not need a backend. Simply add this script tag into your HTML. A call button will automatically appear in the bottom right corner of the page.

```html theme={null}
<script
  src="https://voice.trikon.tech/embed.js"
  data-public-key="YOUR_PUBLIC_KEY"
  data-agent-id="YOUR_AGENT_ID"
  async>
</script>
```

## 2. Trigger a Call (Backend)

To trigger an outbound call, your frontend must send the phone number to your own secure backend. Do not fetch phone numbers from Trikon; use the Phone Number UUID you saved from your settings.

Your backend route then places the call securely using your Secret API Key. Here is an example using a Next.js App Router API endpoint:

```typescript theme={null}
// app/api/trikon/outbound-call/route.ts
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const body = await request.json();
  const response = await fetch("https://voice.trikon.tech/api/outbound-call", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.TRIKON_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      to: body.to,
      name: body.name ?? "Customer",
      agentId: process.env.TRIKON_AGENT_ID,
      enterprise: process.env.TRIKON_WORKSPACE_SLUG,
      from: process.env.TRIKON_PHONE_RECORD_ID,
    }),
  });
  
  const data = await response.json();
  return NextResponse.json(data, {
    status: response.ok ? 200 : response.status,
  });
}
```

## 3. Logs of Calls (Webhook Receiver)

<Note>
  There is no API endpoint to fetch call history. Trikon uses Webhooks to automatically push data to you.
</Note>

Every time a call finishes, Trikon sends the details (duration, status, recording URL, and transcript) directly to your server. Your job is to listen for this payload, save it to your database, and then display it on your frontend.

Here is a simplified example of how this works:

```javascript theme={null}
// 1. A simple list acting as your database
let callLogs = [];

// 2. The Webhook Receiver (Configure this URL in Trikon Settings)
app.post('/api/trikon/webhook', (req, res) => {
  res.sendStatus(200); // Immediately tell Trikon "got it"
  callLogs.push(req.body); // Save the call info to your database
});

// 3. Your Frontend Data Fetcher
app.get('/api/dashboard/call-logs', (req, res) => {
  res.json(callLogs); // Your dashboard UI reads from here!
});
```

## Appendix: AI Prompt for Developers

To build this dashboard in record time, paste the exact prompt below into Cursor, Claude, or ChatGPT. It will automatically scaffold a beautiful, fully functional dashboard using modern web standards.

> Context: Build a full-stack dashboard that connects to the Trikon Voice API using Next.js (App Router) and custom Vanilla CSS (in globals.css). Define all necessary TypeScript interfaces (including Agent, CallLog, PhoneNumber, and PaginatedResponse) in a types/trikon.ts file to ensure the build does not fail.
>
> Design & Aesthetics (CRITICAL): Do not build a generic, ugly prototype. The UI must feel like a premium, modern B2B SaaS application.
>
> Colors: Use a clean light mode with a vibrant primary brand color (e.g., #2b1bc9). Use subtle gray borders (#e5e7eb) and off-white backgrounds (#fafafa) for contrast.
>
> Typography: Use Inter or a modern sans-serif font.
>
> Layout: Build a fixed left-side navigation bar using lucide-react icons. The main content area should have a max-width, clean padding, and use rounded cards (border-radius: 8px, subtle shadows) to display content.
>
> Components: Use badge pills for statuses, subtle hover effects on buttons and table rows, and clean empty-state UI blocks (info-boxes) with light pastel backgrounds.
>
> Architecture & Environment: Keep secrets out of the browser. Use a .env.local file containing:
> TRIKON\_API\_KEY
> TRIKON\_AGENT\_ID
> TRIKON\_WORKSPACE\_SLUG
> TRIKON\_PHONE\_RECORD\_ID
> NEXT\_PUBLIC\_TRIKON\_PUBLIC\_KEY
> NEXT\_PUBLIC\_TRIKON\_AGENT\_ID
> NEXT\_PUBLIC\_DEMO\_MODE
>
> Feature 1: Left Sidebar & Overview Page The sidebar should contain 4 links: Overview, Embed Agent, Trigger a Call, Call Logs. The Overview page should have a clean header and a grid of clickable Quick Link cards pointing to the other three pages.
>
> Feature 2: Embed Agent Page Create a simple demo page. Embed this exact script tag into the page so a floating microphone widget appears in the bottom right of the browser. Remember to use process.env.NEXT\_PUBLIC\_TRIKON\_PUBLIC\_KEY and process.env.NEXT\_PUBLIC\_TRIKON\_AGENT\_ID so the keys aren't hardcoded in the source file:
>
> ```html theme={null}
> <script src="https://voice.trikon.tech/embed.js" data-public-key="YOUR_PUBLIC_KEY" data-agent-id="YOUR_AGENT_ID" data-position="right" async></script>
> ```
>
> Feature 3: Trigger a Call Page Build a clean, modern form in a card asking for a Phone Number and an optional Recipient Name. When submitted, show a loading spinner on the button. Call a secure Next.js backend Route Handler (POST /api/trikon/outbound-call). The backend route must take the name and phone number, and make a server-side request to: POST [https://voice.trikon.tech/api/outbound-call](https://voice.trikon.tech/api/outbound-call) Headers: Authorization: Bearer YOUR\_SECRET\_API\_KEY Body:
>
> ```json theme={null}
> {
>   "to": "phone_number",
>   "name": "name",
>   "agentId": "YOUR_AGENT_ID",
>   "enterprise": "YOUR_WORKSPACE_SLUG",
>   "from": "YOUR_PHONE_RECORD_ID"
> }
> ```
>
> Show a visually distinct Success (green) or Error (red) card below the form based on the response.
>
> Feature 4: Call Logs (Webhook Receiver) There is no API to fetch call logs. You must build a Webhook Receiver. Create a Next.js route (POST /api/trikon/webhook) that accepts JSON payloads from Trikon, responds immediately with 200 OK, and saves the payload into a local file (data/call-logs.json). Create a Call Logs frontend page that reads from this JSON file (via an internal GET /api/dashboard/call-logs endpoint). Display the data in a beautiful, modern data table with columns for: Date, To, Status (using colored badges), and Duration. Build a Call Detail Modal to display transcript chat bubbles, audio player, and AI summary when a log is clicked.