Gatsby Integration

Integrate Ask0's AI search and chat into your Gatsby site. Add intelligent documentation assistance to Gatsby-based React apps.

Add Ask0 to your Gatsby static site or blog.

Installation

gatsby-browser.js

Add the script in your browser APIs file:

gatsby-browser.js

export const onClientEntry = () => {
  const script = document.createElement('script');
  script.src = 'https://assets.ask0.ai/scripts/ask.js';
  script.dataset.projectId = process.env.GATSBY_ASK0_PROJECT_ID;
  script.dataset.position = 'bottom-right';
  script.dataset.theme = 'auto';
  script.async = true;
  document.body.appendChild(script);
};

gatsby-ssr.js

For server-side rendering support:

gatsby-ssr.js

import React from 'react';

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="ask0"
      src="https://assets.ask0.ai/scripts/ask.js"
      data-project-id={process.env.GATSBY_ASK0_PROJECT_ID}
      async
    />,
  ]);
};

React Component

Create a reusable component:

src/components/Ask0.tsx

import { useEffect } from 'react';

export default function Ask0() {
  useEffect(() => {
    // Ask0 script is already loaded via gatsby-browser.js
    if (window.ask0) {
      console.log('Ask0 ready');
    }
  }, []);

  const openWidget = () => {
    window.ask0?.open();
  };

  return (
    <button onClick={openWidget} className="ask-button">
      Ask AI
    </button>
  );
}

Layout Integration

Add to your layout component:

src/components/layout.tsx

import React from 'react';
import Ask0 from './Ask0';

interface LayoutProps {
  children: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
  return (
    <>
      <header>...</header>
      <main>{children}</main>
      <footer>...</footer>
      <Ask0 />
    </>
  );
}

gatsby-config.js

Configure using gatsby-plugin-env-variables:

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'My Site',
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-env-variables',
      options: {
        allowList: ['GATSBY_ASK0_PROJECT_ID'],
      },
    },
  ],
};

Custom Plugin

Create a custom Gatsby plugin:

plugins/gatsby-plugin-ask0/gatsby-ssr.js

import React from 'react';

export const onRenderBody = ({ setPostBodyComponents }, pluginOptions) => {
  if (!pluginOptions.projectId) {
    console.warn('Ask0 project ID is required');
    return;
  }

  setPostBodyComponents([
    <script
      key="ask0"
      src="https://assets.ask0.ai/scripts/ask.js"
      data-project-id={pluginOptions.projectId}
      data-position={pluginOptions.position || 'bottom-right'}
      data-theme={pluginOptions.theme || 'auto'}
      async
    />,
  ]);
};

plugins/gatsby-plugin-ask0/gatsby-browser.js

export const onClientEntry = (_, pluginOptions) => {
  console.log('Ask0 widget initialized');
};

Then use it:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-ask0',
      options: {
        projectId: process.env.GATSBY_ASK0_PROJECT_ID,
        position: 'bottom-right',
        theme: 'auto',
      },
    },
  ],
};

Environment Variables

.env.development

GATSBY_ASK0_PROJECT_ID=your_dev_project_id

.env.production

GATSBY_ASK0_PROJECT_ID=your_prod_project_id

Gatsby Tips:

Use gatsby-browser.js for client-side loading
Use gatsby-ssr.js for SSR support
Prefix env vars with GATSBY_
Compatible with Gatsby 4 and 5
Works with all Gatsby themes and starters

Gatsby Integration

Installation

gatsby-browser.js

gatsby-ssr.js

React Component

Layout Integration

gatsby-config.js

Custom Plugin

Environment Variables

Next Steps

On this page