# 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.

```html
<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.

{% hint style="info" %}
There is also a legacy `greeting` attribute (without the `data-` prefix) that works the same way. `data-greeting` takes priority.
{% endhint %}

***

## `data-header-hidden`

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

```html
<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.

```html
<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.

```html
<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)`.

```html
<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()`.

```html
<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:

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

***

## `data-z-index`

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

```html
<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.

```html
<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`.

```html
<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.