Add Chat Bot in Ghost

As I learned about Wordpress, another open-source content management system (CMS) just like Ghost, I noticed an interesting automatic Chat Bot in a website. Unlike chatGPT, which gives response based on large language models (LLMs), this Chat Bot is full JavaScript with your designed chat content.

Example:

Here is what I have on my About Page:

We can see that this Chat Bot is primarily used to make visitors feel not tedious while reading the text such as introduction.

Code:

Let me explain some parts of the code for this Chat Bot, and I will provide the file below.

1. Import CSS

Make sure to put the following code at the top to import the necessary CSS file. Otherwise the UI of the chat box would not have any style.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui-theme-default.css" />

2. Edit Text

The chat text is in the fucntion bot_ui_ini.

Use botui.message.add to add text. Set variable delay to "1000" would make it appear after 1s. Set variable content to be the text of one message.

Use botui.action.button to add buttons for user to choose from. Set variable value for each selection, and use those values as condition to decide which way the conversation would go to.

3. Other Codes

Other codes are used to import Vue.js and BotUI libraries.

Add In Ghost:

After customizing your own chat content, go to edit the page.

Use the "+" on the left to add html, or type /html, to add html section.

Then paste the code in the file into it, and it is all set!

Borrowed idea and code from:

• Original Design

[https://2heng.xin/about/]

• Tutorial

[https://yremp.live/wordpress-sakura-teach/#2.%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8%E7%AF%87]