Quick Start

Quick Start#

Before you start#

The snippets below only render a widget for a published chatbot. Create a widget in the Gydr Console and publish it first. New widgets start unpublished and are invisible to visitors until you publish a save. Not sure what that means? Read the core concepts.

Option 1: Data Attributes#

The simplest way to add the chatbot to your site is a single script tag with data attributes. No build tools, no npm packages. Just paste the snippet before </body> in your HTML.

Replace pk_live_YOUR_KEY with your real API key from the Gydr Console (Widgets → Edit Widget → API Keys).

<!-- Paste this before </body> in your HTML -->
<!-- A chat bubble will appear in the bottom-right corner -->
<script
  src="https://cdn.infinichat.dev/widget.js"
  data-api-key="pk_live_YOUR_KEY"
  async
></script>

You can add more data attributes to customize behavior:

• data-mode="chatbox" — switches from the floating bubble to a full-page chat experience
• data-visitor-id — links the visitor to your internal user ID so their chat history persists across devices and sessions
• data-visitor-name is the visitor’s display name. The chatbot uses it to personalize greetings.
• data-bubble-color, data-bubble-size, data-bubble-icon control the bubble button’s color, size in pixels, and icon (SVG string or image URL).

<!-- Full-page chat with visitor tracking -->
<script
  src="https://cdn.infinichat.dev/widget.js"
  data-api-key="pk_live_YOUR_KEY"
  data-visitor-id="customer-123"
  data-mode="chatbox"
  async
></script>

Option 2: JavaScript API#

For programmatic control (customizing the bubble color, toggling the chat open or closed, or destroying the widget), use the JavaScript API instead of data attributes.

Load the script first, then call Gydr.bubble() or Gydr.chatbox() after it has loaded. See the API Reference for all available options.

<!-- Step 1: Load the SDK -->
<script src="https://cdn.infinichat.dev/widget.js"></script>

<!-- Step 2: Initialize the widget -->
<script>
  Gydr.bubble({ apiKey: 'pk_live_YOUR_KEY' });
</script>

Get Your API Key#

Your API key is available in the Gydr Console under Widgets → Edit Widget → API Keys. Each widget has its own API key. Always use your public key (pk_live_...) in browser code.