İç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 Anahtarı 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 İsteği (TypeScript)

// Tip tanımları
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 alma fonksiyonu
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(`Token alma başarısız: ${response.statusText}`);
  }

  return response.json();
}

// Kullanım
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:

Kurulum

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

Ardından bağlantıyı kurun:

LiveKit Bağlantısı

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

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

  // Bağlantı olaylarını dinle
  room.on(RoomEvent.Connected, () => {
    console.log('Asistana bağlanıldı');
  });

  room.on(RoomEvent.Disconnected, () => {
    console.log('Bağlantı kesildi');
  });

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

  // Odaya bağlan
  await room.connect(url, token);

  // Mikrofonu etkinleştir
  await room.localParticipant.setMicrophoneEnabled(true);

  return room;
}

// Kullanım
const room = await connectToAssistant(
  tokenData.data.url,
  tokenData.data.token
);

// Aramayı sonlandırmak için
await room.disconnect();

Tam Örnek

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

app.ts - Basit Web Çağrısı

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. Token al
    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 hatası: ${response.statusText}`);
    }

    const { data } = await response.json();
    console.log('Arama başlatıldı:', data.callId);

    // 2. LiveKit odası oluştur
    const room = new Room({
      audioCaptureDefaults: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
      }
    });

    // 3. Olayları dinle
    room.on(RoomEvent.Connected, () => {
      console.log('✅ Asistana bağlandı');
    });

    room.on(RoomEvent.TrackSubscribed, (track) => {
      if (track.kind === 'audio') {
        const audioElement = track.attach();
        document.body.appendChild(audioElement);
        console.log('🔊 Asistan sesi alınıyor');
      }
    });

    room.on(RoomEvent.Disconnected, () => {
      console.log('❌ Bağlantı kesildi');
    });

    // 4. Bağlan
    await room.connect(data.url, data.token);

    // 5. Mikrofonu aç (hata yönetimi ile)
    try {
      await room.localParticipant.setMicrophoneEnabled(true);
      console.log('🎤 Mikrofon açık - Konuşabilirsiniz');
    } catch (error) {
      console.error('Mikrofon erişimi reddedildi:', error);
      throw new Error('Mikrofon erişimi gerekli. Lütfen tarayıcı ayarlarından izin verin.');
    }

    return room;
  } catch (error) {
    console.error('Arama başlatılamadı:', error);
    throw error;
  }
}

// Kullanım
const room = await startVoiceCall();

// Aramayı sonlandırmak için
// 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