# How to integrate "Ask Cookbook" into your website

## Step 1. Contact us to get an API Key

*You likely already have one, but if you don't, please contact us at [tyler@cookbook.dev](mailto:tyler@cookbook.dev)*

## Step 2. Pick one of the integration methods below
Having troubles or need something custom? [Contact us](mailto:tyler@cookbook.dev) 

# Integration methods

## Basic integration

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.

```html
<!-- 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

```bash
yarn add @cookbookdev/docsbot
```
OR
```bash
npm install @cookbookdev/docsbot
```
OR
```bash
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`

```jsx
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

1. Go to the [Dashboard](https://webflow.com/dashboard)
2. Get to the "Site settings" (see picture below)
<img width="1328" alt="image" src="https://gist.github.com/assets/20116062/30f8e016-a256-471e-8c24-d3201205d657">
3. Get to the "Custom code" tab (see picture below)
<img width="1308" alt="image" src="https://gist.github.com/assets/20116062/0e2489f5-e3a1-4ea9-b1f2-3a87e0aaffd8">
4. Put the following code into the "Head code" text area

```html
<script src="https://cdn.jsdelivr.net/npm/@cookbookdev/docsbot/dist/standalone/index.cjs.js" defer></script>
```
5. Put the following code into the "Footer code" text area

```html
<div id="__cookbook" data-api-key="[HERE_GOES_YOUR_API_KEY]"></div>
```
6. Save both of them

![image](https://gist.github.com/assets/20116062/30dfdf56-ab26-4e58-846a-7223a38ee350)
7. Publish website

![image](https://gist.github.com/assets/20116062/11a398e2-2644-49c3-9df3-18b493c4cc59)

## 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](mailto:tyler@cookbook.dev)

## API of `<div>` element
```html
<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
```jsx
<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
/>
```

---

<img src="https://i.giphy.com/AroJXC4YgY06mHsjGQ.webp" width="100%">
