How to add AI chatbot to WordPress?

In this article I will show you how to add the Ticketdesk AI chatbot to your WordPress website. Integrating an AI chatbot can significantly enhance customer service, provide instant support, and automate various tasks.

The Ticketdesk AI chatbot simulates human conversations through both text and voice interactions, helping businesses automate customer support and improve customer experience. Powered by advanced Large Language Models (LLMs) such as Claude, GPT-5, Gemini, and Z.ai, Ticketdesk AI can understand customer queries, process information, and deliver accurate, context-aware responses on your WordPress website.

Adding an AI chatbot to your WordPress site is a straightforward process using Code Snippet plugin. Here’s a step-by-step guide using Ticketdesk AI.

Create Your Ticketdesk AI Chatbot

First, you need to set up and configure your AI chatbot with Ticketdesk AI.

  1. Go to the Ticketdesk AI account > Chatbots
  2. Follow the instructions to create and train your AI agent. You can upload custom documents, connect it to your website’s content to crawl all pages, or use markdown files to ensure it answers questions relevant only to your business.

Chatbot Embed Code

Once your chatbot is configured, you will see a unique embed code.

  1. Navigate to your chatbot’s settings

  2. Copy the JavaScript embed code. It will look something like this:

    <script>
  window.TICKETDESK_ID = 'xxx';
</script>
<script src="https://ticketdesk.ai/ticketdesk-widget.min.js" defer></script>

    Replace xxx with your actual Ticketdesk AI ID.

Embed Chatbot to Your WordPress Website

There are several ways to add custom JavaScript code to your WordPress site. We’ll cover the most common methods.

Method 1: Using a WordPress Plugin (Recommended)

This is the easiest method for users who are not comfortable editing theme files directly.

  1. Install a Code Snippet Plugin:
    • Log in to your WordPress admin dashboard.
    • Go to Plugins > Add New.
    • Search for a plugin like “Insert Headers and Footers,” “Code Snippets,” or “WPCode – Insert Headers, Footers, and Custom Code Snippets.”
    • Install and activate your chosen plugin.
  2. Add the Code:
    • Once activated, navigate to the plugin’s settings (e.g., Settings > Insert Headers and Footers or Code Snippets > Add New).
    • Paste the Ticketdesk AI embed code into the section designated for “Scripts in Footer” or “Custom JavaScript.”
    • Save your changes.

Code Snippet
Code Snippet1093×549 125 KB

Method 2: Manually Adding Code to Your Theme’s functions.php File

This method is for users who are comfortable with code and want to avoid extra plugins.

  1. Access Your Theme Files:

    • Log in to your WordPress admin dashboard.
    • Go to Appearance > Theme Editor.
    • Select your active theme from the dropdown menu (it’s highly recommended to use a child theme to avoid losing your changes when the parent theme updates).
    • Find the functions.php file in the list of theme files on the right.

  2. Add the Code:

    • Add the following code snippet to the end of your functions.php file. Remember to replace xxx with your actual Ticketdesk AI ID.
    <?php
function add_ticketdesk_ai_chatbot_script() {
    ?>
    <script>
      window.TICKETDESK_ID = 'xxx'; // Replace 'xxx' with your actual Ticketdesk AI ID
    </script>
    <script src="https://ticketdesk.ai/ticketdesk-widget.min.js" defer></script>
    <?php
}
add_action('wp_footer', 'add_ticketdesk_ai_chatbot_script');
?>
    • Update File.

Edit functions.php
Edit functions.php1122×611 122 KB

Method 3: Manually Adding Code to Your Theme’s footer.php File

This method directly places the script before the closing </body> tag.

  1. Access Your Theme Files:

    • Log in to your WordPress admin dashboard.
    • Go to Appearance > Theme Editor.
    • Select your active theme (again, a child theme is recommended).
    • Find the footer.php file.

  2. Add the Code:

    • Paste the Ticketdesk AI embed code just before the closing </body> tag.
    <!-- Your existing footer content -->

<script>
  window.TICKETDESK_ID = 'xxx';
</script>
<script src="https://ticketdesk.ai/ticketdesk-widget.min.js" defer></script>

</body>
</html>
    • Update File.

Verify the Chatbot Installation

After adding the code, it’s essential to verify that your AI chatbot is working correctly.

  1. Open your WordPress website in a web browser.
  2. Look for the Ticketdesk AI chatbot widget on the bottom right corner of your screen.
  3. Click on the widget to open the chat interface and test its functionality by asking a few questions.

AI Chatbot preview
AI Chatbot preview1025×600 61.8 KB

Customizing Your AI Chatbot

Ticketdesk AI provides options to customize the appearance and behavior of your chatbot to match your website’s branding. You can find these options within your Ticketdesk AI dashboard. Customize colors, welcome messages, and even the chatbot’s icon.

Customizing Chatbot for WordPress website
Customizing Chatbot for WordPress website1041×615 47.1 KB

Integrating an AI chatbot like Ticketdesk AI into your WordPress website is a powerful way to enhance user experience, automate support, and provide instant information.

By following these steps, you can easily add this valuable tool to your site and start reaping its benefits.