Widget Customization

Customize the Grounded widget to match your brand and user experience requirements.

Dashboard Settings

Most customization options are available in your chatbot settings:

1. Go to your Dashboard
2. Select your chatbot
3. Click Settings

Appearance Options

Data Attributes

Override settings with HTML data attributes:

<script
  src="https://grounded.sh/widget/grounded-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-left"
  data-primary-color="#4f46e5"
  data-welcome-message="Hi! How can I help you today?"
  async
></script>

Available Attributes

CSS Customization

For advanced styling, target the widget's CSS classes:

/* Custom widget button */
#grounded-widget-button {
  /* Your styles */
}

/* Chat container */
#grounded-widget-container {
  /* Your styles */
}

/* Message bubbles */
.grounded-message-bot {
  /* Bot message styles */
}

.grounded-message-user {
  /* User message styles */
}

Programmatic Control

Control the widget with JavaScript:

// Open the widget
window.GroundedWidget.open();

// Close the widget
window.GroundedWidget.close();

// Toggle the widget
window.GroundedWidget.toggle();

// Check if widget is open
const isOpen = window.GroundedWidget.isOpen();

Custom Trigger Buttons

Create your own chat button:

<button onclick="window.GroundedWidget.open()">
  Chat with us
</button>

To hide the default button, add CSS:

#grounded-widget-button {
  display: none;
}

Domain Restrictions

Restrict where your widget can be embedded:

1. Go to Settings > Security
2. Add allowed domains under Allowed Domains
3. Only listed domains can use your widget

Mobile Optimization

The widget is mobile-responsive by default. For best results:

• Test on actual mobile devices
• Ensure your site doesn't have overflow: hidden on body
• The widget adapts to screen size automatically