Adding a Chatbot to Your Ghost Website Using DigitalOcean GenAI

Introduction

Ghost is an open-source content management system (CMS) focused on publishing and blogging. It offers a minimalist interface for content creation. It is lightweight, fast, and designed for bloggers and publishers.

Use Cases: Blogs, news websites, and content-driven sites.

Enhancing your website with a chatbot can significantly improve user interaction and engagement. Whether you’re looking to provide 24/7 customer support, generate leads, or guide users through your site, a chatbot can be a valuable addition. In this tutorial, we will show you how to integrate the DigitalOcean GenAI chatbot into your existing Ghost powered website. It is an AI-powered chatbot platform that can be easily integrated into any website using a simple script.

We’ll walk you through the steps of adding the chatbot using different methods, including code injection, plugins, and direct theme file edits. Here you can provide clear instructions for the agent and train on how to respond.

These instructions define the agent’s task, tone, and behavior, improving its accuracy. Knowledge bases (KB) can include documentation, FAQs, and guides that will help your agent to fetch relevant information for more accurate responses.

Use Cases

Here are a few scenarios where adding a chatbot using DigitalOcean GenAI to your Ghost site can make a significant impact:

1. Customer Support: Provide instant answers to common questions and offer 24/7 customer assistance, even when your team is offline.
2. Lead Generation: Collect visitor information like name, email, and phone number, and qualify leads automatically with GenAI’s interactive forms.
3. Product Recommendations: E-commerce websites can use chatbots to recommend products based on user preferences, helping increase conversions.
4. Appointment Scheduling: Automate booking appointments for businesses like medical offices, beauty salons, or consulting services.
5. Interactive Engagement: Engage users with quizzes, surveys, and interactive content to keep them on your site longer and improve user experience.

Prerequisites

Before you begin adding the DigitalOcean GenAI chatbot to your site, ensure that you meet the following prerequisites:

1. A Live Website: If you haven’t already set up your Ghost powered website, we have Ghost 1-Click App available in the marketplace which allows you to self-host your own Ghost instance up and running in two minutes.
2. Admin Access: You must have administrative access to configure the Ghost site. Administrative interface at <http://use_your_droplet_ip/ghost>
3. DigitalOcean GenAI Chatbot Script: You will need the GenAI chatbot integration script provided by DigitalOcean GenAI Platform. This script will typically come in the form of a <script> tag that you find in the cloud panel once you make the endpoint public. You can refer to the links for more details on creating and managing GenAI agents and Knowledge Bases.

Adding DigitalOcean GenAI Chatbot

Ensures your agent is available for external applications. If an endpoint is set to playground mode, this restricts access to internal resources only such as for agent routing. If an endpoint is set to public, the endpoint becomes accessible to external traffic.

Once you have your chatbot ready and configured, set the endpoint to public. Then, you will be provided with a JavaScript code snippet. For example:

<script async
  src="https://agent-14066a373cb3ac799541-5kekp.ondigitalocean.app/static/chatbot/widget.js"
  data-agent-id="7ff110ef-9da8-11ef-bf8f-4e013e2ddde4"
  data-chatbot-id="ZoamtI2KXJusoNBYbbD5lgoWX2hLfH-J"
  data-name="ghostblog-chatbot Chatbot"
  data-primary-color="#031B4E"
  data-secondary-color="#E5E8ED"
  data-button-background-color="#0061EB"
  data-starting-message="Hello! How can I help you today?"
  data-logo="/static/chatbot/icons/default-agent.svg">
</script>

Method 1: Add the Chatbot via Code Snippet

• Log in to your Ghost Admin Dashboard [yourwebsite/ghost].
• Go to Settings > Code Injection.
• Paste the chatbot code snippet into the Site Footer section under “Code Injection for Site Footer”.

• Click Save.

This will add the chatbot widget to every page of your website. Open your website and verify that the chatbot appears and works as expected.

Method 2: Adding a Chatbot using Ghost Themes (Editing default.hbs)

If you want more control over where the chatbot appears, you can directly edit your Ghost theme files.

Step 1: Access Your Theme Files

• Go to your Ghost Admin Dashboard.
• Navigate to Settings > Design & branding and click “Customize”.
• Add the bottom, select Change Theme > Installed and Download the theme.

• Extract the downloaded theme on your computer.

Step 2: Add the Chatbot Code to default.hbs

• Open the default.hbs file in a code editor (e.g., VS Code).
• Locate the closing </body> tag.
• Paste the chatbot JavaScript code just before the closing </body> tag:

• Save the changes.
• Recompress your theme folder into a .zip file.

Step 3: Upload the Modified Theme

• Go back to the Ghost Admin Dashboard.
• Navigate to Settings > Design > Advanced > Upload theme.
• Upload your modified theme.
• Activate the new theme.

Refresh your Ghost website to ensure the chatbot appears as expected.

Method 3: Using Ghost Apps (Self-Hosted with Docker)

If you’re using a self-hosted Ghost blog (especially on Docker), you can use Ghost Apps or Docker services to add custom scripts:

• SSH into your server.
• Edit the .env file or your Docker configuration file to include chatbot scripts.
• Restart your Ghost instance.

Conclusion

Adding a DigitalOcean GenAI Chatbot to your Ghost website is a great way to engage visitors and provide instant support.

This integration offers several key benefits:

• Increased Engagement: Visitors can easily access support or ask questions via the chatbot.
• Customization: You can personalize the chatbot’s appearance, starting message, and colors to match your site’s branding.
• Seamless User Experience: The chatbot loads at the right moment, providing users with prompt assistance without disrupting their browsing experience.