Start with the generated snippet

Use the installation area for the authoritative configuration. The public loader script uses data-widget-id to identify the chatbot. That identifier is not a secret credential and does not authorise access to private management features. The optional data-lang attribute specifies the language requested by the embed.

Inline mode

An inline embed uses data-mode="inline" and data-container to identify an existing container. Give that container a usable height and width. The example below illustrates the structure; use the dashboard-generated identifier and dimensions for a real installation.

<div id="shop-chat" style="height: 640px; max-width: 100%;"></div>
<script async
  src="https://www.shopflare.ai/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-mode="inline"
  data-container="#shop-chat">
</script>

Test placement and isolation

Keep the widget inside the intended layout and test it at mobile widths. A fixed container must allow the chat's internal scrolling and input to remain usable. Avoid installing floating and inline snippets for the same experience at the same time. Do not substitute custom API origins or local development addresses in production snippets.

A note on availability

Dashboard labels may currently be in German. Available controls and modules depend on your package and release. If a control described here is missing, check your workspace or contact support.