DokümanlarOtomasyon ve entegrasyonChat widget ekleme

Chat widget ekleme

Tek bir <script> etiketiyle DMtoLead chat widget'ını herhangi bir web sitesine ekleyin. Aşağıda tüm data-* nitelikleri için eksiksiz referansı bulabilirsiniz.

Canlı örnek

DMtoLead'in kendi pazarlama sitesi de bu widget'ı kullanır (dmtolead.com sitesinin sol altındaki sohbet düğmesi). Yapılandırma layout.js içindedir; inceleyebilirsiniz.

Minimal ekleme kodu (2 nitelik)

Widget minimum data-user ve data-automation ister. İkisini de dashboard'daki Embed settings altında bulabilirsiniz.

html

<script
  src="https://dmtolead.com/embed/widget.js"
  data-user="YOUR_WORKSPACE_ID"
  data-automation="YOUR_AUTOMATION_ID"
  async
></script>

Sitenizin HTML'inde herhangi bir yere yapıştırın; genellikle </body> öncesi tercih edilir. Script eşzamansız yüklenir ve sayfanın oluşturulmasını engellemez.

Yaygın niteliklerle tam ekleme kodu

html

<script
  src="https://dmtolead.com/embed/widget.js"
  data-user="YOUR_WORKSPACE_ID"
  data-automation="YOUR_AUTOMATION_ID"

  data-primaryColor="#ccff00"
  data-bgColor="#0a0a0a"
  data-userBubble="#ccff00"
  data-botBubble="#1a1a1a"
  data-userText="#000000"
  data-botText="#ffffff"
  data-headerBg="#ccff00"
  data-headerText="#000000"

  data-botName="Acme Bot"
  data-logoIcon="Bot"

  data-position="bottom-right"
  data-fabSize="56"
  data-windowWidth="360"
  data-windowHeight="420"
  data-borderRadius="16"
  data-fontFamily="Inter, system-ui, -apple-system, sans-serif"
  data-fontSize="14"
  data-launcherStyle="button"
  data-launcherAnimation="pulse"

  data-welcomeMsg="Hi! Ask me anything about our products or shipping."
  data-placeholder="Type a message..."
  data-typingText="Acme is typing"
  data-statusText="Online - replies in 2s"
  data-poweredByText="Powered by DMtoLead"
  data-poweredByLink="https://dmtolead.com"

  data-preChatEnabled="false"
  data-showReset="true"
  data-showOnlineDot="true"
  data-onlineColor="#22c55e"

  async
></script>

Desteklenen tüm nitelikler

Aşağıdaki her nitelik, script etiketi üzerindeki bir data-* niteliğine birebir karşılık gelir. Değerler metindir (HTML nitelikleri her şeyi metne dönüştürür).

Kimlik doğrulama (zorunlu)

Nitelik	Açıklama
data-user	Çalışma alanı kimliği. Dashboard'daki Embed settings alanından alınır.
data-automation	Widget'ın yönleneceği otomasyonun kimliği. Tek otomasyonunuz varsa isteğe bağlıdır.

Tema - renkler

Nitelik	Açıklama
data-primaryColor	Ana marka rengi (hex). Varsayılan: #ccff00.
data-secondaryColor	İkincil renk (hex).
data-accentColor	Vurgu rengi (hex).
data-bgColor	Widget arka planı (hex).
data-userBubble	Kullanıcı mesaj balonu rengi (hex).
data-botBubble	Bot mesaj balonu rengi (hex).
data-userText	Kullanıcı mesajı metin rengi (hex).
data-botText	Bot mesajı metin rengi (hex).
data-headerBg	Widget başlığı arka planı (hex).
data-headerText	Widget başlığı metin rengi (hex).

Bot kimliği

Nitelik	Açıklama
data-botName	Widget başlığında görünen ad. Örn. "Acme Support".
data-logoUrl	Logo görselinizin tam URL'si (40 × 40 px önerilir).
data-logoIcon	logoUrl boşken kullanılan Lucide simge adı. Örn. "Bot", "MessageCircle", "Sparkles".

Yerleşim ve davranış

