Comment intégrer un widget de chat sur toutes les pages de ma boutique PrestaShop ?

Le plus simple est d'insérer le snippet JavaScript du widget dans le fichier footer.tpl de votre thème (themes/votre-theme/templates/_partials/footer.tpl sur PrestaShop 1.7/8.x), juste avant la balise de fermeture. Assurez-vous d'utiliser l'attribut async pour ne pas ralentir le chargement de vos pages. Pour une solution plus pérenne, créez un module qui se greffe sur le hook displayFooterBefore.

Mes modifications dans les fichiers TPL disparaissent après une mise à jour du thème, que faire ?

C'est le comportement normal : les mises à jour écrasent les fichiers du thème. Deux solutions : soit vous travaillez dans un thème enfant (recommandé pour les modifications TPL), soit vous créez un module PrestaShop dédié qui injecte votre widget via le système de hooks. Le module est indépendant du thème et survivra à toutes les mises à jour.

Puis-je intégrer un widget sans accès FTP sur PrestaShop Cloud ?

Oui, utilisez le module natif 'Bloc de texte personnalisé' ou un module similaire disponible dans le back-office. Il permet de coller du code HTML et JavaScript dans un hook sans modifier les fichiers du thème. Vérifiez également si votre offre cloud propose un accès SFTP dans le tableau de bord.

Où placer un pixel de tracking (Google Analytics, Meta Pixel) dans PrestaShop ?

Les pixels de tracking doivent être placés dans la section de votre site. Sur PrestaShop 1.7/8.x, modifiez le fichier head.tpl ou utilisez le hook displayHeader dans un module. Pensez à conditionner le chargement au consentement RGPD de l'utilisateur via un gestionnaire de cookies comme Tarteaucitron.

Mon widget externe ralentit ma boutique PrestaShop, comment l'optimiser ?

Trois actions essentielles : 1) Chargez le script en mode asynchrone avec les attributs async ou defer. 2) Retardez le chargement du widget après l'événement DOMContentLoaded si possible. 3) Utilisez un gestionnaire de consentement qui ne charge le widget qu'après acceptation des cookies, ce qui améliore le temps de chargement initial pour tous les visiteurs qui n'ont pas encore donné leur consentement.

Intégrer un widget externe dans votre thème PrestaShop

L'intégration de widgets tiers — chat en ligne, avis clients, pixels de tracking, bandeau de cookies — est l'une des demandes les plus fréquentes en e-commerce. Sur PrestaShop, cette opération repose sur la modification des fichiers templates (.tpl en Smarty, ou .twig depuis PrestaShop 8.x pour le back-office) et sur la bonne compréhension du système de hooks.

Voici la méthode professionnelle pour intégrer proprement n'importe quel snippet externe sans compromettre la maintenabilité de votre boutique.

Comprendre l'architecture des templates PrestaShop

Avant de coller un script dans un fichier au hasard, il faut comprendre comment PrestaShop construit ses pages.

Chaque page visible par vos visiteurs est générée à partir de fichiers templates situés dans le dossier de votre thème :


/themes/votre-theme/
├── templates/
│   ├── layouts/
│   │   └── layout-both-columns.tpl   # Structure globale
│   ├── _partials/
│   │   ├── head.tpl                   # Balises <head>
│   │   ├── header.tpl                 # En-tête du site
│   │   └── footer.tpl                 # Pied de page
│   ├── index.tpl                      # Page d'accueil
│   ├── catalog/
│   │   └── product.tpl                # Fiche produit
│   └── checkout/
│       └── cart.tpl                   # Panier

Sur PrestaShop 1.6, la structure est légèrement différente : les fichiers se trouvent directement à la racine du dossier du thème (/themes/votre-theme/header.tpl, footer.tpl, etc.).

Quel fichier modifier selon le type de widget ?

