---
description: Apprenez à installer un widget de chat en ligne sur votre site WordPress.
title: Installer le widget de chat du site Web sur WordPress
image: https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F3f43c48b21b24f4e8b02b100c0c8fab0
---

[Nouveau🤖 Les agents IA sont désormais en ligne sur respond.io! Rencontrez votre nouvel agent de réception, agent des ventes ou d'assistance. En savoir plus.![arrow-icon](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2Fe43213a7a9314673bd8d2060c25f9b87)](/fr/whatsapp-business-calling-api)

Aidez-moi avec... ⌘ 

1. [All Collections >](/fr/help)
2. [ Canaux >](/fr/help/channels)
3. [ Widget de chat du site web >](/fr/help/website-chat-widget)
4. Installer le widget de chat du site Web sur WordPress

# Installer le widget de chat du site Web sur WordPress

![Avatar](https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg)

JQ Lee

· 28 Aug 2025

3 min de lecture

L'ajout d'un widget de chat Web à votre site Web WordPress est un processus simple et rapide. Il ne nécessite aucune compétence en codage ni connaissance technique.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png?fm=jpg&q=80&w=500) 

## Préparation de l'installation

Pour installer un widget de chat Web sur WordPress, vous aurez besoin des éléments suivants :

* Accédez au tableau de bord WordPress de votre site.
* Un extrait de code pour votre widget de chat Web.

Si tu n’as pas encore d'extrait de code, tu le généreras lors de la création d'un [Widget de Chat Website](https://respond.io/fr/help/website-chat-widget/website-chat-widget-overview) ou en utilisant le [Plugin de Chat Facebook](https://respond.io/fr/help/facebook-messenger/facebook-chat-plugin) pour [Facebook Messenger](https://respond.io/fr/help/facebook-messenger/facebook-messenger-overview). 

> Si vous avez déjà les canaux connectés sur la plateforme respond.io et que vous devez récupérer l'extrait de code généré, suivez les instructions [ici](https://respond.io/fr/help/website-chat-widget/website-chat-widget-overview#finding%5Fthe%5Fwebsite%5Fchat%5Fwidget%5Fcode%5Fafter%5Fconnecting%5Fthe%5Fchannel).

Pour une installation réussie, assurez-vous que le domaine de votre site Web est renseigné. Il y a deux façons de procéder.

Accédez à respond.io **Paramètres** \> sélectionnez **Canaux** \> sélectionnez le canal de discussion de votre site Web > cliquez sur configurer > ajoutez un domaine de site Web. 

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1e7uaH6kDm1O7pGveCSLtj/cd6e069ed2d3ba023349b508560e3fab/screen-shot-2023-02-14-at-7-47-59-pm.png?fm=jpg&q=80&w=640) 

Accédez aux paramètres de respond.io > sélectionnez **Widgets de croissance** \> cliquez sur le widget que vous souhaitez ajouter à votre site Web > dans le bouton **Général** , ajoutez le domaine de votre site Web au champ **Domaines de sites Web** .

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3p3pQU8wHpzk061bqvS0Tr/65706ba2cdd4a08d5972ca1c7f0fe11f/chat-widget-settings.png?fm=jpg&q=80&w=640) 

## Installation sur WordPress

**Étape 1 : Connectez-vous à WordPress**

Accédez au tableau de bord d’administration WordPress de votre site Web et connectez-vous.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7BEtXv2z3DbKUr6hji7TOm/aeb0a76500168de0c4db1758459f36d4/install-webchat-on-word-press.png?fm=jpg&q=80&w=640) 

**Étape 2 : Accédez à la page des plugins**

Dans le panneau de navigation de gauche, cliquez sur **Plugins**. Sur la page des plugins, appuyez sur le bouton bleu **Ajouter un nouveau** en haut de la page.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/4yyIZmSrxmxdrhKGl8VcOl/b9881e62aab33064babb824daffbfe66/install-webchat-on-word-press-2.png?fm=jpg&q=80&w=640) 

**Étape 3 : Ajouter un nouveau plugin**

À l'aide de la barre de recherche, recherchez le plugin **WPCode** . Vous verrez de nombreuses options sur la page de résultats de recherche que vous pouvez utiliser, mais nous utiliserons le plugin "Insérer un en-tête et des pieds de page" de WPCode pour ce tutoriel. Appuyez sur le bouton **Installer maintenant** et assurez-vous d'activer le plugin pour l'utiliser.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/5GGHqfES2lXgv5NzIoFz1P/15f02cef289ef90f490c4aecd1601ce7/add_new_plugin.png?fm=jpg&q=80&w=640) 

