WordPress Integration

Add Ask0's AI search and chat to your WordPress website. Easy integration for adding intelligent assistance without coding.

Add Ask0 AI assistant to your WordPress site to help visitors find information and get support instantly.

Quick Setup

Get Your Project ID

Add via Plugin

Method 1: Insert Headers and Footers Plugin

Install "Insert Headers and Footers" plugin
Go to Settings → Insert Headers and Footers
Add to Footer section:

<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="YOUR_PROJECT_ID"
></script>

Verify Installation

Visit your WordPress site and look for the Ask0 widget in the bottom-right corner.

Installation Methods

Method 2: Theme Functions

Add to your theme's functions.php:

functions.php

function add_ask0_widget() {
  ?>
  <script
    src="https://assets.ask0.ai/scripts/ask.js"
    data-project-id="YOUR_PROJECT_ID"
    data-position="bottom-right"
    data-theme="auto"
    data-greeting="How can we help you today?"
  ></script>
  <?php
}
add_action('wp_footer', 'add_ask0_widget');

Method 3: Custom Plugin

Create a custom WordPress plugin:

ask0-integration/ask0-integration.php

<?php
/**
 * Plugin Name: Ask0 Integration
 * Description: Adds Ask0 AI assistant to your WordPress site
 * Version: 1.0
 * Author: Your Name
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Add Ask0 widget to footer
function ask0_add_widget() {
    $project_id = get_option('ask0_project_id');

    if ($project_id) {
        ?>
        <script
          src="https://assets.ask0.ai/scripts/ask.js"
          data-project-id="<?php echo esc_attr($project_id); ?>"
          data-position="<?php echo esc_attr(get_option('ask0_position', 'bottom-right')); ?>"
          data-theme="<?php echo esc_attr(get_option('ask0_theme', 'auto')); ?>"
        ></script>
        <?php
    }
}
add_action('wp_footer', 'ask0_add_widget');

// Add settings page
function ask0_add_admin_menu() {
    add_options_page(
        'Ask0 Settings',
        'Ask0',
        'manage_options',
        'ask0',
        'ask0_options_page'
    );
}
add_action('admin_menu', 'ask0_add_admin_menu');

// Settings page HTML
function ask0_options_page() {
    ?>
    <div class="wrap">
        <h1>Ask0 Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('ask0_settings');
            do_settings_sections('ask0_settings');
            ?>
            <table class="form-table">
                <tr>
                    <th scope="row">Project ID</th>
                    <td>
                        <input type="text" name="ask0_project_id"
                               value="<?php echo get_option('ask0_project_id'); ?>" />
                    </td>
                </tr>
                <tr>
                    <th scope="row">Position</th>
                    <td>
                        <select name="ask0_position">
                            <option value="bottom-right">Bottom Right</option>
                            <option value="bottom-left">Bottom Left</option>
                            <option value="center">Center</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Theme</th>
                    <td>
                        <select name="ask0_theme">
                            <option value="auto">Auto</option>
                            <option value="light">Light</option>
                            <option value="dark">Dark</option>
                        </select>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

// Register settings
function ask0_settings_init() {
    register_setting('ask0_settings', 'ask0_project_id');
    register_setting('ask0_settings', 'ask0_position');
    register_setting('ask0_settings', 'ask0_theme');
}
add_action('admin_init', 'ask0_settings_init');

WooCommerce Integration

Special configuration for WooCommerce sites:

// Show on product pages only
function ask0_woocommerce_integration() {
    if (is_product()) {
        ?>
        <script>
          window.ask0Config = {
            context: {
              page: 'product',
              productId: '<?php echo get_the_ID(); ?>',
              productName: '<?php echo get_the_title(); ?>',
              productPrice: '<?php echo get_post_meta(get_the_ID(), '_price', true); ?>'
            }
          };
        </script>
        <?php
    }
}
add_action('wp_head', 'ask0_woocommerce_integration');

// Add custom trigger on product pages
function ask0_product_help_button() {
    ?>
    <button onclick="window.ask0.open()" class="ask0-product-help">
        Need help with this product?
    </button>
    <?php
}
add_action('woocommerce_single_product_summary', 'ask0_product_help_button', 25);

User Identification

Identify logged-in users:

function ask0_identify_user() {
    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();
        ?>
        <script>
          window.addEventListener('ask0:ready', function() {
            window.ask0.identify({
              id: '<?php echo $current_user->ID; ?>',
              email: '<?php echo $current_user->user_email; ?>',
              name: '<?php echo $current_user->display_name; ?>',
              role: '<?php echo implode(',', $current_user->roles); ?>'
            });
          });
        </script>
        <?php
    }
}
add_action('wp_footer', 'ask0_identify_user');

Page-Specific Configuration

Show widget on specific pages:

function ask0_conditional_loading() {
    // Only load on certain pages
    if (is_page(['support', 'help', 'contact']) ||
        is_singular('post') ||
        is_shop()) {
        add_action('wp_footer', 'add_ask0_widget');
    }
}
add_action('init', 'ask0_conditional_loading');

Shortcode Support

Create a shortcode for Ask0:

// [ask0_button text="Ask AI" question="How do I get started?"]
function ask0_button_shortcode($atts) {
    $atts = shortcode_atts([
        'text' => 'Ask AI',
        'question' => '',
        'class' => 'ask0-button'
    ], $atts);

    $onclick = $atts['question']
        ? "window.ask0.ask('" . esc_js($atts['question']) . "')"
        : "window.ask0.open()";

    return sprintf(
        '<button onclick="%s" class="%s">%s</button>',
        $onclick,
        esc_attr($atts['class']),
        esc_html($atts['text'])
    );
}
add_shortcode('ask0_button', 'ask0_button_shortcode');

Use in content:

[ask0_button text="Need help?" question="How do I reset my password?"]

Gutenberg Block

Create a Gutenberg block:

ask0-block.js

const { registerBlockType } = wp.blocks;
const { Button } = wp.components;

registerBlockType('ask0/help-button', {
    title: 'Ask0 Help Button',
    icon: 'format-chat',
    category: 'common',

    attributes: {
        text: {
            type: 'string',
            default: 'Ask AI'
        },
        question: {
            type: 'string',
            default: ''
        }
    },

    edit: ({ attributes, setAttributes }) => {
        return (
            <div>
                <input
                    type="text"
                    value={attributes.text}
                    onChange={(e) => setAttributes({ text: e.target.value })}
                    placeholder="Button text"
                />
                <input
                    type="text"
                    value={attributes.question}
                    onChange={(e) => setAttributes({ question: e.target.value })}
                    placeholder="Preset question (optional)"
                />
            </div>
        );
    },

    save: ({ attributes }) => {
        const onclick = attributes.question
            ? `window.ask0.ask('${attributes.question}')`
            : 'window.ask0.open()';

        return (
            <button onclick={onclick} className="ask0-help-button">
                {attributes.text}
            </button>
        );
    }
});

Styling

Add custom styles:

style.css

/* Ask0 WordPress styles */
.ask0-widget {
  z-index: 999999; /* Above WordPress admin bar */
}