Type de widgetFichier cibleEmplacement dans le HTML Pixel de tracking (Analytics, Meta)`head.tpl`Juste avant `` Chat en ligne (Crisp, Tawk.to)`footer.tpl`Juste avant `` Avis clients (Trustpilot, Avis Vérifiés)`product.tpl`Après la description produit Bandeau cookies (Axeptio, Tarteaucitron)`footer.tpl` ou `head.tpl`Selon la documentation du service Widget personnalisé (formulaire, carte)Template de la page concernéeÀ l'endroit souhaité

Méthode 1 : insertion directe dans le template (rapide)

Cette méthode convient pour un widget simple qui doit apparaître sur toutes les pages.

Étape 1 : accéder aux fichiers du thème

Connectez-vous à votre serveur via FTP (FileZilla, WinSCP) ou via le gestionnaire de fichiers de votre hébergeur. Naviguez jusqu'au dossier de votre thème actif.

Cas particulier — PrestaShop Cloud : si vous utilisez l'offre cloud de PrestaShop, l'accès FTP est restreint. Vérifiez dans votre tableau de bord cloud si un accès SFTP est proposé, ou utilisez le module "HTML personnalisé" comme alternative.

Étape 2 : identifier le bon fichier

Pour un widget de type chat ou script global, ouvrez footer.tpl (PrestaShop 1.7/8.x : themes/votre-theme/templates/_partials/footer.tpl).

Étape 3 : coller le snippet

Insérez le code JavaScript fourni par le service tiers juste avant la balise de fermeture :