Nitelik	Açıklama
data-position	Widget konumu. "bottom-left" veya "bottom-right". Varsayılan: "bottom-left".
data-fabSize	Yüzen düğme boyutu (piksel). Varsayılan: "56".
data-windowWidth	Sohbet penceresi genişliği (piksel). Varsayılan: "360".
data-windowHeight	Sohbet penceresi yüksekliği (piksel). Varsayılan: "520".
data-borderRadius	Pencere köşe yarıçapı (piksel). Varsayılan: "0" (keskin köşeli).
data-fontFamily	CSS font-family yığını. Varsayılan: "Inter, system-ui, -apple-system, sans-serif".
data-fontSize	Temel yazı boyutu (piksel). Varsayılan: "14".
data-launcherStyle	"button" veya "label". Varsayılan: "button".
data-launcherAnimation	"pulse", "bounce" veya "none". Varsayılan: "pulse".
data-triggerOnScroll	Kullanıcı sayfanın yüzde kaçını kaydırdığında widget'ın görünmesini belirler. Varsayılan: "60".

Sohbet öncesi formu

Nitelik	Açıklama
data-preChatEnabled	"true" ise sohbet başlamadan önce iletişim formunu gösterir. Varsayılan: "false".
data-preChatRequireName	"true" ise ad zorunludur. Varsayılan: "true" (preChat açıksa anlamlıdır).
data-preChatRequireEmail	Varsayılan: "true".
data-preChatRequirePhone	Varsayılan: "false".
data-preChatTitle	Sohbet öncesi form başlığı.
data-preChatSubtitle	Sohbet öncesi form alt başlığı.
data-preChatSubmitLabel	Gönder düğmesinin etiketi.
data-preChatNameLabel	Ad alanının etiketi.
data-preChatEmailLabel	E-posta alanının etiketi.
data-preChatPhoneLabel	Telefon alanının etiketi.

Metinler

Nitelik	Açıklama
data-welcomeMsg	Sohbet açıldığında botun göndereceği ilk mesaj.
data-placeholder	Giriş alanının yer tutucu metni.
data-typingText	AI yazarken görünen metin. Örn. "Acme yazıyor...".
DMtoLead markası	Sabit "Powered by DMtoLead" alt bilgisi her zaman görünür.
data-launcherLabel	Yüzen düğmenin ipucu metni.
data-statusText	Bot adının altındaki durum satırı. Örn. "Online - 2 sn'de yanıtlar".
data-suggestedReplies	Karşılama ekranında görünen {label, message} öneri düğmeleri için JSON dizisi.

Gösterge ayarları

Nitelik	Açıklama
data-showReset	"true" ise "reset conversation" düğmesini gösterir. Varsayılan: "true".
data-showOnlineDot	"true" ise başlatıcı üzerinde yeşil çevrimiçi noktasını gösterir. Varsayılan: "true".
data-onlineColor	Çevrimiçi nokta rengi (hex). Varsayılan: "#22c55e".

Tek sitede birden fazla dil

İki script etiketi ekleyin; her birinde farklı metin nitelikleri (ideal olarak dile uygun kişilikler için farklı otomasyon kimlikleri) kullanın. Sayfanın diline göre doğru olanı yüklemek için küçük bir satır içi script kullanın:

html

<script>
  const lang = document.documentElement.lang || 'en';
  const s = document.createElement('script');
  s.src = 'https://dmtolead.com/embed/widget.js';
  s.async = true;
  s.dataset.user = 'YOUR_WORKSPACE_ID';
  s.dataset.automation = lang === 'tr' ? 'TR_AUTOMATION_ID' : 'EN_AUTOMATION_ID';
  s.dataset.welcomeMsg = lang === 'tr' ? 'Merhaba!' : 'Hi!';
  document.head.appendChild(s);
</script>

Potansiyel müşteri toplama sitelerinde sohbet öncesi form

Sohbet başlamadan önce ad ve e-posta almak için data-preChatEnabled="true" değerini kullanın. Toplanan iletişim bilgisi DMtoLead gelen kutunuzdaki konuşmaya eklenir; widget bir ürün sayfasındaysa ve sohbet bir satış potansiyeli yaratıyorsa özellikle kullanışlıdır.

AI'ı eğitin

Bu widget'ın yönleneceği otomasyonu ayarlayın.

Giden webhooklar

Yeni widget konuşmalarını CRM'inize gönderin.

Fiyatlandırma ve krediler

Widget yanıtları da diğer kanallarda olduğu gibi yanıt başına 1 kredi kullanır.

Randevu ve aksiyonlar

Giden webhook'lar