DocsAutomate & integrateEmbed the chat widget

Embed the chat widget

One <script> tag puts the DMtoLead chat widget on any website. Full reference for every data-* attribute below.

See it live

DMtoLead's own marketing site uses this widget (the chat button bottom-left of dmtolead.com). The config is in our layout.js — feel free to inspect.

Minimal embed (2 attributes)

The widget needs data-user and data-automation at minimum. Find both in your dashboard under Embed settings.

html

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

Paste anywhere in your site's HTML — just before </body> is conventional. The script is loaded async; it won't block your page render.

Full snippet with common attributes

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>

All supported attributes

Every attribute below maps 1:1 to a data-* attribute on the script tag. Strings only (HTML attributes coerce everything to strings).

Auth (required)

Attribute	Description
data-user	Workspace ID. Get this from your dashboard's Embed settings.
data-automation	Automation ID this widget should route to. Optional if you only have one automation.

Theme — colors

Attribute	Description
data-primaryColor	Primary brand color (hex). Default: #ccff00.
data-secondaryColor	Secondary color (hex).
data-accentColor	Accent color (hex).
data-bgColor	Widget background (hex).
data-userBubble	User message bubble color (hex).
data-botBubble	Bot message bubble color (hex).
data-userText	User message text color (hex).
data-botText	Bot message text color (hex).
data-headerBg	Widget header background (hex).
data-headerText	Widget header text (hex).

Bot identity

Attribute	Description
data-botName	Display name shown in the widget header. e.g. "Acme Support".
data-logoUrl	Full URL to your logo image (40×40px recommended).
data-logoIcon	Lucide icon name as fallback when logoUrl is empty. e.g. "Bot", "MessageCircle", "Sparkles".

Layout & behavior

Attribute	Description
data-position	Widget anchor. "bottom-left" or "bottom-right". Default: "bottom-left".
data-fabSize	Floating button size in pixels. Default: "56".
data-windowWidth	Chat window width in pixels. Default: "360".
data-windowHeight	Chat window height in pixels. Default: "520".
data-borderRadius	Window corner radius in pixels. Default: "0" (square).
data-fontFamily	CSS font-family stack. Default: "Inter, system-ui, -apple-system, sans-serif".
data-fontSize	Base font size in pixels. Default: "14".
data-launcherStyle	"button" or "label". Default: "button".
data-launcherAnimation	"pulse", "bounce" or "none". Default: "pulse".
data-triggerOnScroll	Show widget after the user scrolls this percent of the page. Default: "60".

Pre-chat form

Attribute	Description
data-preChatEnabled	"true" to show a contact-info form before chat starts. Default: "false".
data-preChatRequireName	"true" to require name. Default: "true" (only matters if preChat is enabled).
data-preChatRequireEmail	Default: "true".
data-preChatRequirePhone	Default: "false".
data-preChatTitle	Heading on the pre-chat form.
data-preChatSubtitle	Subheading on the pre-chat form.
data-preChatSubmitLabel	Submit-button label.
data-preChatNameLabel	Name field label.
data-preChatEmailLabel	Email field label.
data-preChatPhoneLabel	Phone field label.

Copy & text

Attribute	Description
data-welcomeMsg	First message the bot sends when chat opens.
data-placeholder	Input box placeholder.
data-typingText	Text shown while the AI is composing. e.g. "Acme is typing…".
data-poweredByText	Footer attribution text.
data-showPoweredBy	"true" or "false". Default: "true".
data-poweredByLink	URL the "powered by" attribution links to.
data-launcherLabel	Tooltip on the floating button.
data-statusText	Status line under the bot name. e.g. "Online — replies in 2s".
data-suggestedReplies	JSON array of {label, message} suggested-reply chips shown in the welcome screen.

Indicators

Attribute	Description
data-showReset	"true" to show a "reset conversation" button. Default: "true".
data-showOnlineDot	"true" to show a green online dot on the launcher. Default: "true".
data-onlineColor	Online-dot color (hex). Default: "#22c55e".

Multiple languages on one site

Embed two script tags, each with different copy attributes (and ideally different automation IDs for language-matched personalities). Use a tiny inline script to load the right one based on the page's language:

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>

Pre-chat form on lead-gen sites

Turn on data-preChatEnabled="true" to collect name + email before chat starts. The captured contact info attaches to the conversation in your DMtoLead inbox — useful when the widget is on a product page and the chat is a sales lead.

Train your AI

Configure the automation this widget routes to.

Outbound webhooks

Push new widget conversations into your CRM.

Pricing & credits

Widget replies cost the same as any channel: 1 credit each.

Instagram comments

Outbound webhooks