Webflow Installation

Add the Grounded widget to your Webflow site using custom code injection.

Installation Steps

1. Access Project Settings

1. Open your Webflow project
2. Click the Settings icon (gear) in the left panel
3. Go to the Custom Code tab

2. Add Widget Code

In the Footer Code section, paste:

<script
  src="https://grounded.sh/widget/grounded-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

Click Save Changes.

3. Publish Your Site

The widget only appears on the published site, not in the Webflow Designer:

1. Click Publish in the top right
2. Choose your domain(s)
3. Click Publish to Selected Domains

Page-Specific Installation

To add the widget to specific pages only:

1. Open the page in the Designer
2. Add an Embed element at the bottom of the page
3. Paste the widget code
4. Publish the site

Webflow Memberships

If using Webflow Memberships, you can show the widget only to logged-in users:

1. Create a conditional visibility class
2. Apply it to an embed containing the widget
3. Set visibility based on membership status

Troubleshooting

Widget Not Appearing After Publish

1. Wait 1-2 minutes for CDN propagation
2. Hard refresh the page (Ctrl/Cmd + Shift + R)
3. Check the published site, not the Designer preview
4. Verify the code is in the Footer section, not Header

Z-Index Issues

If the widget appears behind other elements:

Add this CSS in your site's custom code:

#grounded-widget {
  z-index: 999999 !important;
}