Intégration WordPress

Ajoutez le widget AskIA à votre site WordPress en quelques minutes.

Méthode 1 : Functions.php (Recommandée)

Ajoutez le code du widget dans le fichier functions.php de votre thème :

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 : Utilisez toujours un thème enfant lors de la modification de functions.php pour éviter de perdre vos modifications lors des mises à jour du thème.

Méthode 2 : Plugin

Créez un plugin WordPress simple pour une meilleure maintenabilité :

Fichier Plugin

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's Snippet page.
                            </p>
                        </td>
                    </tr>
                </table>
                <?php submit_button(); ?>
            </form>
        </div>
        <?php
    }
}

// Initialize the plugin
new AskIA_Widget();

Installer le Plugin

  1. Créez un nouveau dossier : wp-content/plugins/askia-widget/
  2. Enregistrez le code ci-dessus sous le nom askia-widget.php dans ce dossier
  3. Allez dans Admin WordPress → Extensions
  4. Activez "AskIA Widget"
  5. Allez dans Réglages → AskIA Widget
  6. Entrez votre ID de bot et enregistrez

Méthode 3 : Constructeur de Page (Elementor, Gutenberg)

Pour les constructeurs de page, vous pouvez ajouter le script en utilisant des blocs HTML :

Elementor

  1. Ajoutez un widget "HTML" à votre page
  2. Collez le code script dans le champ HTML
  3. Mettez à jour la page

Gutenberg

  1. Ajoutez un bloc "HTML personnalisé"
  2. Collez le code script
  3. Mettez à jour la page
<script src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID" async></script>

Méthode 4 : Plugin Header/Footer

Si vous utilisez un plugin header/footer comme "Insert Headers and Footers" :

  1. Installez le plugin
  2. Allez dans Réglages → Insert Headers and Footers
  3. Collez le script dans la section "Scripts in Footer"
  4. Enregistrez les modifications

Configuration

Après avoir ajouté le widget, configurez votre bot :

  1. Allez dans votre tableau de bord AskIA
  2. Naviguez vers les Paramètres de votre bot
  3. Ajoutez votre domaine WordPress dans "Domaines autorisés"
  4. Enregistrez et activez votre bot

Configuration du Domaine

Pour les sites WordPress, ajoutez votre domaine au format :

  • votresite.com (domaine principal)
  • www.votresite.com (si vous utilisez www)
Note : Les sous-domaines sont automatiquement autorisés. Si vous autorisez votresite.com, blog.votresite.com fonctionnera aussi.

Tests

  1. Ajoutez le code widget à votre site WordPress
  2. Assurez-vous que votre domaine est en liste blanche dans les paramètres du bot
  3. Activez votre bot
  4. Visitez votre site WordPress
  5. Cherchez la bulle de chat dans le coin
  6. Cliquez pour tester le chat

Dépannage

Widget Non Affiché

  • Vérifiez que votre bot est activé
  • Vérifiez que votre domaine est en liste blanche
  • Videz le cache WordPress (si vous utilisez des plugins de cache)
  • Vérifiez les erreurs JavaScript dans la console du navigateur
  • Assurez-vous que le script est dans le footer, pas dans le header

Problèmes de Cache

Si vous utilisez des plugins de cache (WP Super Cache, W3 Total Cache, etc.) :

  • Videz tous les caches après avoir ajouté le widget
  • Excluez le script widget de la minification
  • Testez en mode navigation privée pour contourner le cache

Bonnes Pratiques

  • Utilisez un Thème Enfant : Modifiez toujours functions.php dans un thème enfant
  • Méthode Plugin : Créer un plugin est plus maintenable
  • Variables d'Environnement : Stockez l'ID du bot dans les options WordPress pour des mises à jour faciles
  • Testez d'Abord : Testez sur un site de staging avant la mise en production

Prochaines Étapes