Posts tagged: chatbot

In this guide, I’ll illustrate how to develop an AI chatbot tool for your website!

Creating AI-powered tools on WordPress is a simple process that involves three essential steps. Let’s dive into a detailed guide on how to bring this tool to life.

Step 1: Open Zapier

• Begin by opening Zapier, a popular automation platform that allows you to connect different apps and services.

Step 2: Create an Account

• If you don’t already have a Zapier account, you’ll need to create one. This is a straightforward process that involves providing your email address and setting a password.

Step 3: Access Interfaces (Beta)

• Once you’ve logged in to your Zapier account, navigate to the “Interfaces (Beta)” section. This is where you’ll find tools and features related to creating chatbots.

Step 4: Create a New Project

• Inside “Interfaces (Beta),” click on the option to create a new project. You’ll typically start from scratch, so select “Start from Scratch.”

Step 5: Choose a Chatbot

• At this stage, you have the option to choose the type of chatbot you want to create. Depending on your needs, you can select from various chatbot options, including rule-based bots, AI-driven bots, and more.

Step 6: Configure Chatbot Settings

• Once you’ve selected the type of chatbot, you’ll need to configure its settings. This includes defining its purpose, setting up triggers, and specifying how it should interact with users.

Step 7: Connect to Apps and Services

• Zapier allows you to connect your chatbot to various apps and services. You can integrate it with your website, CRM, email platform, and more to ensure seamless communication and data exchange.

Step 8: Define Chatbot Responses

• Next, you’ll define how your chatbot responds to user queries and interactions. You can create predefined responses, set up conditional logic, and customize the chatbot’s behaviour to meet your specific requirements.

Step 9: Test Your Chatbot

• Before deploying your chatbot on your website, it’s essential to thoroughly test it. Zapier provides testing tools that allow you to simulate user interactions and ensure that the chatbot functions as expected.

Step 10: Deploy and Monitor

• Once you’re satisfied with your chatbot’s performance, you can deploy it on your website. Zapier also offers monitoring and analytics features, allowing you to track user interactions and make improvements over time.

Watch this video:

In this initial phase, we will integrate the PHP function responsible for facilitating communication with the OpenAI API. To achieve this, we will leverage the WPCode plugin within the WordPress environment.

After activating the plugin, follow these instructions to include your API call:

1. In your WordPress dashboard, go to ‘Code Snippets > Add New’.
2. Provide a name, such as ‘OpenAI API Call’, in the ‘Title’ field.
3. Select ‘PHP’ as the code type.
4. In the ‘Code’ text box, insert your PHP code. Here’s a sample structure for your reference

function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');

function zapier_chatbot_embed() {
    // Echoes the chatbot script and container directly into the footer
    echo <<<EOT
    <div id="zapier-chatbot-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000; max-width: 350px; width: 350px; height: 500px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: none;">
        <script type='module' src='https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js'></script>
        <zapier-interfaces-page-embed page-id='clpml14xb003bj89rm4z60kw9' no-background='false' style='width: 100%; height: 100%;'></zapier-interfaces-page-embed>
    </div>
    <div id="zapier-chatbot-icon" style="position: fixed; bottom: 20px; right: 20px; z-index: 1100; cursor: pointer;">
        <!-- Your SVG chat bubble icon -->
        <svg xmlns="http://www.w3.org/2000/svg" height="80" width="80" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z" fill="#715BF6"/>
		</svg>
    </div>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var chatbotContainer = document.getElementById('zapier-chatbot-container');
            var chatbotIcon = document.getElementById('zapier-chatbot-icon');
            chatbotIcon.addEventListener('click', function() {
                chatbotContainer.style.display = chatbotContainer.style.display === 'none' ? 'flex' : 'none';
            });
        });
    </script>
EOT;
}

add_action('wp_footer', 'zapier_chatbot_embed');

With our API function prepared, it’s time to craft to add our chatbot in the footer page within our WordPress site to host our AI chatbot tool.

To insert your own HTML code within Elementor, follow these simple steps:

1. While in the Elementor editor, navigate to the left sidebar, where you’ll find a range of icons. Click on the icon resembling a grid or matrix.
2. A list of available widgets will appear. Locate the ‘HTML’ widget in this list.

Copy the code below and paste it into HTML

<script>
zapier_chatbot_embed('chatbot');
</script>