Gömme: Santrali Yazılımınıza Yerleştirin

CRM'iniz, teknik servis programınız ya da herhangi bir web uygulamanız varsa santral ekranlarını ve web telefonunu kendi arayüzünüzün içinde açabilirsiniz. Canlı çağrılar, arama kayıtları, ses kayıtları, mola, otomatik arama, numara engelleme ve tarayıcı telefonu bu yolla gömülebilir.

PHP gerekmez. Düz HTML, jQuery, React ya da herhangi bir çatı ile çalışır. Ekranlar yalnızca sizin belirlediğiniz alan adlarında açılır.

Temel adres: https://api.buluthat.com

1. Gömme kodu oluşturun

Panelde Abonelik İşlemleri > Gömme Kodları (CRM) sayfasını açın. Bayiyseniz bu işi Bayi Paneli > Gömme ve API sayfasından, müşteriyi seçerek yaparsınız.

Gömme kodunuz wk_ ile başlar. Bu kod gizli değildir; sayfanızın kaynağında görünür. Güvenlik izinli alan adı listesinden ve aşağıdaki giriş yöntemlerinden gelir.

2. Kodu sayfanıza yapıştırın

Tek satır

<div id="santral" style="height:720px"></div>
<script src="https://api.buluthat.com/assets/js/embed.js" data-key="wk_..." data-page="live_monitor" data-target="#santral"></script>

jQuery

<script src="https://api.buluthat.com/assets/js/embed.js"></script>
<script>
  $(function () {
    var santral = $('#santral').buluthat({ key: 'wk_...', page: 'report_calls' }).data('buluthat');
  });
</script>

Düz iframe

<iframe src="https://api.buluthat.com/embed.php?w=wk_...&page=live_monitor"
        style="width:100%;height:720px;border:0" allow="microphone; autoplay"></iframe>

Web telefonu için iframe'de allow="microphone" şarttır. embed.js bunu kendisi ekler.

3. Ekranlar

4. Kimlik doğrulama

a) iframe içinde giriş

Varsayılan yöntemdir. Kullanıcı ilk açılışta e-posta ve şifresini çerçevenin içine yazar; iki adımlı doğrulama açıksa kod da sorulur. Oturum yalnızca bu gömme koduna ve seçili ekranlara geçerlidir.

Bazı tarayıcılar (özellikle Safari) başka sitenin çerçevesindeki çerezleri tamamen engeller. Bu durumda giriş ekranında Yeni pencerede aç bağlantısı çıkar. Kalıcı çözüm için imzalı link kullanın.

b) Sunucudan imzalı link (önerilen)

CRM kullanıcınız zaten kendi sisteminizde oturum açmıştır. Sunucunuz Buluthat'tan o kullanıcı için 2 dakika geçerli, tek kullanımlık bir giriş linki alır ve iframe'in src değerine verir. Kullanıcı ayrıca şifre girmez.

Anahtar: Müşteri hesabında API Anahtarları sayfasından Gömme kapsamlı bir anahtar üretin. Bayiyseniz Bayi Paneli > Gömme ve API > Bayi API anahtarı kullanın; bu anahtar size bağlı tüm müşteriler için geçerlidir. Anahtar yalnızca sunucunuzda durur, tarayıcıya gitmez.

curl -X POST 'https://api.buluthat.com/api/embed.php?action=session' \
  -H 'Authorization: Bearer bt_...' \
  -H 'Content-Type: application/json' \
  -d '{"widget":"wk_...","user_email":"temsilci@firma.com","extension":"1000","page":"webphone"}'

Bayi anahtarıyla aynı istek şöyle yapılır:

curl -X POST 'https://api.buluthat.com/api/embed.php?action=session' \
  -H 'X-Bt-Partner-Key: bp_...' -H 'Content-Type: application/json' \
  -d '{"tenant_id":123,"user_email":"temsilci@musteri.com","page":"live_monitor"}'

Kullanıcı verilmezse gömme kodundaki girişsiz kullanıcı, o da yoksa müşteri yetkilisi kullanılır.

Cevap:

{ "ok": true, "url": "https://api.buluthat.com/embed.php?w=wk_...&sso=...", "expires_in": 120, "user": "temsilci@firma.com" }

PHP örneği:

$ch = curl_init('https://api.buluthat.com/api/embed.php?action=session');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Authorization: Bearer ' . getenv('BULUTHAT_KEY'), 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => json_encode(['widget' => 'wk_...', 'user_email' => $kullanici['email'], 'page' => 'live_monitor']),
]);
$cevap = json_decode(curl_exec($ch), true);
echo '<iframe src="' . htmlspecialchars($cevap['url']) . '" style="width:100%;height:720px;border:0" allow="microphone"></iframe>';

Diğer uçlar:

• GET ?action=widgets: gömme kodlarını listeler. Bayi anahtarıyla tenant_id gerekir.
• GET ?action=ping: anahtarı sınar.

c) Girişsiz mod

Gömme kodu seçtiğiniz kullanıcı olarak şifresiz açılır. Bunun için iki koşul var:

• İstek izinli alan adınızın çerçevesinden gelmelidir.
• İsterseniz IP listenizden gelmesi de şart koşulabilir.

Uyarı: wk_ kodu sayfa kaynağında durduğu için bu mod düşük güvenliklidir. Yalnızca kendi iç ağınızdaki ekranlar için, yetkisi kısıtlı bir personel hesabıyla kullanın.

5. JavaScript API ve olaylar

var s = Buluthat.mount('#tel', { key: 'wk_...', page: 'webphone' });

s.dial('05321234567');           // web telefonundan ara
Buluthat.dial('05321234567');    // sayfadaki ilk web telefonundan ara
s.go('report_calls');            // ekran değiştir

s.on('call', function (c) {
  // c.state: idle | ringing | dialing | incall ; c.number: karşı numara
  if (c.state === 'ringing') { musteriKartiniAc(c.number); }
});
s.on('ready', function (d) { /* ekran yüklendi: d.page */ });
s.on('resize', function (d) { /* içerik yüksekliği: d.height */ });

mount seçenekleri:

Tıkla-ara örneği (jQuery):

$('.musteri-telefon').on('click', function () { Buluthat.dial($(this).text()); });

Mesajlar yalnızca Buluthat sunucusunun adresinden kabul edilir. Buluthat da yalnızca izinli alan adlarınızdan gelen komutları dinler.

6. Güvenlik notları

• Gömme oturumu ayrı bir çerezde tutulur ve yalnızca seçili ekranları açar. Abonelik, ödeme, şifre ve API anahtarı ekranları gömmede hiçbir zaman açılmaz.
• Her giriş ve gömme kodu değişikliği müşterinin İşlem Geçmişi'ne yazılır.
• Bir gömme kodunu silmek ya da kapatmak, onu kullanan tüm sayfalarda ekranı anında kapatır.
• API anahtarınızı tarayıcı koduna, mobil uygulamaya ya da herkese açık depoya koymayın. Ayrıntı: API Güvenliği.