Skip to main content

WordPress Integration

Learn how to integrate ChatMaven with WordPress to add AI-powered chat support to your website.

Overview​

Features​

  • Easy installation
  • Visual customization
  • Page targeting
  • User authentication
  • Analytics integration
  • Multilingual support

Installation​

Plugin Installation​

  1. WordPress Admin

    • Go to Plugins > Add New
    • Search for "ChatMaven"
    • Click "Install Now"
    • Click "Activate"

  2. Manual Installation

    # Download and extract to wp-content/plugins
    wget https://chatmaven.ai/downloads/wordpress.zip
    unzip wordpress.zip -d /path/to/wp-content/plugins/

Configuration​

  1. API Setup

    • Get API key from ChatMaven dashboard
    • Enter API key in plugin settings
    • Configure bot settings
    • Save changes

  2. Basic Settings

    // Example configuration
    $chatmaven_config = array(
      'api_key' => 'YOUR_API_KEY',
      'bot_id' => 'YOUR_BOT_ID',
      'language' => 'en',
      'theme' => 'light'
    );

Widget Setup​

Placement​

  1. Global Integration

    // Add to footer.php
    <?php
    if (function_exists('chatmaven_widget')) {
      chatmaven_widget();
    }
    ?>

  2. Specific Pages

    // Conditional loading
    <?php
    if (is_page('contact') || is_page('support')) {
      chatmaven_widget(array(
        'position' => 'bottom-right',
        'theme' => 'dark'
      ));
    }
    ?>

Customization​

  1. Visual Settings

    /* Custom styles */
    .chatmaven-widget {
      --cm-primary-color: #0073aa;
      --cm-font-family: 'Your Font', sans-serif;
      --cm-border-radius: 12px;
    }

  2. Behavior Settings

    // Widget configuration
    window.chatmavenConfig = {
      autoOpen: false,
      greeting: 'Welcome to our site!',
      position: 'bottom-right',
      offset: {
        bottom: '20px',
        right: '20px'
      }
    };

Advanced Features​

User Integration​

  1. WordPress Authentication

    // User data integration
    add_filter('chatmaven_user_data', function($user_data) {
      if (is_user_logged_in()) {
        $current_user = wp_get_current_user();
        $user_data['name'] = $current_user->display_name;
        $user_data['email'] = $current_user->user_email;
        $user_data['role'] = $current_user->roles[0];
      }
      return $user_data;
    });

  2. Custom Fields

    // Add custom user data
    add_filter('chatmaven_custom_data', function($custom_data) {
      $custom_data['site_language'] = get_locale();
      $custom_data['theme'] = get_template();
      return $custom_data;
    });

Page Targeting​

// Target specific pages
add_filter('chatmaven_show_widget', function($show) {
  if (is_product() || is_cart() || is_checkout()) {
    return true;
  }
  return $show;
});

Multilingual Support​

// Language detection
add_filter('chatmaven_language', function($language) {
  if (function_exists('pll_current_language')) {
    return pll_current_language();
  }
  return $language;
});

WooCommerce Integration​

Product Support​

// Add product context
add_filter('chatmaven_context', function($context) {
  if (is_product()) {
    global $product;
    $context['product'] = array(
      'name' => $product->get_name(),
      'price' => $product->get_price(),
      'sku' => $product->get_sku()
    );
  }
  return $context;
});

Order Support​

// Add order information
add_action('woocommerce_order_status_changed', function($order_id) {
  $order = wc_get_order($order_id);
  chatmaven_track_event('order_updated', array(
    'order_id' => $order_id,
    'status' => $order->get_status()
  ));
});

Analytics​

Tracking​

  1. Event Tracking

    // Track custom events
    function track_chatmaven_event($event_name, $data = array()) {
      do_action('chatmaven_track_event', $event_name, $data);
    }

  2. User Analytics

    // Track user interactions
    add_action('wp_login', function($user_login) {
      track_chatmaven_event('user_login', array(
        'username' => $user_login
      ));
    });

Reporting​

// Generate reports
function get_chatmaven_report($start_date, $end_date) {
  return ChatMaven::analytics()->getReport(array(
    'start_date' => $start_date,
    'end_date' => $end_date,
    'metrics' => array('conversations', 'messages', 'satisfaction')
  ));
}

Performance​

Optimization​

  1. Script Loading

    // Optimize script loading
    add_action('wp_enqueue_scripts', function() {
      wp_enqueue_script(
        'chatmaven-widget',
        'https://cdn.chatmaven.ai/widget.js',
        array(),
        null,
        true
      );
    });

  2. Caching

    // Cache configuration
    add_filter('chatmaven_cache_config', function($config) {
      $config['ttl'] = 3600; // 1 hour
      $config['prefix'] = 'cm_cache_';
      return $config;
    });

Troubleshooting​

Common Issues​

  1. Widget Not Loading

    • Check API key
    • Verify script inclusion
    • Check console errors
    • Clear cache

  2. Style Conflicts

    /* Fix z-index issues */
    .chatmaven-widget {
      z-index: 999999 !important;
    }

Debug Mode​

// Enable debugging
define('CHATMAVEN_DEBUG', true);

// Log debug info
add_action('chatmaven_debug', function($message) {
  error_log('[ChatMaven] ' . $message);
});

Next Steps​

FAQ and troubleshooting​

The plugin is active but nothing shows on the site.​

Check the plugin settings for agent ID, placement (shortcode vs automatic), and that your theme outputs wp_footer. Disable conflicting optimization plugins that defer or strip scripts.

JavaScript errors in the console.​

Another plugin may conflict. Test with a default theme and plugins disabled, then re-enable one by one. Ensure minification does not break the ChatMaven bundle.

Does this work with page builders?​

Yes—use the provided shortcode or HTML block where the builder allows raw HTML/JavaScript. Some builders sandbox scripts; follow their “custom code” widget docs.