**Étape 4 : Ouvrir la console des en-têtes et des pieds de page**

Dans le menu de navigation de gauche, cliquez sur Extraits de code et sélectionnez **En-tête & Pied de page** dans le sous-menu.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2DwpPlV3Td8AqC1JJByNz0/7806704ac1df123f86c8a1ecbe5a5afb/Screenshot_2025-04-09_at_5.34.35_PM.png?fm=jpg&q=80&w=640) 

**Étape 5 : Ajouter le script de chat en direct**

Copiez votre script de plugin depuis respond.io et collez-le dans la section **Script dans le pied de page** de la page de la console En-tête et pied de page.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/Ian351FEXVFMTGKlYGxmH/861c265623900ca5302d72ea4a4606ed/wpcode-live_chat_script.png?fm=jpg&q=80&w=640) 

Une fois le script collé, cliquez sur le bouton bleu "**Enregistrer**" en bas de la page.

**Fait!**

Ouvrez le site Web et consultez le plugin de chat. Vous le trouverez dans le coin inférieur droit. Désormais, les visiteurs de votre site Web peuvent discuter sans effort avec vous. Si vous avez utilisé les extraits de code générés à partir de la plateforme respond.io, vous pourrez gérer les conversations et mettre à jour l'apparence du widget à partir de la plateforme.

> Le widget de chat est désormais actif sur votre site Web !

## Identifier les utilisateurs connectés

> Cette section n'est applicable que si votre site Web dispose d'une fonction de connexion utilisateur.

**Étape 1 : Connectez-vous à votre compte WordPress**

Accédez au tableau de bord d’administration WordPress de votre site Web et connectez-vous.

**Étape 2 : Ouvrir les fichiers d’en-tête du thème**

Dans le menu de navigation de gauche, cliquez sur **Apparence** et sélectionnez **Éditeur de fichiers de thème**. Procédez à la sélection du fichier **Theme Header** .

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/64VlcD24OVD9CUaFiK9U5B/91eb153aabead2673c1674395a0605a1/identify-logged-in-users.png?fm=jpg&q=80&w=640) 

**Étape 3 : ajoutez l’ID utilisateur et le code de nom récupérés**

Copiez l’exemple de code ci-dessous et collez-le dans le fichier d’en-tête du thème. Une fois que tu as collé le code, clique sur le bouton **Mettre à jour le fichier** en bas de la page.

> L'exemple de code ci-dessous permet d'obtenir l'ID utilisateur, le prénom et le nom de famille de WordPress. N'hésitez pas à modifier si vous souhaitez obtenir d'autres champs de contact.

\`

**Étape 4 : Ouvrir la console des en-têtes et des pieds de page**

Dans le menu de navigation de gauche, cliquez sur **Paramètres** et sélectionnez le plugin **En-tête & Pied de page** dans le sous-menu des paramètres.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7gZgsdh0AM40EiyW1iCfQR/a5102c94de84f92388de60fe9b6f3602/wpcode-open_console.png?fm=jpg&q=80&w=640) 

**Étape 5 : Ajouter le script d'identification de l'utilisateur connecté**

Copiez l'exemple de code ci-dessous et collez-le dans la section **Script dans le pied de page** de la page de la console En-tête et pied de page. Notez que le script d'identification de l'utilisateur connecté **doit être placé au-dessus** du script de chat en direct **.**.

> L'exemple de code ci-dessous utilise l'ID utilisateur comme identifiant et le transmet avec le prénom et le nom. N'hésitez pas à modifier si vous souhaitez obtenir d'autres champs de contact.

```html
<script>  
      window.\_\_respond\_settings = {  
    	identifier: $wp\_ID,  
        firstName: $wp\_firstname,  
        lastName: $wp\_lastname,    
      };  
