HTML Installation

Add Grounded chat widget to any HTML website.

The Grounded widget works on any website that supports custom HTML and JavaScript.

Basic Installation

Add this code before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Grounded Chat Widget -->
  <script
    src="https://grounded.sh/widget/grounded-widget.js"
    data-chatbot-id="YOUR_CHATBOT_ID"
    async
  ></script>
</body>
</html>

Static Site Generators

Hugo

Add to your base template (layouts/_default/baseof.html):

{{ partial "footer.html" . }}

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

Jekyll

Add to _includes/footer.html or _layouts/default.html:

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

Astro

Add to your layout component:

---
// src/layouts/Layout.astro
---
<html>
<body>
  <slot />
  <script
    src="https://grounded.sh/widget/grounded-widget.js"
    data-chatbot-id="YOUR_CHATBOT_ID"
    async
  ></script>
</body>
</html>

Next.js

Add to pages/_document.tsx or use the Script component:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://grounded.sh/widget/grounded-widget.js"
          data-chatbot-id="YOUR_CHATBOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Single Page Applications (SPA)

For React, Vue, or Angular apps, load the widget once in your root component or index.html.

React Example

// In App.jsx or index.js
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://grounded.sh/widget/grounded-widget.js';
  script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
  script.async = true;
  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
}, []);

Verification

After installation:

Open your website in a browser
Open Developer Tools (F12)
Check the Console for any errors
Look for the chat bubble in the bottom corner
Click to test a conversation

Previous Wix Next Customization