Skip to main content

Manual Embed

Add Hunch to any website by manually inserting the embed code.

Basic Embed​

The simplest way to add Hunch is to include this script in your HTML:

<script src="https://cdn.hunchbank.com/embed.js" data-website-id="YOUR_WEBSITE_ID"></script>

Replace YOUR_WEBSITE_ID with your website ID from the dashboard.

Where to Add the Code​

Add the script just before the closing </body> tag on every page where you want the widget to appear.

Multi-Page Sites & Subdomains​

If your site spans multiple pages or subdomains (e.g., app.yoursite.com/signup), the embed script must be present on each page where the widget should appear. For subdomains that share a layout (like an app built with Next.js, React, or similar), add the script to the root layout/template so it loads on every page automatically.

When adding your website in the Hunch dashboard, use a wildcard URL like https://*.example.com to enable the widget and crawler across all subdomains with a single website record. The same embed snippet works on every subdomain.

Framework-Specific Examples​

React​

import { useEffect } from 'react'

function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.hunchbank.com/embed.js'
    script.async = true
    script.onload = () => {
      window.Hunch = window.Hunch.init({ websiteId: 'YOUR_WEBSITE_ID' })
    }
    document.body.appendChild(script)

    return () => {
      window.Hunch?.destroy?.()
      document.body.removeChild(script)
    }
  }, [])

  return null
}

Vue.js​

<script>
export default {
  mounted() {
    const script = document.createElement('script')
    script.src = 'https://cdn.hunchbank.com/embed.js'
    script.async = true
    script.onload = () => {
      window.Hunch = window.Hunch.init({ websiteId: 'YOUR_WEBSITE_ID' })
    }
    document.body.appendChild(script)
  },
}
</script>

Next.js​

In pages/_app.js or app/layout.js:

import Script from 'next/script'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://cdn.hunchbank.com/embed.js"
        strategy="afterInteractive"
        onLoad={() => {
          window.Hunch = window.Hunch.init({ websiteId: 'YOUR_WEBSITE_ID' })
        }}
      />
    </>
  )
}

Gatsby​

In gatsby-ssr.js:

exports.onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([<script key="hunch-embed" src="https://cdn.hunchbank.com/embed.js" />])
}

Runtime initialization options​

If you want to initialize the widget yourself instead of using data-website-id, call window.Hunch.init(...) after the script loads:

<script src="https://cdn.hunchbank.com/embed.js"></script>
<script>
  window.Hunch = window.Hunch.init({
    websiteId: 'YOUR_WEBSITE_ID',
    position: 'right',
    theme: 'auto',
    widgetTitle: 'Support',
    greetingEnabled: true,
    showAvatar: true,
  })
</script>

Supported runtime options include:

  • websiteId
  • position
  • theme
  • widgetTitle
  • logoUrl
  • avatarUrl
  • primaryColor
  • secondaryColor
  • launcherIcon
  • greetingEnabled
  • showAvatar
  • customCss
  • customJs

For most teams, the recommended approach is still to manage appearance and behavior from the dashboard so website operators do not have to keep inline config in sync.

Loading behavior​

The script loads asynchronously and the stylesheet is version-pinned to the same embed version automatically.

Verification​

After adding the code, verify the installation in your Hunch dashboard by clicking "Verify Installation" on your website settings page.

What the widget can render​

The current widget supports rich structured responses in addition to plain text, including:

  • cards and product cards
  • comparison tables
  • booking and result grids
  • inline forms
  • charts
  • action buttons
  • clickable links and raw URLs

No extra embed code is required to enable those renderers.