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-api-key="YOUR_API_KEY"></script>

Replace YOUR_API_KEY with your actual API key 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.

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({ apiKey: 'YOUR_API_KEY' });
    };
    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({ apiKey: 'YOUR_API_KEY' });
    };
    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({ apiKey: 'YOUR_API_KEY' });
        }}
      />
    </>
  );
}

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-api-key, call window.Hunch.init(...) after the script loads:

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

Supported runtime options include:

  • apiKey
  • 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.