On this page
Data Attributes#
All SDK options can be set as data-* attributes on the script tag for a zero-JavaScript setup. This is the simplest integration method — no JavaScript code required.
Widget Configuration#
Core attributes that control which widget loads and how it behaves.
| Attribute | JS Property | Required | Description |
|---|---|---|---|
data-api-key | apiKey | Required | Your public widget API key (pk_live_...). |
data-mode | — | Optional | Deployment mode: "chatbox" or "bubble" (default). |
Bubble Styling#
Customize the floating bubble button appearance. These only apply when using bubble mode (the default).
| Attribute | JS Property | Default | Description |
|---|---|---|---|
data-bubble-color | bubbleColor | "#6366f1" | Background color of the floating button (6-digit hex color, e.g. #6366f1). |
data-bubble-size | bubbleSize | 56 | Diameter of the floating button in pixels (min 1px). |
data-bubble-icon | bubbleIcon | built-in chat icon | Custom bubble icon — an inline SVG string or an image URL. |
data-bubble-icon-size | bubbleIconSize | 43% of bubbleSize | Icon size in pixels. Defaults to ~43% of the bubble diameter (e.g. 24px for a 56px bubble). |
data-position | position | "bottom-right" | Corner to place the bubble and chat panel: "bottom-right" or "bottom-left". |
data-offset-bottom | offset.bottom | 20 | Distance from the bottom edge of the viewport in pixels. |
data-offset-right | offset.right | 20 | Distance from the right edge of the viewport in pixels (bottom-right position). |
data-offset-left | offset.left | 20 | Distance from the left edge of the viewport in pixels (bottom-left position). |
Visitor Identity#
Associate a visitor with your internal user for personalized conversations and cross-device history. See the User Sessions page for a complete guide on login and logout flows.
| Attribute | JS Equivalent | Description |
|---|---|---|
data-visitor-id | identify({ visitorId }) | Your internal user/customer ID. An empty value clears the in-memory identified state on page load but does not wipe iframe storage. For a full logout use Gydr.reset() programmatically. |
data-visitor-name | identify({ name }) | Visitor display name. Used for personalized greetings. |
data-visitor-email | identify({ email }) | Visitor email address. |
data-visitor-phone | identify({ phone }) | Visitor phone number. |
data-visitor-company | identify({ company }) | Visitor company or organization name. |
data-visitor-latitude | identify({ latitude }) | Optional. Visitor latitude in decimal degrees (-90 to 90). When paired with longitude, pre-fills the visitor's location and skips the in-chat location prompt for proximity questions. |
data-visitor-longitude | identify({ longitude }) | Optional. Visitor longitude in decimal degrees (-180 to 180). Must be provided together with latitude. |
Full Example#
A complete embed snippet using data attributes for styling, identity, and mode configuration.
<script
src="https://cdn.infinichat.dev/widget.js"
data-api-key="pk_live_YOUR_KEY"
data-mode="bubble"
data-bubble-color="#10b981"
data-bubble-size="64"
data-bubble-icon="https://example.com/icon.svg"
data-visitor-id="customer-123"
data-visitor-name="Sarah"
data-visitor-email="sarah@example.com"
async
></script>Attribute → Property Mapping#
Data attributes map directly to the JavaScript API property names. The SDK reads attributes from the script tag at load time and applies them automatically.
Gydr.bubble() or Gydr.chatbox() will warn and no-op. To reconfigure programmatically, call Gydr.reset() first to tear down the existing widget, then call bubble() or chatbox() with the new options.