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 (for example, 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 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 needed to enable those renderers.