DokumanlarOtomasyon ve entegrasyonChat widget ekleme

Chat widget ekleme

Tek <script> tag ile DMtoLead chat widget'ini herhangi bir web sitesine ekleyin. Asagida tum data-* attribute'lari icin tam referans var.

Canli ornek

DMtoLead'in kendi marketing sitesi de bu widget'i kullanir (dmtolead.com sol alttaki chat butonu). Config bizim layout.js icindedir - inceleyebilirsiniz.

Minimal embed (2 attribute)

Widget minimum data-user ve data-automation ister. Ikisini de dashboard'da Embed settings altinda 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 yapistirin - genelde </body> oncesi tercih edilir. Script async yuklenir; sayfa render'ini bloklamaz.

Yaygin attribute'larla tam snippet

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="520"
  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 tum attribute'lar

Asagidaki her attribute script tag uzerindeki bir data-* attribute'una birebir karsilik gelir. Degerler string'dir (HTML attribute'lari her seyi string'e cevirir).

Auth (zorunlu)

Attribute	Aciklama
data-user	Workspace ID. Dashboard Embed settings alanindan alinir.
data-automation	Widget'in yonlenecegi Automation ID. Sadece bir otomasyonunuz varsa opsiyoneldir.

Tema - renkler

Attribute	Aciklama
data-primaryColor	Primary marka rengi (hex). Varsayilan: #ccff00.
data-secondaryColor	Secondary renk (hex).
data-accentColor	Accent renk (hex).
data-bgColor	Widget arka plani (hex).
data-userBubble	Kullanici mesaj balonu rengi (hex).
data-botBubble	Bot mesaj balonu rengi (hex).
data-userText	Kullanici mesaji text rengi (hex).
data-botText	Bot mesaji text rengi (hex).
data-headerBg	Widget header arka plani (hex).
data-headerText	Widget header text rengi (hex).

Bot kimligi

Attribute	Aciklama
data-botName	Widget header'da gorunen isim. Or. "Acme Support".
data-logoUrl	Logo gorselinizin tam URL'i (40x40px onerilir).
data-logoIcon	logoUrl bosken fallback Lucide icon adi. Or. "Bot", "MessageCircle", "Sparkles".

Layout ve davranis

Attribute	Aciklama
data-position	Widget konumu. "bottom-left" veya "bottom-right". Varsayilan: "bottom-left".
data-fabSize	Floating buton boyutu, piksel. Varsayilan: "56".
data-windowWidth	Chat penceresi genisligi, piksel. Varsayilan: "360".
data-windowHeight	Chat penceresi yuksekligi, piksel. Varsayilan: "520".
data-borderRadius	Pencere kose radius'u, piksel. Varsayilan: "0" (kare).
data-fontFamily	CSS font-family stack. Varsayilan: "Inter, system-ui, -apple-system, sans-serif".
data-fontSize	Base font size, piksel. Varsayilan: "14".
data-launcherStyle	"button" veya "label". Varsayilan: "button".
data-launcherAnimation	"pulse", "bounce" veya "none". Varsayilan: "pulse".
data-triggerOnScroll	Kullanici sayfanin yuzde kacini scroll edince widget gorunsun. Varsayilan: "60".

Pre-chat form

Attribute	Aciklama
data-preChatEnabled	"true" ise chat baslamadan once iletisim formu gosterir. Varsayilan: "false".
data-preChatRequireName	"true" ise isim zorunlu. Varsayilan: "true" (preChat aciksa anlamli).
data-preChatRequireEmail	Varsayilan: "true".
data-preChatRequirePhone	Varsayilan: "false".
data-preChatTitle	Pre-chat form basligi.
data-preChatSubtitle	Pre-chat form alt basligi.
data-preChatSubmitLabel	Submit butonu etiketi.
data-preChatNameLabel	Isim alani etiketi.
data-preChatEmailLabel	E-posta alani etiketi.
data-preChatPhoneLabel	Telefon alani etiketi.

Metinler

Attribute	Aciklama
data-welcomeMsg	Chat acildiginda botun gonderecegi ilk mesaj.
data-placeholder	Input placeholder metni.
data-typingText	AI yazarken gorunen metin. Or. "Acme yaziyor...".
data-poweredByText	Footer attribution metni.
data-showPoweredBy	"true" veya "false". Varsayilan: "true".
data-poweredByLink	"powered by" attribution link URL'i.
data-launcherLabel	Floating buton tooltip'i.
data-statusText	Bot ismi altindaki status satiri. Or. "Online - 2sn'de yanitlar".
data-suggestedReplies	Welcome ekraninda gorunen {label, message} suggested-reply chip'leri icin JSON array.

Gosterge ayarlari

Attribute	Aciklama
data-showReset	"true" ise "reset conversation" butonu gosterir. Varsayilan: "true".
data-showOnlineDot	"true" ise launcher uzerinde yesil online noktasi gosterir. Varsayilan: "true".
data-onlineColor	Online nokta rengi (hex). Varsayilan: "#22c55e".

Tek sitede birden fazla dil

Iki script tag embed edin; her biri farkli metin attribute'lariyla (ideal olarak dil uyumlu kisilikler icin farkli automation ID'leriyle). Sayfanin diline gore dogru olanini yuklemek icin kucuk inline script kullanin:

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>

Lead-gen sitelerinde pre-chat form

Chat baslamadan once isim + e-posta almak icin data-preChatEnabled="true" acin. Yakalanan iletisim bilgisi DMtoLead inbox'inizdaki konusmaya eklenir - widget bir urun sayfasindaysa ve chat satis lead'i ise cok kullanislidir.

AI'i egit

Bu widget'in yonlenecegi otomasyonu ayarlayin.

Giden webhooklar

Yeni widget konusmalarini CRM'inize gonderin.

Fiyatlandirma ve krediler

Widget yanitlari da diger kanallar gibi yanit basina 1 kredidir.

Onceki

Instagram yorumlari

Giden webhooklar