Integrate Docusaurus with CrawlChat

Learn how to add "Ask AI" Chatbot to your Docusaurus based sites. This guide explains both adding the docs as knowledge base and embedding the Chatbot

Watch the guide

28 steps

11 days ago

1
Let's see how to integrate CrawlChat with Docusaurus based docs sites
Let's see how to integrate <b>CrawlChat</b> with <b>Docusaurus</b> based docs sites
2
Let's first learn how to add the docs as knowledge base
Let's first learn how to add the docs as knowledge base
3
Go to the collection you want to add the docs as knowledge base
Go to the collection you want to add the docs as <u>knowledge base</u>
4
Or create a new collection if you want a brand new one for the knowledge base
Or create a new collection if you want a brand new one for the knowledge base
5
Go to Knowledge page
Go to <b>Knowledge</b> page
6
Click Add group for the docs
Click <b>Add group</b>&nbsp;for the docs
7
Select Docusaurus based from the source list
Select <b>Docusaurus based</b> from the source list
8
Go to your docs site. Copy the URL of the docs site. In this example, we take Docusaurus docs
Go to your docs site. Copy the <b>URL</b> of the docs site. In this example, we take <u>Docusaurus docs</u>
9
Give the group a name. Example: Docs
Give the group a name. Example: Docs
10
Paste the copied URL. It fetches the docs from this URL
Paste the copied <b>URL</b>. It fetches the docs from this URL
11
You can list the versions which you don't want to be added as knowledge. Example, we give 2.x here
You can list the <b>versions</b> which you don't want to be added as knowledge. Example, we give 2.x here
12
Click Create button to finalise the group and create it
Click <b>Create</b> button to finalise the group and create it
13
Here is the group we created. It prefills with all required settings for Docusaurus
Here is the group we created. It <b>prefills</b> with all required settings for <u>Docusaurus</u>
14
We are all set to start the fetching process! Hit the refresh button to start fetching the docs
We are all set to start the fetching process! Hit the <b>refresh button</b> to start fetching the docs
15
Go to Knowledge items
Go to&nbsp;<b>Knowledge items</b>
16
You can see the pages it is fetching to confirm it
You can see the pages it is fetching to confirm it
17
Now, let's see how to integrate the Ask AI button to the Docusaurus docs site
Now, let's see how to integrate the <b>Ask AI</b> button to the <u>Docusaurus</u> docs site
18
Click Integrations
Click <b>Integrations</b>
19
Go to Embed tab to configure and embed the Chatbot
Go to <b>Embed</b> tab to configure and embed the <u>Chatbot</u>
20
Customise the Ask AI button as per your liking and branding
Customise the <b>Ask AI</b> button as per your liking and <u>branding</u>
21
Go to Docusaurus tab to find Docusaurus specific integration details
Go to&nbsp;<b>Docusaurus </b>tab to find Docusaurus specific <u>integration</u> details
22
Here is the embed config to be placed in your docusaurus.config.js file
Here is the <b>embed config</b> to be placed in your <b>docusaurus.config.js</b> file
23
Click the copy button
Click the <b>copy</b> button
24
Open the docusaurus.config.js file from your Docusaurus project
Open the <b>docusaurus.config.js</b> file from your <u>Docusaurus</u> project
25
Paste the copied config at the root level and save it. Restart the dev server or deploy it on production
<b>Paste</b> the copied config at the root level and save it. Restart the dev server or deploy it on production
26
Open your docs page
Open your docs page
27
You can see that the Ask AI button on the page!
You can see that the <b>Ask AI</b> button on the page!
28
Happy CrawlChat integration with you Docusaurs site!
Happy <b>CrawlChat</b> integration with you <b>Docusaurs</b> site!