</script>
```

Une fois le script collé, cliquez sur le bouton bleu "**Enregistrer**" en bas de la page.

**Fait!**

Ouvrez le site Web et consultez le plugin de chat. Les utilisateurs connectés à votre WordPress peuvent être identifiés. Une fois que l'identifiant transmis correspond à un contact existant, la conversation en cours reprendra.

## FAQ et dépannage

### 

WPCode

Si vous utilisez un plugin de cache WordPress tel que WPCode, suivez ces étapes pour que le widget apparaisse correctement.

**Désactiver la fonctionnalité de minification des données pour JavaScript**

Accédez à **Paramètres WordPress** \> Sélectionnez **WPCode** \> Sur la page WPCode, sélectionnez **Optimisation des fichiers** onglet > décochez **Minifier les fichiers JavaScript**

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7u1DdW6UTB1nHdrE0QlgIB/f3412a5f90adf94cab31a67c4a42d108/css-and-js-files-minified-source-wp-rocket.png?fm=jpg&q=80&w=640) 

**Ajoutez notre domaine de widget aux fichiers Javascript exclus**

`https://cdn.respond.io/webchat/widget/(.*).js`

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3TcEXrKx1zKh7IhvT4G7Cp/6308494d1b35b918e250d3ebc387b87e/wp-rocket-javascript-excluded-files.png?fm=jpg&q=80&w=640) 

> Une fois enregistré, il est recommandé de vider le cache dans WordPress.

Partager cet article

[![Telegram](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F44daca77a4844f0c8fd29040ddeba057?width=22)](https://api.whatsapp.com/send?text=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Facebook](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/fff57eeb01160bc604392f519b4f3461ca16f0fa1b6a587b20b142cdf1ad0ba7?placeholderIfAbsent=true&width=22)](https://www.facebook.com/sharer/sharer.php?u=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Linkedin](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/7aaf8d87b5410844d83e06a4ed663e4f551b8c5ef51dbb20a8ff064a1eed9a0f?placeholderIfAbsent=true&width=22)](https://www.linkedin.com/sharing/share-offsite/?url=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Twitter](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F4e03e02422a94e8eab9b8b41457c2371?width=22)](http://twitter.com/share?url=https://respond.io/help/website-chat-widget/install-on-wordpress)

## 

Articles connexes 👩‍💻

* [Installer le widget de chat du site Web sur SquarespaceApprenez à installer un widget de chat en ligne sur votre site Web Squarespace. ](/fr/help/website-chat-widget/install-on-squarespace)
* [Installer le widget de chat du site Web sur JoomlaApprenez à installer un widget de chat en ligne sur votre site Joomla. ](/fr/help/website-chat-widget/install-on-joomla)
* [Installer le widget de chat sur le site WixApprends à installer un widget de chat sur ton site Wix. ](/fr/help/website-chat-widget/install-on-wix)
* [Installer le widget de chat du site web sur ShopifyApprenez à installer un widget de chat en ligne sur votre boutique Shopify. ](/fr/help/website-chat-widget/install-on-shopify)
* [Démarrage rapide du widget de chat du site Web.Ajoutez le widget de chat du site Web respond.io à votre site. ](/fr/help/website-chat-widget/website-chat-widget)

Vous ne trouvez pas ce que vous recherchez? 🔎

[Contacter le support technique](/fr/contact-us)

2025-12-05T03:57:45.596Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"Apprenez à installer un widget de chat en ligne sur votre site WordPress.","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg","name":"JQ Lee","url":"https://respond.io/fr/author"},"dateCreated":"2023-03-01T07:06:53.000Z","dateModified":"2025-08-28T08:51:51.275Z","datePublished":"2023-03-01T07:06:53.000Z","headline":"Installer le widget de chat du site Web sur WordPress","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","mainEntityOfPage":"https://respond.io/fr/help/website-chat-widget","publisher":{"@type":"Organization","logo":"https://respond.io/favicon/favicon.svg","name":"respondio"},"thumbnailUrl":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","url":"https://respond.io/fr/help/website-chat-widget/install-on-wordpress"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/fr/help","position":1},{"@type":"ListItem","name":"Canaux","item":"https://respond.io/fr/help/channels","position":2},{"@type":"ListItem","name":"Widget de chat du site web","item":"https://respond.io/fr/help/website-chat-widget","position":3},{"@type":"ListItem","name":"Installer le widget de chat du site Web sur WordPress","item":"https://respond.io/fr/help/website-chat-widget/install-on-wordpress","position":4}]}]
{
  "@context": "http://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "WPCode",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>If you are using a WordPress cache plugin such as WPCode, take these steps so that the widget appears correctly.</p><p><b>Disable data-minify feature for JavaScript</b></p><p>Go to <b>Wordpress Settings</b> > Select <b>WPCode</b> > On WPCode page, select <b>File Optimization</b> tab > untick <b>Minify JavaScript files</b></p> <p><b>Add our widget domain to the Javascript Excluded Files</b></p><p><code>https://cdn.respond.io/webchat/widget/(.*).js</code></p> <blockquote><p>Once saved, it is recommended to clear the cache in WordPress.</p></blockquote><p></p>"
      }
    }
  ]
}
```
