Widget Theme#
Widget Theme controls the chatbot widget's appearance — logo, colors, and brand name — directly from your embed code. All styling options can be set via data attributes on the script tag or programmatically through the JavaScript API. Widget Theme is available on Starter tier and above; the "Powered by Gydr" badge is hidden on every paid plan and on accounts managed by an active partner.
Looking to rebrand the Console dashboard your team logs into? See White Label.
Bubble Appearance#
In bubble mode, the floating button can be styled with a custom color, size, and icon. Basic bubble appearance options are available on all tiers. Full Widget Theme (logo, brand name, colors, and badge removal) requires Starter tier and above.
| Property | Data Attribute | Type | Default | Description |
|---|---|---|---|---|
bubbleColor | data-bubble-color | string | "#6366f1" | Background color of the floating button; must be a 6-digit hex color (e.g. #6366f1). Any other format silently falls back to #6366f1. |
bubbleSize | data-bubble-size | number | 56 | Diameter of the floating button in pixels; any positive integer (recommended 40–80). |
bubbleIcon | data-bubble-icon | string | chat icon | Custom icon — an inline SVG string (detected by <svg prefix) or an image URL. |
bubbleIconSize | data-bubble-icon-size | number | 43% of bubbleSize | Override the icon size in pixels. Defaults to ~43% of the bubble diameter (e.g. 24px for a 56px bubble). |
<!-- Simplest approach — no JavaScript needed -->
<script
src="https://cdn.infinichat.dev/widget.js"
data-api-key="pk_live_YOUR_KEY"
data-bubble-color="#10b981"
data-bubble-size="64"
data-bubble-icon="https://example.com/my-icon.svg"
data-bubble-icon-size="28"
async
></script>Position & Offset#
Control which corner the bubble and chat panel appear in, and fine-tune the spacing from the viewport edges.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
position | "bottom-right" | "bottom-left" | Optional | "bottom-right" | Which corner of the screen to place the bubble and chat panel. |
offset | object | Optional | — | Fine-tune position: { bottom?, right?, left? } in pixels. Default 20px each. |
Gydr.bubble({
apiKey: 'pk_live_YOUR_KEY',
position: 'bottom-left',
offset: { bottom: 24, left: 24 }
});All styling options above can also be set as data-* attributes on the script tag. View the full Data Attributes reference →