/* Custom trigger button */
.ask0-button,
.ask0-help-button {
  background: var(--wp--preset--color--primary);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.ask0-button:hover,
.ask0-help-button:hover {
  background: var(--wp--preset--color--secondary);
  transform: scale(1.05);
}

/* WooCommerce specific */
.ask0-product-help {
  display: block;
  width: 100%;
  margin-top: 20px;
  background: #f0f0f0;
  color: #333;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #ddd;
  cursor: pointer;
}

Multisite Support

For WordPress Multisite:

// Network-wide activation
function ask0_network_activation() {
    if (is_multisite()) {
        $sites = get_sites();
        foreach ($sites as $site) {
            switch_to_blog($site->blog_id);
            // Set default options for each site
            update_option('ask0_project_id', '');
            update_option('ask0_enabled', false);
            restore_current_blog();
        }
    }
}
register_activation_hook(__FILE__, 'ask0_network_activation');

// Per-site configuration
function ask0_multisite_config() {
    $blog_id = get_current_blog_id();
    $project_id = get_blog_option($blog_id, 'ask0_project_id');

    if ($project_id) {
        // Add widget with site-specific config
    }
}

Performance Optimization

Lazy load Ask0:

function ask0_lazy_load() {
    ?>
    <script>
    // Load Ask0 on first interaction
    let ask0Loaded = false;
    function loadAsk0() {
        if (!ask0Loaded) {
            const script = document.createElement('script');
            script.src = 'https://assets.ask0.ai/scripts/ask.js';
            script.dataset.projectId = '<?php echo get_option("ask0_project_id"); ?>';
            document.body.appendChild(script);
            ask0Loaded = true;
        }
    }

    // Load on scroll or click
    window.addEventListener('scroll', loadAsk0, { once: true });
    window.addEventListener('click', loadAsk0, { once: true });
    </script>
    <?php
}
add_action('wp_footer', 'ask0_lazy_load');