askIABot

WordPress Integration

Add AskIA widget to your WordPress website in minutes.

Method 1: Functions.php (Recommended)

Add the widget code to your theme's functions.php file:

functions.php
function add_askia_widget() {
    $bot_id = 'YOUR_BOT_ID'; // Replace with your bot ID
    $script_url = 'askiabot.com/api/widget/embed.js?botId=' . $bot_id;
    ?>
    <script src="<?php echo esc_url($script_url); ?>" async></script>
    <?php
}
add_action('wp_footer', 'add_askia_widget');
Important: Always use a child theme when modifying functions.php to prevent losing changes when the theme updates.

Method 2: Plugin

Create a simple WordPress plugin for better maintainability:

Plugin File

askia-widget.php
<?php
/**
 * Plugin Name: AskIA Widget
 * Description: Add AskIA chatbot widget to your WordPress site
 * Version: 1.0.0
 * Author: Your Name
 */

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

class AskIA_Widget {
    private $bot_id;

    public function __construct() {
        // Get bot ID from settings or use default
        $this->bot_id = get_option('askia_bot_id', 'YOUR_BOT_ID');
        add_action('wp_footer', array($this, 'add_widget_script'));
        add_action('admin_menu', array($this, 'add_admin_menu'));
        add_action('admin_init', array($this, 'register_settings'));
    }

    public function add_widget_script() {
        if (empty($this->bot_id) || $this->bot_id === 'YOUR_BOT_ID') {
            return; // Don't load if not configured
        }
        
        $script_url = 'askiabot.com/api/widget/embed.js?botId=' . esc_js($this->bot_id);
        ?>
        <script src="<?php echo esc_url($script_url); ?>" async></script>
        <?php
    }

    public function add_admin_menu() {
        add_options_page(
            'AskIA Widget Settings',
            'AskIA Widget',
            'manage_options',
            'askia-widget',
            array($this, 'settings_page')
        );
    }

    public function register_settings() {
        register_setting('askia_settings', 'askia_bot_id');
    }

    public function settings_page() {
        ?>
        <div class="wrap">
            <h1>AskIA Widget Settings</h1>
            <form method="post" action="options.php">
                <?php settings_fields('askia_settings'); ?>
                <table class="form-table">
                    <tr>
                        <th scope="row">
                            <label for="askia_bot_id">Bot ID</label>
                        </th>
                        <td>
                            <input 
                                type="text" 
                                id="askia_bot_id" 
                                name="askia_bot_id" 
                                value="<?php echo esc_attr($this->bot_id); ?>" 
                                class="regular-text"
                                placeholder="Enter your bot ID"
                            />
                            <p class="description">
                                Find your bot ID in the AskIA dashboard under your bot&apos;s Snippet page.
                            </p>
                        </td>
                    </tr>
                </table>
                <?php submit_button(); ?>
            </form>
        </div>
        <?php
    }
}

// Initialize the plugin
new AskIA_Widget();

Installing the Plugin

  1. Create a new folder: wp-content/plugins/askia-widget/
  2. Save the code above as askia-widget.php in that folder
  3. Go to WordPress Admin → Plugins
  4. Activate "AskIA Widget"
  5. Go to Settings → AskIA Widget
  6. Enter your bot ID and save

Method 3: Page Builder (Elementor, Gutenberg)

For page builders, you can add the script using HTML blocks:

Elementor

  1. Add an "HTML" widget to your page
  2. Paste the script code in the HTML field
  3. Update the page

Gutenberg

  1. Add a "Custom HTML" block
  2. Paste the script code
  3. Update the page
<script src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID" async></script>

Method 4: Header/Footer Plugin

If you use a header/footer plugin like "Insert Headers and Footers":

  1. Install the plugin
  2. Go to Settings → Insert Headers and Footers
  3. Paste the script in the "Scripts in Footer" section
  4. Save changes

Configuration

After adding the widget, configure your bot:

  1. Go to your AskIA dashboard
  2. Navigate to your bot's Settings
  3. Add your WordPress domain to "Allowed Domains"
  4. Save and activate your bot

Domain Configuration

For WordPress sites, add your domain in the format:

  • yoursite.com (main domain)
  • www.yoursite.com (if you use www)
Note: Subdomains are automatically allowed. If you whitelist yoursite.com, blog.yoursite.com will also work.

Testing

  1. Add the widget code to your WordPress site
  2. Ensure your domain is whitelisted in bot settings
  3. Activate your bot
  4. Visit your WordPress site
  5. Look for the chat bubble in the corner
  6. Click to test the chat

Troubleshooting

Widget Not Appearing

  • Check that your bot is activated
  • Verify your domain is whitelisted
  • Clear WordPress cache (if using caching plugins)
  • Check browser console for JavaScript errors
  • Ensure the script is in the footer, not header

Caching Issues

If you use caching plugins (WP Super Cache, W3 Total Cache, etc.):

  • Clear all caches after adding the widget
  • Exclude the widget script from minification
  • Test in incognito mode to bypass cache

Best Practices

  • Use Child Theme: Always modify functions.php in a child theme
  • Plugin Method: Creating a plugin is more maintainable
  • Environment Variables: Store bot ID in WordPress options for easy updates
  • Test First: Test on a staging site before going live

Next Steps

Widget Guide

Learn more about widget integration

Installation Guide

General installation instructions