Example: Dashboard Integration Guide

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

​

Prerequisites: What You Need

• 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)

<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)

// 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)

// 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

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:

<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 Headers: Authorization: Bearer YOUR_SECRET_API_KEY Body:

{
  "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.