Suitable for static websites, outlines the general idea of how to integrate the bot into your website. As long as you can directly edit the HTML of your website, you can use this method.

<!-- Somewhere in <head> -->
<script src="https://cdn.jsdelivr.net/npm/@cookbookdev/docsbot/dist/standalone/index.cjs.js" defer></script>

<!-- Somewhere in <body> -->
<div id="__cookbook" data-api-key="HERE_GOES_APIKEY"></div>

React integration

Install the package

yarn add @cookbookdev/docsbot

npm install @cookbookdev/docsbot

pnpm install @cookbookdev/docsbot

Import and add our component to something that wraps the content, for example in Next.js it could be _app.js or layout.js

import AskCookbook from "@cookbookdev/docsbot/react";

export default function App() {
  return (
    <>
      <AskCookbook apiKey="[HERE_GOES_YOUR_API_KEY]" alwaysOpen={false} noFastMode={false} />
      {/* Your content */}
    </>
  );
}

Webflow integration

Go to the Dashboard
Get to the "Site settings" (see picture below)
Get to the "Custom code" tab (see picture below)
Put the following code into the "Head code" text area

<script src="https://cdn.jsdelivr.net/npm/@cookbookdev/docsbot/dist/standalone/index.cjs.js" defer></script>

Put the following code into the "Footer code" text area

<div id="__cookbook" data-api-key="[HERE_GOES_YOUR_API_KEY]"></div>

Save both of them

7. Publish website

Gitbook Integration

The good news is that we know how to integrate the "Ask Cookbook" into Gitbook! The bad news is that we yet to write a guide on it. If you need it, please contact us

API of `<div>` element

<div
  id="__cookbook"
  data-always-open <!-- Optional. If you want to have modal always open, usually for the showcase purposes -->
  data-no-fast <!-- Optional. Disables fast mode switch, forces dosbot into the detailed mode -->
  data-api-key="API_KEY_GOES_HERE"
/>

API of React component

<AskCookbook
  apiKey="API_KEY_GOES_HERE"
  alwaysOpen={false} // Optional. If you want to have modal always open, usually for the showcase purposes
  noFastMode={false} // Optional. Disables fast mode switch, forces dosbot into the detailed mode
/>

FAQs

What is @cookbookdev/docsbot?

Is @cookbookdev/docsbot popular?

Is @cookbookdev/docsbot well maintained?

Package last updated on 19 Mar 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@cookbookdev/docsbot

How to integrate "Ask Cookbook" into your website

Step 1. Contact us to get an API Key

Step 2. Pick one of the integration methods below

Integration methods

Basic integration

React integration

Webflow integration

Gitbook Integration

API of <div> element

API of React component

Related posts

TanStack npm Packages Compromised in Ongoing Mini Shai-Hulud Supply-Chain Attack

fsnotify Maintainer Dispute Sparks Supply Chain Concerns

API of `<div>` element