How to add a ChatGPT chatbot to BookStack

You want to embed your custom trained chatbot in your BookStack on-line application. Here's how to add ChatGPT to BookStack with SiteSpeakAI.

BookStack is a simple, self-hosted, easy-to-use application/platform for organising and storing information. Being a self-hosted application means that you choose where you want to host it. The main point to keep in mind here is that you need access to the BookStack installation files on the server.

By default, BookStack doesn’t allow iframes. You can however edit the .env file to allow specific iframe sources. In our case we will add the appropriate command to the .env file to allow the SiteSpeakAI chatbot to function with your BookStack installation - see https://www.bookstackapp.com/docs/admin/security/#iframe-source-control for a description of what we are going to do next.

1. If you have installed BookStack with Docker, then the .env file will be located in the /config/www/ folder.

• Open the .env file and add the following line just below the APP_URL= line (make sure the URL, https://chatbot.sitespeak.ai, is spelled correctly).

  ALLOWED_IFRAME_SOURCES="https://chatbot.sitespeak.ai"

• Note that if you already have iframe sources added to the .env file, then you can just add the https://chatbot.sitespeakai.ai to the line (seperated by a space)

• Save the file and restart the server

2. If you have installed BookStack on a Linux server (or Linux desktop) then the .env file will be located in the var/www/bookstack folder. The file is a hidden file, so to make sure that you do find the file, run a ls -a command in the bookstack folder to show hidden files.

• Open a Terminal and change to the var/www folder

• Run a ls command to display the sub-folders in the var/www folder

• Change to the bookstack folder

• Run a ls -a command to show all files and sub-folders in the bookstack folder (including hidden ones)

• Open the .env file with vi or nano (or whatever command line editor you prefer)

• Insert the following line into the file just below the APP_URL= line (make sure the URL, https://chatbot.sitespeak.ai, is spelled correctly).

  ALLOWED_IFRAME_SOURCES="https://chatbot.sitespeak.ai"

• Note that if you already have iframe sources added to the .env file, then you can just add the https://chatbot.sitespeakai.ai to the line (seperated by a space)

• Save the file (^O - Write Out) and then exit the editor (^X - Exit). These commands could of course differ if you use a different editor.

• Restart the webserver (in this case Apache) to allow BookStack to reread the .env file

Your BookStack installation will now display the SiteSpeakAI chatbot properly.

Let’s continue installing your chatbot.

Add your chatbot to your BookStack application

In SiteSpeakAI

Select your chatbot from the dropdown menu at the top, click on the Install Chatbot section in the sidebar and then click on the Copy Code button to copy your code snippet.

1. Log into your BookStack account and select Settings on the top right menu

2. Select Customization on the left side menu

3. Scroll down on the list of Customizations, insert your snippet in the text box under Custom HTML Head Content and click on Save Settings

4. Your chatbot button will now be displayed on your BookStack application under Shelves as well as Books

5. If you click on the button it will display the chatbot dialogue

Your chatbot is now added to your BookStack website and you can start interacting with it!