İçindekiler

Web Embedding - Hızlı Başlangıç

AI ses asistanınızı web sitenize birkaç dakika içinde entegre edin

Web Embedding Nedir?

Web Embedding, Wespoke AI ses asistanlarınızı web sitenize veya uygulamanıza entegre etmenizi sağlayan bir özelliktir. Kullanıcılarınız telefon aramalarına ek olarak, doğrudan tarayıcılarından ses asistanınızla konuşabilir.

LiveKit WebRTC altyapısı kullanarak düşük gecikmeli, yüksek kaliteli ses bağlantıları sağlar. Tıpkı telefon aramaları gibi, web aramaları da kayıt edilir ve fiyatlandırma modelinize göre ücretlendirilir.

Kurulum Adımları

API Anahtarı Oluşturun

Kontrol panelinden bir API anahtarı oluşturun ve sitenizin domain adresini izin verilenler listesine ekleyin.

API Anahtarları Sayfasına Git

API anahtarınız şu formatta olacaktır:

API Key Format

pk_abc123def456ghi789...

LiveKit Token Alın

Backend'inizden /api/v1/embed/token endpoint'ine istek göndererek LiveKit bağlantı bilgilerini alın.

Token Request (TypeScript)

// Type definitions
interface TokenRequest {
  assistantId: string;
  metadata?: {
    userId?: string;
    sessionId?: string;
    customData?: Record<string, any>;
  };
}

interface TokenResponse {
  success: boolean;
  data: {
    callId: string;
    token: string;
    url: string;
    roomName: string;
    assistant: {
      id: string;
      name: string;
      version: number;
    };
  };
}

// Token request function
async function getWebCallToken(
  apiKey: string,
  assistantId: string,
  metadata?: TokenRequest['metadata']
): Promise<TokenResponse> {
  const response = await fetch('https://api.wespoke.ai/api/v1/embed/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      assistantId,
      metadata
    })
  });

  if (!response.ok) {
    throw new Error(`Failed to get token: ${response.statusText}`);
  }

  return response.json();
}

// Usage
const tokenData = await getWebCallToken(
  'pk_live_abc123...',
  'asst_xyz789',
  {
    userId: 'user-123',
    sessionId: 'session-456',
    customData: { source: 'website' }
  }
);

LiveKit ile Bağlanın

LiveKit Client SDK kullanarak token ile WebRTC bağlantısı kurun.

Önce LiveKit Client SDK'yı yükleyin:

Installation

npm install livekit-client
# veya
yarn add livekit-client

Ardından bağlantıyı kurun:

LiveKit Connection

import { Room, RoomEvent } from 'livekit-client';

async function connectToAssistant(
  url: string,
  token: string
): Promise<Room> {
  const room = new Room({
    audioCaptureDefaults: {
      echoCancellation: true,
      noiseSuppression: true,
      autoGainControl: true,
    }
  });

  room.on(RoomEvent.Connected, () => {
    console.log('Connected to assistant');
  });

  room.on(RoomEvent.Disconnected, () => {
    console.log('Disconnected');
  });

  room.on(RoomEvent.TrackSubscribed, (track) => {
    if (track.kind === 'audio') {
      const audioElement = track.attach();
      document.body.appendChild(audioElement);
    }
  });

  await room.connect(url, token);
  await room.localParticipant.setMicrophoneEnabled(true);

  return room;
}

const room = await connectToAssistant(
  tokenData.data.url,
  tokenData.data.token
);

// To end the call
await room.disconnect();

Tam Örnek

Tüm adımları birleştiren basit bir örnek:

app.ts - Simple Web Call

import { Room, RoomEvent } from 'livekit-client';

const API_KEY = 'pk_live_abc123...';
const ASSISTANT_ID = 'asst_xyz789';
const API_URL = 'https://api.wespoke.ai';

async function startVoiceCall() {
  try {
    // 1. Get token
    const response = await fetch(`${API_URL}/api/v1/embed/token`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      },
      body: JSON.stringify({
        assistantId: ASSISTANT_ID,
        metadata: {
          userId: 'user-123',
          source: 'website'
        }
      })
    });

    if (!response.ok) {
      throw new Error(`API error: ${response.statusText}`);
    }

    const { data } = await response.json();
    console.log('Call started:', data.callId);

    // 2. Create LiveKit room
    const room = new Room({
      audioCaptureDefaults: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
      }
    });

    // 3. Listen for events
    room.on(RoomEvent.Connected, () => {
      console.log('Connected to assistant');
    });

    room.on(RoomEvent.TrackSubscribed, (track) => {
      if (track.kind === 'audio') {
        const audioElement = track.attach();
        document.body.appendChild(audioElement);
      }
    });

    room.on(RoomEvent.Disconnected, () => {
      console.log('Disconnected');
    });

    // 4. Connect
    await room.connect(data.url, data.token);

    // 5. Enable microphone
    try {
      await room.localParticipant.setMicrophoneEnabled(true);
      console.log('Microphone enabled - You can speak now');
    } catch (error) {
      console.error('Microphone access denied:', error);
      throw new Error('Microphone access required.');
    }

    return room;
  } catch (error) {
    console.error('Failed to start call:', error);
    throw error;
  }
}

const room = await startVoiceCall();

// To end the call
// await room.disconnect();

Önemli Notlar

Güvenlik: API anahtarınızı backend'de saklayın, frontend'de açığa çıkarmayın
Domain Kontrolü: API anahtarınızın izin verilen domain listesine sitenizin adresini ekleyin
Kayıt: Web aramaları otomatik olarak kaydedilir (tıpkı telefon aramaları gibi)
Fiyatlandırma: Web aramaları, telefon aramaları ile aynı dakika başı fiyatlandırma modelini kullanır
Tarayıcı Desteği: Modern tarayıcılar (Chrome, Firefox, Safari, Edge) desteklenir
HTTPS Gerekli: WebRTC mikrofon erişimi için siteniz HTTPS üzerinden sunulmalıdır

Sıradaki Adımlar

API Referansı

Daha Fazla Örnek

API Anahtarlarınızı Yönetin