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

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

Installation and Configuration

  1. Download and install manually like a typical WordPress plugin.
  2. 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.
  3. Once configured, you can let the Dappier plugin automatically insert the AskAI module before or after your post content, use the Dappier AskAI block or the [dappier_askai] shortcode (see below) directly in a page or a Content Area.

Dappier AskAI block

The Dappier AskAI block gives you the freedom to add an AskAI module anywhere on your site, with simple configuration and styling options. This is a native block that doesn't require any dependencies, it's ready to use.

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.

Available Settings

  • Search Placeholder Text
  • Ask Button Text
  • Show Prompt Suggestions toggle
  • Show Content Recommendations toggle
  • Show Initial Search Query toggle (for use when adding the block to the search results page)
  • Main Background Color
  • Accent Color
  • Prompt Suggestion Background Color
  • Prompt Suggestion Text Color
  • Ask Button Background Color
  • Ask Button Text Color

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:

  1. Ordered by Relevance - The most relevant posts first.
  2. Ordered by Trending - Uses Google trending tags to retrieve related content ordered by what's currently trending in Google.
  3. 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

  1. The shortcode requires the Dappier plugin to be properly configured with valid API credentials.
  2. 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.
  3. Color values must be specified as a hex value.
  4. Width values are treated as pixels and should be specified without units.
  5. 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;
});
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us