Advanced Widget Parameters

These are data attributes supported by the Wonderchat embed script (wonderchat.js and wonderchat-seo.js) that are not configurable from the Embed Chatbot Modal UI. They can be manually added to the script tag by developers for advanced use cases.

---

data-greeting

Sets a custom greeting message that appears as a popup above the widget button.

<script src="..." data-greeting="Hi there! How can I help you today?"></script>

Why it's useful: Override the greeting message configured in the dashboard for a specific page or embed instance. For example, showing a different greeting on a pricing page vs. a docs page.

There is also a legacy greeting attribute (without the data- prefix) that works the same way. data-greeting takes priority.

---

data-header-hidden

Hides the chat widget header bar when the widget is open.

<script src="..." data-header-hidden="true"></script>

Why it's useful: When embedding in contexts where you want a more minimal/seamless look, or when the header is redundant because the surrounding page already identifies the chatbot.

---

data-context

Passes arbitrary context text to the chatbot that gets included with every message. The chatbot can use this context to tailor responses.

<script
  src="..."
  data-context="The user is viewing the Enterprise pricing page"
></script>

Why it's useful: Give the chatbot page-specific context so it can provide more relevant answers. For example, telling the chatbot which product page the user is on, or passing CRM segment data about the visitor.

---

data-user-id

Identifies the current user with a unique ID. When set, chat history is stored separately per user ID and the ID is passed to the widget for tracking.

<script src="..." data-user-id="user_abc123"></script>

Why it's useful: For authenticated sites where you want chat history to persist per user rather than per browser. Ensures users see their own conversation history when they log in from different devices.

---

data-hidden

Completely hides the widget button. The widget is still loaded and can be opened programmatically via window.toggleChat(true).

<script src="..." data-hidden="true"></script>

Why it's useful: When you want to trigger the chatbot from your own custom button or link instead of using the default floating button. Build your own UI trigger while still using the Wonderchat widget.

---

data-initial-hidden

Initially hides the widget button on page load. Unlike data-hidden, the widget can later be shown by calling window.showWidget() or window.wonderchat.showWidget().

<script src="..." data-initial-hidden="true"></script>

Why it's useful: Conditionally show the widget based on user behavior or custom logic. For example, only show the widget after a user scrolls down the page, or after they've been on the site for a certain amount of time:

setTimeout(() => window.wonderchat.showWidget(), 30000);

---

data-z-index

Sets a custom z-index for the widget wrapper. Defaults to 2147483646 if not set.

<script src="..." data-z-index="9999"></script>

Why it's useful: Resolves z-index conflicts with other fixed/sticky elements on the page (navigation bars, other chat widgets, cookie banners, etc.).

---

data-delay

Delays widget initialization by the specified number of milliseconds. Only applies to the non-SEO (full) widget; the SEO/lightweight widget handles its own delay.

<script src="..." data-delay="3000"></script>

Why it's useful: Avoid overwhelming your users with too many popups at once. If your website already has other popups like cookie banners, consent dialogs, or promotional modals, use this to delay the chatbot widget so it appears after those have been dismissed or acknowledged.

---

data-default-language

Sets the widget's initial language. Takes priority over data-language.

<script src="..." data-default-language="Spanish"></script>

Why it's useful: An alternative to data-language with higher priority. The embed modal generates data-language; this attribute gives manual control that won't be overridden.