Deployment Modes#
The Gydr Widget SDK supports two deployment modes. Choose the one that best fits your use case — you only need one script tag to get started.
Which mode should I use? For most websites, use Bubble Mode — it adds a floating chat button that visitors can click to open a chat window. Use Chatbox Mode if you want a full-page chat experience (e.g., a dedicated “Support” page).
Chatbox Mode
A full-size chat experience that fills the entire page. Ideal for dedicated support pages where the chat is the main content.
Add data-mode="chatbox" to your script tag. That’s it — the chatbot will appear as a full-page chat panel.
<!-- Paste this before </body> in your HTML -->
<script
src="https://cdn.infinichat.dev/widget.js"
data-api-key="pk_live_YOUR_KEY"
data-mode="chatbox"
async
></script>Bubble Mode Default
A floating action button in the bottom-right corner of your page. When a visitor clicks it, a chat panel slides open. This is the default mode and works great for most websites.
Since bubble is the default, you can omit data-mode entirely — or set data-mode="bubble" to be explicit.
<!-- Paste this before </body> in your HTML -->
<script
src="https://cdn.infinichat.dev/widget.js"
data-api-key="pk_live_YOUR_KEY"
data-mode="bubble"
async
></script>
<!-- Customized bubble (color, size, icon) -->
<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>