{* Widget chat - Ajouté le JJ/MM/AAAA *}
<script>
  // Coller ici le snippet fourni par le service
  (function() {
    var s = document.createElement('script');
    s.src = 'https://widget.example.com/loader.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Conseil : ajoutez toujours un commentaire Smarty {* ... *} indiquant la date et l'objet du widget. Vous vous remercierez dans six mois.

Méthode 2 : utiliser les hooks PrestaShop (recommandée)

L'insertion directe fonctionne, mais elle a un défaut majeur : lors d'une mise à jour du thème, vos modifications sont écrasées. La méthode professionnelle consiste à utiliser le système de hooks via un module.

Créer un micro-module d'intégration

Créez un module dédié qui injecte votre widget via un hook. Voici un squelette fonctionnel :


<?php
/**
 * Module d'intégration de widget externe
 */
class MyWidgetIntegration extends Module
{
    public function __construct()
    {
        $this->name = 'mywidgetintegration';
        $this->version = '1.0.0';
        $this->author = 'Votre nom';
        $this->tab = 'front_office_features';
        $this->need_instance = 0;
        $this->bootstrap = true;

        parent::__construct();

        $this->displayName = $this->l('Mon Widget');
        $this->description = $this->l('Intègre le widget XYZ sur la boutique.');
    }

    public function install()
    {
        return parent::install()
            && $this->registerHook('displayFooterBefore')
            && $this->registerHook('displayHeader');
    }

    /**
     * Injection dans le <head> (CSS, meta)
     */
    public function hookDisplayHeader()
    {
        // Charger un CSS si nécessaire
        $this->context->controller->addCSS($this->_path . 'views/css/widget.css');
    }

    /**
     * Injection avant le footer (widget visible)
     */
    public function hookDisplayFooterBefore()
    {
        return $this->display(__FILE__, 'views/templates/hook/widget.tpl');
    }
}

Hooks les plus utiles pour les widgets

HookPositionUsage typique `displayHeader```Scripts de tracking, CSS `displayTop`Haut de pageBandeau promotionnel `displayFooterBefore`Avant le footerChat, widgets flottants `displayFooter`Dans le footerLiens, badges de confiance `displayProductAdditionalInfo`Fiche produitAvis, badges `displayAfterBodyOpeningTag`Après ``Tag managers

Avantages de la méthode par module

**Résistant aux mises à jour** : le module survit à un changement de thème
**Activable/désactivable** : un clic dans le back-office suffit
**Configurable** : ajoutez une page de configuration pour stocker la clé API du widget
**Réutilisable** : transférable sur d'autres boutiques

Méthode 3 : le module "HTML personnalisé" (sans code)

Si vous n'êtes pas à l'aise avec le code, PrestaShop propose nativement le module "Bloc de texte personnalisé" (ou équivalent selon la version). Il permet d'injecter du HTML/JavaScript dans un hook sans toucher aux fichiers.

Allez dans **Modules > Module Manager**
Recherchez "HTML" ou "Texte personnalisé"
Configurez le module en collant votre snippet
Choisissez le hook de destination (footer, header, etc.)

Cette méthode est limitée mais suffisante pour un pixel de tracking ou un widget simple.

Bonnes pratiques pour l'intégration de widgets

Performance : chargement asynchrone obligatoire

Un widget externe mal intégré peut ralentir votre boutique de plusieurs secondes. Assurez-vous que le script est chargé en asynchrone :


<!-- ✅ Bon : chargement asynchrone -->
<script src="https://widget.example.com/loader.js" async defer></script>

<!-- ❌ Mauvais : bloque le rendu de la page -->
<script src="https://widget.example.com/loader.js"></script>

RGPD : conditionner le chargement au consentement

Depuis le RGPD, tout widget qui dépose des cookies (analytics, chat, réseaux sociaux) doit être conditionné au consentement de l'utilisateur. Utilisez un gestionnaire de consentement comme Tarteaucitron ou Axeptio :


// Exemple avec Tarteaucitron
tarteaucitron.services.monWidget = {
    key: 'monWidget',
    type: 'support',
    name: 'Mon Widget',
    needConsent: true,
    cookies: ['_widget_session'],
    js: function () {
        // Code de chargement du widget
    }
};

Thème enfant : protéger vos modifications

Si vous optez pour la méthode 1 (modification directe des TPL), travaillez impérativement dans un thème enfant pour que vos modifications survivent aux mises à jour :


# config/theme.yml du thème enfant
parent: classic
name: mon-theme-enfant
display_name: Mon Thème Personnalisé
version: 1.0.0

Déboguer un widget qui ne s'affiche pas

Si votre widget reste invisible après intégration, vérifiez ces points dans l'ordre :

**Console du navigateur** (F12) : erreurs JavaScript ? Ressource bloquée par CORS ?
**Cache PrestaShop** : videz le cache dans **Paramètres avancés > Performances**
**Cache Smarty** : désactivez la compilation forcée pendant le développement
**Content Security Policy** : votre serveur bloque-t-il les scripts externes via les en-têtes CSP ?
**Position du hook** : vérifiez dans **Design > Positions** que votre module est bien greffé sur le bon hook


# Vider le cache manuellement si le back-office est inaccessible
rm -rf var/cache/prod/*
rm -rf var/cache/dev/*

Résumé : quelle méthode choisir ?

Pour une intégration pérenne et professionnelle, la méthode par module reste la référence. Pour un besoin ponctuel ou un test rapide, l'édition directe du TPL dans un thème enfant fait parfaitement l'affaire.

Intégrer un widget externe dans votre thème PrestaShop

Intégrer un widget externe dans votre thème PrestaShop

Comprendre l'architecture des templates PrestaShop

Quel fichier modifier selon le type de widget ?

Méthode 1 : insertion directe dans le template (rapide)

Étape 1 : accéder aux fichiers du thème

Étape 2 : identifier le bon fichier

Étape 3 : coller le snippet

Méthode 2 : utiliser les hooks PrestaShop (recommandée)

Créer un micro-module d'intégration

Hooks les plus utiles pour les widgets

Avantages de la méthode par module

Méthode 3 : le module "HTML personnalisé" (sans code)

Bonnes pratiques pour l'intégration de widgets

Performance : chargement asynchrone obligatoire

RGPD : conditionner le chargement au consentement

Thème enfant : protéger vos modifications

Déboguer un widget qui ne s'affiche pas

Résumé : quelle méthode choisir ?

Questions fréquentes

Lire sur le blog