GudDesk
Docs
Widget Customization

Widget Customization

Customize the GudDesk chat widget's colors, position, behavior, and greeting message.

The GudDesk widget is fully customizable to match your brand. All options are configured via window.GudDeskSettings or through the dashboard.

Configuration Options

<script>
  window.GudDeskSettings = {
    appId: "gd_pub_xxxxxxxxxxxxxxxx",
 
    // Appearance
    accentColor: "#3ECF8E",       // Primary color (hex)
    position: "bottom-right",      // "bottom-right" or "bottom-left"
    greeting: "Hi there! How can we help?",
 
    // Behavior
    openOnLoad: false,             // Auto-open on page load
    hideOnMobile: false,           // Hide widget on mobile devices
    showBranding: true,            // Show "Powered by GudDesk" (Pro: can disable)
  };
</script>

Dashboard Configuration

You can also configure the widget from your GudDesk dashboard:

  1. Navigate to Settings > Widget
  2. Use the live preview to adjust colors, position, and greeting
  3. Click Save — changes apply immediately to all pages with your widget installed

Dashboard settings are synced with your widget and override local GudDeskSettings values (except appId and baseUrl).

Custom CSS

For advanced styling, you can target the widget container:

#guddesk-widget {
  /* The widget renders inside this container */
}
 
#guddesk-widget .guddesk-launcher {
  /* Style the chat bubble button */
}

Custom CSS selectors may change between versions. We recommend using the configuration options above for stable customization.

Accent Color

The accent color affects the chat bubble, header, and sent message backgrounds. Set it to your brand color:

window.GudDeskSettings = {
  appId: "gd_pub_xxxxxxxxxxxxxxxx",
  accentColor: "#6366F1", // Indigo
};

Position

Place the widget in the bottom-left or bottom-right of the screen:

// Bottom-left
window.GudDeskSettings = {
  appId: "gd_pub_xxxxxxxxxxxxxxxx",
  position: "bottom-left",
};

Greeting Message

The greeting is shown when a visitor opens the widget for the first time:

window.GudDeskSettings = {
  appId: "gd_pub_xxxxxxxxxxxxxxxx",
  greeting: "Welcome! Ask us anything.",
};

Set greeting to an empty string to disable the greeting bubble.

InstallationShared Inbox