Mai AI Pack

Mai AI Pack is built exclusively for Mai Theme v2 themes and utilizes the power of Dappier AI via our direct partnership.

Requirements

Mai Engine plugin via any Mai Theme v2 theme.
Dappier plugin (automatically installed with Mai AI Pack plugin).

Installation and Configuration

Download and install manually like a typical WordPress plugin.
Visit Dashboard > Dappier and follow the instructions to create your account on Dappier.com as well as get an API key to connect your website to Dappier.
Once configured, you can let the Dappier plugin automatically insert the AskAI module before or after your post content, use the [dappier_askai] shortcode (see below), or use a Content Area.

Mai Content Area

Mai AI Pack comes with 2 Content Areas ready to go. Visit Dashboard > Mai Theme > Content Areas to generate and use the following Content Areas:

AI Search Results - Displays the AskAI module before the default search results in WordPress. The AskAI module will be prefilled with the search phrase and help increase engagement on page time.
AI Related Posts - Displays highly relevant, related posts powered by Dappier AI after your post content.

If you're using Mai Custom Content Areas plugin, you can use the pattern from the Content Areas above and inject the AskAI module anywhere you want.

Mai Post Grid (Related Posts)

Mai AI Pack adds new controls for Mai Post Grid to get related entries via your AI Agent in Dappier.

The ordering options for Related Post are as follows:

Ordered by Relevance - The most relevant posts first.
Ordered by Trending - Uses Google trending tags to retrieve related content ordered by what's currently trending in Google.
Ordered by Date - Related posts ordered with the newest posts first.

Dappier AskAI Shortcode

The [dappier_askai] shortcode allows you to embed the Dappier AI chat widget anywhere in your WordPress content.

Basic Shortcode Usage

[dappier_askai]

Available Parameters

Basic Settings

location - Widget placement identifier (default: 'shortcode'). This is used to add
widget_id - Custom widget ID.
title - Custom widget title. (default: no title)
search_placeholder_text - Placeholder text for search input.
ask_button_text - Custom text for ask button.

Visual Elements

main_logo_url - URL for main logo.
chat_icon_url - URL for chat icon.
user_chat_icon_color - Color for user chat icon.
ask_button_text_color - Text color for ask button.
ask_button_background_color - Background color for ask button.
main_background_color - Background color of module.
theme_color - Theme accent color.
prompt_suggestion_background_color - Background color for prompt suggestions.
prompt_suggestion_text_color - Text color for prompt suggestions.
message_background_color - Background color for messages.
message_text_color - Text color for messages.
search_box_background_color - Background color for search box.
search_box_text_color - Text color for search box.
search_placeholder_text_color - Text color for search placeholder.
title_color - Color for module title.
content_rec_site_name_color - Color for site name in recommendations.

Layout & Sizing

container_margin_desktop - Container margin on desktop.
container_margin_mobile - Container margin on mobile.
container_padding_desktop - Container padding on desktop.
container_padding_mobile - Container padding on mobile.
container_radius - Border radius for container.
prompt_suggestion_radius - Border radius for prompt suggestions.
search_box_radius - Border radius for search box.
ask_button_radius - Border radius for ask button.
element_radius - Border radius for elements.
main_logo_width_mobile - Logo width on mobile devices.
chat_icon_width_mobile - Chat icon width on mobile devices.
main_logo_width_desktop - Logo width on desktop.
chat_icon_width_desktop - Chat icon width on desktop.
font_size_header_mobile - Header font size on mobile.
font_size_default_mobile - Default font size on mobile.
font_size_header_desktop - Header font size on desktop.
font_size_default_desktop - Default font size on desktop.
fixed_height - Fixed height (mobile only).
max_height - Maximum height (desktop only).
max_height_mobile - Maximum height on mobile.
height_mode_mobile - Height mode on mobile ('fixed' or 'max').

Feature Toggles

enable_title - Show/hide title (true/false).
enable_prompt_suggestions - Enable prompt suggestions (true/false).
enable_content_recommendations - Enable content recommendations (true/false).
enable_related_content_new_window - Open recommended content in new window (true/false).
enable_site_name - Show site name in recommendations (true/false).

Advanced Settings

referring_url - Custom referring URL.
initial_search_query - Initial search query. This can be keywords or a url.
show_initial_search_query - Show initial search query in chat response (true/false).
disclaimer_link - URL for disclaimer.

Examples

Basic Implementation

[dappier_askai]

Custom Styling

[dappier_askai main_background_color="#f5f5f5" search_box_text_color="#333333" theme_color="#FF0000" search_box_radius="8px"]

Mobile-Optimized

[dappier_askai main_logo_width_mobile="60" chat_icon_width_mobile="20" font_size_header_mobile="16px" font_size_default_mobile="14px" height_mode_mobile="max" max_height_mobile="500px"]

Notes

The shortcode requires the Dappier plugin to be properly configured with valid API credentials.
All parameters are optional. If not specified, they will use the default settings Mai Theme, with overrides via the global settings configured via Dashboard > Dappier settings page.
Color values must be specified as a hex value.
Width values are treated as pixels and should be specified without units.
The shortcode automatically inherits Mai Theme or global plugin settings but any parameter passed to the shortcode will override these values.

Developers

The shortcode output can be modified using the following filters:

dappier_askai_attributes - Modify module attributes before rendering.
dappier_askai_html - Modify final HTML output.

Example filter usage:

/**
 * Modify the Dappier AskAI settings/attributes.
 *
 * @param array The existing attributes.
 *
 * @return array
 */
add_filter( 'dappier_askai_attributes', function( $attributes ) {
	// Modify attributes.
	$attributes['theme_color'] = '#000000';

	return $attributes;
});