GudDesk
Docs
Widget Installation

Widget Installation

Add the GudDesk chat widget to your website with two lines of code.

The GudDesk chat widget lets your customers start conversations directly from your website. Installation takes less than a minute.

Basic Installation

Add this snippet before the closing </body> tag of your website:

<script>
  window.GudDeskSettings = {
    appId: "gd_pub_xxxxxxxxxxxxxxxx"
  };
</script>
<script src="https://cdn.guddesk.com/widget.js" async></script>

Replace the gd_pub_ value with your actual App ID, found in Dashboard > Settings > Widget.

Widget keys use the gd_pub_ prefix and are safe to expose in client-side code. They only identify your workspace and allow visitors to start conversations — the same thing they can already do by visiting your site. Server-side API keys (gd_live_, gd_test_) should never be used in the widget.

Self-Hosted Installation

If you're self-hosting GudDesk, point the widget to your own instance:

<script>
  window.GudDeskSettings = {
    appId: "gd_pub_xxxxxxxxxxxxxxxx",
    baseUrl: "https://your-guddesk-domain.com"
  };
</script>
<script src="https://your-guddesk-domain.com/widget.js" async></script>

React / Next.js

For React-based apps, you can load the widget in a layout or root component:

"use client";
 
import { useEffect } from "react";
 
export function GudDeskWidget() {
  useEffect(() => {
    window.GudDeskSettings = {
      appId: process.env.NEXT_PUBLIC_GUDDESK_PUB_KEY,
    };
 
    const script = document.createElement("script");
    script.src = "https://cdn.guddesk.com/widget.js";
    script.async = true;
    document.body.appendChild(script);
 
    return () => {
      document.body.removeChild(script);
      window.GudDesk?.destroy();
    };
  }, []);
 
  return null;
}

JavaScript API

Once loaded, the widget exposes a global window.GudDesk object:

// Open the chat widget
window.GudDesk.open();
 
// Close the chat widget
window.GudDesk.close();
 
// Identify a logged-in user
window.GudDesk.identify({
  email: "customer@example.com",
  name: "Jane Doe",
  userId: "usr_12345",
});
 
// Destroy the widget instance
window.GudDesk.destroy();

Verify Installation

After adding the snippet:

  1. Open your website in a browser
  2. You should see the chat bubble in the bottom-right corner
  3. Click it and send a test message
  4. Check your GudDesk inbox — the message should appear

If the widget doesn't appear, check the browser console for errors and verify your App ID is correct.

Next Steps

Self-HostingCustomization