In the Chatbots tab, you can switch the toggle from Chatbots to Themes. There, you can modify the default themes that come with AI Engine using a no-code editor.

If you want more customization, you can create your own theme by clicking the + button. This will open a CSS editor where you can manually use AI Engine’s chatbot class definitions to build your own custom design.

If you have some CSS ready to load, you can also use the following filter to change the CSS of your theme on the server side:

add_filter( 'mwai_chatbot_style', 'my_chatbot_style', 10, 2 );

function my_chatbot_style( $style, $chatbotId ) {
  return $style . "
    <style>
      #mwai-chat-$chatbotId {
        background: #343541;
        color: white;
        font-size: 15px;
      }
    </style>
  ";
}

These themes can also be used in the AI Forms.

Icons & Avatars

The icon refers to the chatbot pop-up image, which is only visible when your chatbot is configured as a pop-up—either because you’ve enabled that setting or are using the Site Wide Chatbot. The avatar, on the other hand, refers to the image displayed inside the chat itself, serving as the “profile image” of the chatbot and the user.

Settings

Make sure to enable the “Pop-up” option under the Appearance section to make the pop-up settings appear. In there, you’ll be able to choose an icon or enter a custom URL directly.

To change the avatar, simply check the “Avatar” boxes in the Appearance section and upload or select the desired images.

Shortcode

Using the shortcode of the chatbot, you can specify the icon param, with the URL of your icon, like this:

[mwai_chat icon="https://mywebsite.com/icon.png"]

To set the Avatar you can replace the name of the Chatbot by using a link instead of a regular text.

[mwai_chat ai_name="https://mywebsite.com/ai-avatar.png"]
[mwai_chat ai_name="https://mywebsite.com/ai-avatar.png" user_name="https://mywebsite.com/user-avatar.png"]

You can get the URL directly from your Media Library by clicking the “Copy URL to clipboard”.

If you keep the user_name empty and an user is connected, it will retrieve the gravatar or the avatar already set in WordPress for this user. Remember that by default, user_name is not empty and set to “User :”.

Displayed Texts

The chatbot displays various text elements inside and around the chat interface: the AI name, the user name, a name for guest users, a compliance text shown below the chatbot, an Icon text above the chatbot when it’s in pop-up mode and a Start Sentence to have a first message in the chat. You can customize all of these values individually in the chatbot settings under the Appearance section.

Settings

Simply change these values in the Appearance settings and check the preview on the right side to see how your modifications look. The Send and Clear settings correspond to the text inside the respective buttons. Depending on your selected theme, this text might not be visible—for example, the Timeless theme uses icons instead of button text.

There are a few placeholders available for you to use in your ai_name parameter. Generally, you would want to use {DISPLAY_NAME}, which is what the user would expect to see.

If you want to change the text that appears above the popup, make sure to go into the Popup settings. You can also change the placeholder text from there if needed.

You can style it by using its class : .mwai-icon-text.

Shortcode

You can change all of these settings through the shortcode as well. Here are an examples. You can refer to the image of the settings above, as the parameter names in the shortcode are the same as those used in the settings, make sure to use snake case for each of them. For instance “Icon Text” will be “icon_text”.

[mwai_chat user_name="{DISPLAY_NAME}: " guest_name="Jon Meow: "]

Positioning

If you haven’t noticed already from the other screenshots, there’s a position setting available in the Popup section.

Settings

Shortcode

[mwai_chat icon_position="bottom-left"]