AstroAPI

Appearance

Web Sitenize Widget Ekleme ​

Bu kılavuz, web sitenize bir AstroAPI widget'ı veya chatbot'u nasıl ekleyeceğinizi gösterir — programlama bilgisi gerekmez. Panelinizden tek bir kod parçacığını kopyalayıp web sitesi oluşturucunuza yapıştırırsınız.

WordPress, Wix, Squarespace, Shopify ve Webflow için adım adım talimatların yanı sıra her web sitesinde çalışan genel bir yöntem de içerir.

Teknik widget API'sini mi arıyorsunuz?

Bu kılavuz, hazır bir gömme kodunu sitenize yapıştırmakla ilgilidir. Widget'ları API üzerinden oluşturmak ve yapılandırmak için Gömülebilir Widget'lar sayfasına bakın. Chatbot API'si için Yapay Zekâ Chatbot sayfasına bakın.

Adım 1: Gömme Kodunuzu Alın ​

  1. AstroAPI paneline giriş yapın.
  2. Widgets bölümüne gidin (yapay zekâ chatbot'u için Chatbots) ve gömmek istediğiniz widget'ı açın.
  3. İstediğiniz gibi göründüğünü kontrol etmek için Preview sekmesini kullanın. Renkler, yazı tipleri ve düzen burada, panelde yapılandırılır — kodda değil — böylece widget'ın stilini daha sonra web sitenize dokunmadan değiştirebilirsiniz.
  4. Embed sekmesini açın ve gömme kodunu kopyalayın. Kod şuna benzer:
html
<script
  src="https://api.astroapi.cloud/widgets/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-api-key"
  data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>

Chatbot gömme kodu, <div> içermeyen tek bir script etiketidir:

html
<script
  src="https://api.astroapi.cloud/widget.js"
  data-chatbot-id="your-chatbot-id"
  data-api-key="your-api-key"
></script>

İhtiyacınız olan tek kod budur. Aşağıdaki bölümler, platform bazında bu kodu nereye yapıştıracağınızı gösterir.

API anahtarınızı güvende tutun

Gömme kodu bir API anahtarı içerir. Yalnızca widget veya chatbot izinlerine sahip bir anahtar kullanın — asla ana API anahtarınızı kullanmayın. Panelde API Keys altında kısıtlı anahtarlar oluşturabilir ve Chatbots → Security altında chatbot'u kendi alan adlarınızla sınırlayabilirsiniz.

WordPress ​

Seçenek A: Custom HTML bloğu (önerilen) ​

  1. Widget'ın görüneceği sayfayı veya yazıyı düzenleyin.
  2. Blok eklemek için + düğmesine tıklayın ve Custom HTML araması yapın.
  3. Gömme kodunu bloğa yapıştırın.
  4. Sonucu kontrol etmek için Preview'a, ardından Update veya Publish düğmesine tıklayın.

Seçenek B: Site genelinde (chatbot için) ​

Chatbot'u her sayfada göstermek için:

  1. WPCode gibi hafif bir header/footer eklentisi kurun veya temanızın "custom scripts" seçeneğini kullanın — tema dosyalarını düzenlemeye gerek yoktur.
  2. Chatbot gömme kodunu Footer bölümüne (</body> etiketinden önce) yapıştırın.
  3. Kaydedin. Chatbot balonu artık her sayfada görünür.

Elementor

Elementor mu kullanıyorsunuz? Sayfanıza bir HTML widget'ı ekleyin ve gömme kodunu oraya yapıştırın.

Wix ​

  1. Wix düzenleyicisinde, sol kenar çubuğundaki Add Elements (+ düğmesi) seçeneğine tıklayın.
  2. Embed Code → Embed HTML seçeneğini seçin.
  3. Enter Code'a tıklayın ve gömme kodunu yapıştırın.
  4. Apply'a tıklayın ve çerçeveyi widget'a uyacak şekilde sürükleyin/yeniden boyutlandırın.
  5. Publish'e tıklayın.

Wix'te Chatbot

Wix, gömülü HTML'i bir çerçeve içinde işler; bu da chatbot balonunu o çerçeveyle sınırlar. Site genelinde bir chatbot için bunun yerine Settings → Custom Code kullanın (ücretli bir Wix planı gerektirir): chatbot gömme kodunu yapıştırın, All pages üzerinde yüklenecek şekilde ayarlayın ve Body - end konumuna yerleştirin.

Squarespace ​

  1. Widget'ın görüneceği sayfayı düzenleyin.
  2. Bir ekleme noktasına tıklayın ve Code bloğunu seçin.
  3. Gömme kodunu yapıştırın (varsayılan HTML modunu koruyun).
  4. Sayfayı kaydedin.

Site genelinde bir chatbot için Settings → Advanced → Code Injection bölümüne gidin ve chatbot gömme kodunu Footer alanına yapıştırın.

WARNING

Kod blokları ve kod enjeksiyonu, Squarespace Business planı veya üzerini gerektirir.

Shopify ​

  1. Shopify yönetim panelinde Online Store → Themes bölümüne gidin.
  2. Mevcut temanızda Customize düğmesine tıklayın.
  3. Widget'ın görüneceği sayfaya bir Custom Liquid bölümü (veya temanıza bağlı olarak bir HTML bloğu) ekleyin.
  4. Gömme kodunu yapıştırın ve Save'e tıklayın.

Site genelinde bir chatbot için:

  1. Online Store → Themes → ⋯ → Edit code bölümüne gidin.
  2. layout/theme.liquid dosyasını açın.
  3. Chatbot gömme kodunu kapanış </body> etiketinin hemen önüne yapıştırın.
  4. Save'e tıklayın.

Webflow ​

  1. Webflow tasarımcısında, bir Embed öğesini (Add Elements → Components bölümünden) sayfanıza sürükleyin.
  2. Gömme kodunu kod düzenleyicisine yapıştırın ve Save & Close'a tıklayın.
  3. Sitenizi yayınlayın. Özel kod yalnızca yayınlanan sitede çalışır, tasarımcı önizlemesinde çalışmaz.

Site genelinde bir chatbot için Site Settings → Custom Code bölümüne gidin ve chatbot gömme kodunu Footer Code alanına yapıştırın.

WARNING

Webflow'da özel kod, ücretli bir site planı gerektirir.

Diğer Herhangi Bir Web Sitesi ​

HTML'i doğrudan siz (veya web geliştiriciniz) yönetiyorsanız:

  1. Sayfanın HTML dosyasını veya şablonunu açın.
  2. Widget gömme kodunu, sayfada widget'ın görüneceği yere yapıştırın.
  3. Chatbot için, gömme kodunu kapanış </body> etiketinin hemen önüne yapıştırın — yüzen bir balon olarak işlendiğinden HTML'deki konumu önemli değildir.

Sorun Giderme ​

Widget alanı boş kalıyor. Gömme kodunun her iki parçasının da yapıştırıldığını kontrol edin: <script> etiketi ve altındaki <div>. Bazı sayfa oluşturucular ikisinden birini kaldırır.

"Invalid API key" hatası veya hiçbir şey yüklenmiyor. Gömme kodundaki API anahtarı iptal edilmiş veya doğru izinlere sahip olmayabilir. Panelin Embed sekmesinden yeni bir gömme kodu kopyalayın.

Chatbot yayınlanan sitemde görünmüyor. Chatbot'u belirli alan adlarıyla sınırladıysanız (Chatbots → Security → Allowed domains), web sitenizin alan adının listede olduğundan emin olun — siteniz kullanıyorsa www. varyantı dâhil.

Widget önizlemeden farklı görünüyor. Stil, panel yapılandırmasından gelir ve widget ile birlikte yüklenir. Tasarımı yakın zamanda değiştirdiyseniz, tarayıcı önbelleğini atlamak için sayfayı zorla yenileyin (Ctrl+Shift+R / Cmd+Shift+R).

Masaüstünde çalışıyor ama uygulamamın webview'ında çalışmıyor. Gömme kodunun astroapi.cloud alan adından JavaScript çalıştırması gerekir. Uygulamanızın veya sitenizin güvenlik politikasının (CSP) bu alan adından gelen script'lere izin verdiğinden emin olun.

Sonraki Adımlar ​

AstroAPI Documentation

Copyright © 2026 AstroAPI