Adding a GenAI chatbot to Concrete5 Website

Introduction

Enhancing your Concrete5 website with a chatbot can significantly improve user engagement and interaction. Whether you aim to offer 24/7 customer support, generate leads, or guide visitors through your site, a chatbot can be a valuable tool.

In this tutorial, we will guide you through the process of integrating the DigitalOcean GenAI Chatbot into your Concrete5 website by adding the chatbot script directly to your theme files. This method provides full control over how and where the chatbot appears on your site.

DigitalOcean GenAI Platform is a powerful offering for building AI agents on GPU-powered infrastructure. It allows you to create AI applications with foundation models, agent routes, knowledge bases, and Retrieval-Augmented Generation (RAG) pipelines. The platform is available in Early Availability (EA). Sign up for EA and get started here.

Use Cases for Adding a Chatbot

Adding a DigitalOcean GenAI chatbot to your Concrete5 site can be beneficial in several ways:

• Customer Support: Provide instant answers to common questions and 24/7 assistance, even when your team is offline.
• Lead Generation: Collect information like name, email, and phone number through interactive forms.
• Product Recommendations: Suggest products or services based on user preferences to increase conversions.
• Appointment Scheduling: Allow users to schedule consultations or book appointments directly.
• Interactive Engagement: Engage users with quizzes, surveys, and other interactive content.

Prerequisites

Before proceeding with adding the DigitalOcean GenAI Chatbot to your Concrete5 site, make sure you have the following:

• Admin Access: You must have administrative access to your Concrete5 website.
• A Live Concrete5 Site: Ensure your Concrete5 site is set up and working.
• 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 find more details on creating and managing GenAI agents and Knowledgebases here. Also, here’s a video tutorial to get started with the DigitalOcean GenAI platform.
• Basic Concrete5 Knowledge: Familiarity with Concrete5’s admin interface and theme file structure will be helpful.

Watch the Video Tutorial

Prefer a visual guide? Watch the video below to see a complete walkthrough of the steps for integrating the DigitalOcean GenAI chatbot into your Concrete5 website.

Adding the DigitalOcean GenAI Chatbot to Concrete5 via Theme File

If you have the backend access and editing theme files, you can add the script directly into your site’s theme files.

Step 1: Access Your Theme Files

1. Log in to Your Web Hosting Account: Access your server through FTP (using a client like FileZilla) or through the File Manager in your hosting control panel (e.g., cPanel).
2. Locate Your Theme Directory: Navigate to the theme folder in your Concrete5 installation. This can be found under /application/themes/[your-theme-name]/. If you’re using the default theme, it will be under /concrete/themes/[your-theme-name]/.
3. Open the Theme Folder: Within your theme folder, locate and open the footer.php file. This file is responsible for rendering the footer content across your site.

Step 2: Edit the Footer File

1. Locate the Closing </body> Tag: In the footer.php file, scroll down to find the closing </body> tag. This is typically near the bottom of the file.
2. Insert the Chatbot Script: Just before this closing tag, paste the DigitalOcean GenAI chatbot script that you received from the DigitalOcean Cloud Panel under GenAI Platform > Select Agent > Go to Endpoint Tab. The GenAI dashboard page will look like this:

Step 3: Save and Upload the File

1. Save the Changes: After adding the script, save the changes to the footer.php file.
2. Upload the File: If you are using FTP, upload the modified file back to your server. If you’re using the File Manager in your hosting panel, simply click Save to apply the changes.

Step 4: Test the Chatbot

1. Clear Cache (Optional): If you have caching enabled on your site, you may need to clear the cache to see the changes. In the Concrete5 Dashboard, go to Dashboard > System & Settings > Clear Cache.
2. Check the Frontend: Visit your site in a web browser to ensure that the DigitalOcean GenAI Chatbot is appearing in the footer and functioning correctly.

Troubleshooting

If the chatbot isn’t appearing or functioning as expected, try the following:

1. Cache Issues: Clear your browser’s cache and also clear Concrete5’s cache under Dashboard > System & Settings > Clear Cache.
2. Check for JavaScript Errors: Open your site in a browser and use the developer tools (press F12 in most browsers). Look for any JavaScript errors in the console that might indicate a problem with the script.
3. File Permissions: Ensure that the footer.php file has the correct permissions. If the file isn’t writable, you may need to adjust the file permissions through your FTP client or hosting file manager.
4. Check the Script URL: Make sure the script URL you pasted into footer.php is correct and points to the proper location provided by DigitalOcean GenAI Platform.

Conclusion

Integrating the DigitalOcean GenAI Chatbot into your Concrete5 website enhances user engagement by providing instant, AI-powered assistance. By following the steps in this guide, you’ve successfully added the chatbot to your site by embedding the script into your theme’s footer.php file.

This integration offers several key benefits:

• Increased Engagement: Visitors can easily access support or get answers to their questions through the chatbot, enhancing overall interaction.
• Customization: You can personalize the chatbot’s appearance, introductory message, and other settings to match your site’s branding and style.
• Seamless User Experience: The chatbot loads smoothly, offering timely assistance without disrupting the user’s browsing experience.

With the chatbot now live, you’re ready to offer visitors an interactive tool that provides real-time support, answers, and engagement. Whether you’re aiming to improve customer service, generate leads, or enhance user satisfaction, this AI-driven assistant will elevate the experience for your website’s visitors.

By integrating the GenAI Chatbot, you’ve added a valuable resource to your site, helping to drive engagement and support with cutting-edge AI functionality.