7 min read 2 wks ago

Your First Chatbot

Let’s build your first chatbot ever!

Welcome to AI Engine! This page helps you set up your first chatbot. Let’s walk through it step by step.

How does AI Engine work?

It’s a good idea to first understand what the plugin does. Using AI services directly by yourself can be quite overwhelming and frustrating if you don’t have the right technical skills, and even more troublesome if you want to build your own WordPress integration over it.

Think of the AI Engine as a pre-made dashboard that lets you plug in all the AI services you need into a convenient, already-made panel, so you don’t have to build these features yourself.

The plugin itself doesn’t contain AI models, nor does it provide you with AI-generated content. Instead, it connects to external services and handles all the communication and fetching for you.

So, most of the time, if you experience issues with the content you get, this isn’t on the plugin: it’s coming from the AI models themselves. 🤔

If you need any assistance or have questions, feel free to reach out to our support team. We’re here to help!

Installation and Dashboard Access

Before installing the Pro version of AI Engine, make sure you remove the free version first. You don’t need both, and running them at the same time will only cause issues.

Go to Plugins → Add Plugin. Then you’ll see “Upload Plugin” at the top of the page.

If you have AI Engine Pro, click there and upload the ZIP file you received by email or from your MeowApps account to install the plugin.

After installing the plugin, you gain access to a dashboard where you can tailor settings, enable/disable features, and manage your chatbots.

If you have AI Engine Pro, the first thing you should do is go to the “License” tab in the AI Engine settings, paste your license key and click Activate. This will enable all the Pro features. You will find your key in your purchase email, and anytime in your Meow Apps account.

AI Engine License tab asking for the license key

After your license is verified and validated, the page will refresh and all Pro features will be unlocked. Go to the Modules tab to choose which features you want to turn on. Chatbot is on by default.

Each module (in most cases) corresponds to a new tab in the settings, and everything related to AI Engine is managed from there. Turning a module off only hides its screens and options, nothing is deleted.

Chatbots and Knowledge modules in the Modules tab

Not sure where to start? On the Dashboard, click Explore AI Engine. It’s a short tour of ten small goals, from connecting your AI to putting a chatbot on your site. Each goal tells you what to try and takes you to the right screen.

Explore AI Engine tour on the dashboard

Setting Up Your OpenAI Account

On a new install, AI Engine prepares an OpenAI environment for you, but it has no API key yet. The Dashboard reminds you that “Your AI settings need a look”, and the Your AI card shows “No API key yet” next to any provider that is missing its key. AI Engine relies on third party services, so connect your account and make sure your billing details are right. If you don’t, you will get a “You exceeded your current quota” error message.

Your AI card on the AI Engine dashboard

Log in to your OpenAI account, go to the API dashboard, generate a new API Key, and paste it in the “Settings” tab of AI Engine (in the AI section), under “Environments for AI”, in the API Key field.

Environments for AI with the API Key field and Quick Test button

As you can see in this screenshot, there are a lot of different environments. You can create as many as you want, with different services, different API keys, no limits!

You can also open Actions and click Quick Test to check that the communication between your server and the OpenAI API is all good.

Congratulations! 🎉 You are now ready to have an AI Chatbot on your website.

Of course, you can use something other than OpenAI, but make sure that you have selected the right “Type” for it, such as Anthropic, Azure, or OpenRouter, to match your API key.

Exploring the Chatbots Tab

Visit the “Chatbots” tab to find the automatically created “Default” chatbot.

Chatbot editor with its collapsible sections

The chatbot editor is a list of sections: Chatbot, AI Model, File Uploads, Knowledge & Context, Functions, Tools & Capabilities, Thresholds, Appearance, Popup & Launcher, UI Builder, Advanced, Shortcodes and Actions. Click a section to open it. The short summary next to each name tells you how it’s set, without opening it.

Each tab above the sections is a chatbot. To add a new one, click the green plus button next to the tabs.

In the AI Model section, choose the environment you just created and the model you wish to use. If you do not make a selection here, the chatbot uses your default settings, which can be found under Settings > AI > Default Environments for AI.

AI Model section of the chatbot editor

Test it by sending a message in the preview on the right side to see what your users will see. The preview keeps its own history, separate from your live chatbot, but its messages still go to your AI provider like real ones.

Chatbot preview in the Chatbots tab

Displaying the Chatbot on Your Website

To make the chatbot visible on your website, you have three options:

  • Site-Wide Feature: Enables a pop-up icon (bottom right by default) on all pages and posts. Even if the pop-up option is not enabled for this chatbot, using the Site-Wide will force it.

To disable this feature you can simply set it to “None”.

  • Shortcode: Use the provided shortcode by copying and pasting it into a shortcode block on your desired page. The shortcode can be found in the top-left corner of the “Chatbots” tab.

You can also create a shortcode override to add custom behavior. Here’s an example to recreate a “site-wide” chatbot while excluding specific pages:

Show code snippet
/**

 * Shortcode: [custom_mwai_chatbot]

 * 

 * Returns nothing on excluded pages or the homepage.

 * Returns the Mwai chatbot shortcode everywhere else.

 */

function custom_mwai_chatbot_shortcode() {

    $to_exclude = array(

        // Add page IDs, slugs, or titles here.

        // Example:

        // 123,

        // 'contact',

        // 'Privacy Policy',

    );

    if ( is_front_page() || is_home() ) {

        return null;

    }

    if ( is_page( $to_exclude ) ) {

        return null;

    }

    return do_shortcode( '[mwai_chatbot id="default"]' );

}

add_shortcode( 'custom_mwai_chatbot', 'custom_mwai_chatbot_shortcode' );

function custom_mwai_chatbot_footer() {

    echo do_shortcode( '[custom_mwai_chatbot]' );

}

add_action( 'wp_footer', 'custom_mwai_chatbot_footer' );
  • Block: If you use Gutenberg, you can add a “AI Chatbot” Block on your page and select the one you want to use.

Using the shortcode or block to add your chatbot will embed it directly into the page at that location if the Pop-up feature is not enabled. If you’ve enabled the Pop-up for the chatbot, then no matter where you add the block/shortcode, it will always display as a pop-up.

You can create as many chatbots as you want. You can then have each chatbot on different pages, or have different chatbots per user. You can have the same chatbot settings but with different knowledge environments, and much more.

Customizing Your Chatbot

Feel free to create as many chatbots as you want! Click the “+” button to create your own with a unique ID, which you can customize for a friendlier touch.

New chatbots start with their texts (like the placeholder and the buttons) in your site’s language. To change their look, their texts and their behavior, check out the customization documentation. To give your chatbot knowledge about your business, read Teach Your Chatbot About Your Business.

Beyond Chatbots

AI Engine does a lot more than chatbots. For example, AI Forms let you generate AI responses based on fields your visitors fill in.

Now that you’ve completed these steps, you have a working chatbot. Don’t be scared to play with different settings, that’s the best way to learn! 😊