Comment installer le Messenger Notiondesk sur votre site web

Notiondesk Messenger intègre votre centre d'aide Notiondesk directement dans votre site web ou application web.

Les visiteurs peuvent utiliser Messenger pour consulter votre centre d'aide, lire des articles, discuter avec votre assistant IA, consulter les mises à jour du journal des modifications et contacter votre équipe sans quitter votre site web.

Ce guide explique comment installer Notiondesk Messenger sur un site web standard.

Avant de commencer

Avant d'installer Notiondesk Messenger, assurez-vous d'avoir :

• Centre d'aide Notiondesk

• Un messager configuré dans Notiondesk

• Accès au code de votre site Web ou aux paramètres de code personnalisés pour l'ensemble du site

• Votre extrait d'installation unique de Messenger Notiondesk

Si vous souhaitez que les visiteurs utilisent l'assistant IA dans Messenger, configurez également le chatbot IA Notiondesk. Consultez la section « Configurer et activer le chatbot IA » .

Choisissez une méthode d'installation

Utilisez la méthode d'installation qui correspond à votre site web.

Pour la plupart des sites web traditionnels, l'extrait de code JavaScript est la méthode d'installation la plus simple.

Installer Messenger sur un site web standard

1. Copiez votre code d'installation Messenger

Ouvrez vos paramètres Messenger dans Notiondesk et trouvez la section Installation .

Copiez l'extrait de code d'installation généré pour votre Messenger.

Le code a le format suivant :

YOUR_MESSENGER_ID identifie le Messenger qui doit se charger sur votre site web.

Copiez l'extrait depuis votre propre tableau de bord Notiondesk au lieu de copier un identifiant Messenger depuis un autre site web ou compte.

2. Ajoutez l'extrait de code à votre site web

Collez l'extrait Messenger juste avant la balise de fermeture </body> :

Si votre site web utilise une mise en page, un modèle, un pied de page ou une section de code personnalisé partagés à l'échelle du site, ajoutez-y l'extrait de code une seule fois afin que Messenger se charge sur l'ensemble du site web.

Si Messenger ne doit apparaître que sur certaines pages, incluez l'extrait de code uniquement sur ces pages.

3. Publiez vos modifications

Enregistrez et déployez ou publiez votre site web après avoir ajouté l'extrait de code.

Le code Messenger doit figurer sur le site web publié. L'ajout de ce code uniquement à une version locale ou non publiée ne permettra pas aux visiteurs d'accéder à Messenger.

<script
  async
  src="https://static.notiondesk.help/messenger/widget.js"
  data-messenger-id="YOUR_MESSENGER_ID">
</script>

<body>
  <!-- Your website -->

  <script
    async
    src="https://static.notiondesk.help/messenger/widget.js"
    data-messenger-id="YOUR_MESSENGER_ID">
  </script>
</body>

Vérifiez l'installation

Ouvrez le site web publié dans votre navigateur.

Une installation réussie devrait charger le lanceur Messenger Notiondesk sur les pages contenant le code d'installation.

Ouvrez Messenger et vérifiez que le contenu attendu Notiondesk apparaît.

Vous pouvez tester :

• Ouvrir et fermer Messenger

• Recherche dans votre centre d'aide

• Ouvrir un article

• Démarrage d'une conversation avec l'IA si le chatbot IA est activé

• Ouvrir d'autres sections de Messenger que vous avez activées

Si Messenger n'apparaît pas, ouvrez les outils de développement de votre navigateur et vérifiez si le widget se charge correctement.

React, Next.js, Vue, Nuxt et SPA

React, Next.js, Vue, Nuxt et autres applications monopages doivent utiliser le package officiel @notiondesk-so/messenger-js-sdk au lieu d'ajouter manuellement l'extrait de script standard.

Installez le paquet avec :

Vous pouvez également l'installer avec Yarn ou pnpm.

Le SDK propose des intégrations dédiées pour :

npm install @notiondesk-so/messenger-js-sdk

• JavaScript et TypeScript

• Réagir

• Next.js

• Vue

• Nuxt

Le SDK fournit également des méthodes pour afficher, masquer, activer/désactiver, configurer et supprimer Messenger.

Les intégrations de framework doivent initialiser Messenger côté client. N'initialisez pas le SDK Messenger lors du rendu côté serveur.

N’installez pas à la fois l’extrait de code Messenger standard et le SDK dans la même application, sauf si vous gérez intentionnellement des instances Messenger distinctes.

Pour une configuration complète du framework, consultez le guide d'installation de Notiondesk Messenger avec React et Next.js.

Dépannage