Ajouter le chatbot Crisp sur une Landing Page Next.js

Ajouter un chat en direct à votre Landing Page permet à vos visiteurs de poser leurs questions sans quitter votre site. Avec Crisp, vous pouvez intégrer rapidement une messagerie sur votre projet Next.js et centraliser les conversations avec vos prospects et utilisateurs.

Ce que vous allez accomplir :

• Créer et configurer votre espace Crisp
• Récupérer votre Website ID
• Stocker votre identifiant dans .env.local
• Créer un composant CrispChat réutilisable
• Charger Crisp automatiquement sur votre Landing Page
• Vérifier que le widget fonctionne correctement

1. Créer votre compte Crisp

Avant de modifier votre projet Next.js, vous devez disposer d'un espace Crisp.

Rendez-vous sur le site de Crisp et créez votre compte si ce n'est pas déjà fait.

Une fois connecté, ajoutez votre site internet à votre espace Crisp.

Pourquoi utiliser Crisp ?

• Ajouter facilement un chat à votre Landing Page
• Répondre directement aux visiteurs
• Centraliser les conversations avec vos prospects
• Automatiser certaines réponses
• Suivre les conversations depuis le dashboard Crisp

Une fois votre site créé dans Crisp, vous allez pouvoir récupérer l'identifiant nécessaire à son intégration dans Next.js.

2. Récupérer votre Website ID Crisp

Chaque site configuré dans Crisp possède un identifiant unique appelé Website ID.

Depuis votre dashboard Crisp, rendez-vous dans les paramètres de votre site puis dans les instructions d'installation.

Vous devriez obtenir un identifiant ressemblant à ceci :

112345678-abcd-1234-abcd-123456789abc

Important : Utilisez bien le Website ID correspondant au site sur lequel vous souhaitez afficher le chatbot.

Nous allons maintenant ajouter cet identifiant à notre projet Next.js.

3. Configurer la variable d'environnement

Pour éviter d'écrire directement votre Website ID dans votre composant, nous allons utiliser une variable d'environnement Next.js.

À la racine de votre projet, créez ou modifiez le fichier :

1.env.local

Ajoutez ensuite :

1# Website ID Crisp
2# Dashboard Crisp > Settings > Website Settings > Setup Instructions
3 
4NEXT_PUBLIC_CRISP_WEBSITE_ID="VOTRE_WEBSITE_ID"

Remplacez VOTRE_WEBSITE_ID par l'identifiant récupéré précédemment.

Par exemple :

1NEXT_PUBLIC_CRISP_WEBSITE_ID="12345678-abcd-1234-abcd-123456789abc"

Pourquoi NEXT_PUBLIC_ ?

Next.js n'expose pas automatiquement les variables d'environnement au navigateur. Le préfixe NEXT_PUBLIC_ indique que cette variable peut être utilisée côté client.

Dans notre cas, c'est nécessaire puisque le script Crisp est chargé dans le navigateur.

Après avoir modifié .env.local, pensez à redémarrer votre serveur de développement :

1pnpm dev

Si votre serveur était déjà lancé, arrêtez-le puis relancez-le afin que Next.js prenne en compte la nouvelle variable.

4. Créer le composant CrispChat

Nous allons maintenant créer un composant dédié au chargement de Crisp.

4.1 Créer le fichier

Créez le fichier suivant :

1src/components/CrispChat.tsx

Votre projet peut par exemple avoir cette structure :

1src/
2├── app/
3│   ├── globals.css
4│   ├── layout.tsx
5│   └── page.tsx
6│
7└── components/
8    └── CrispChat.tsx

4.2 Ajouter le script Crisp

Ajoutez le code suivant dans CrispChat.tsx :

1"use client";
2 
3import Script from "next/script";
4 
5// 👉 Remplacez la valeur ci-dessous par votre Website ID Crisp
6// (Dashboard Crisp > Settings > Website Settings > Setup Instructions)
7// Vous pouvez aussi la mettre dans .env.local sous NEXT_PUBLIC_CRISP_WEBSITE_ID
8const CRISP_WEBSITE_ID =
9  process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID || "VOTRE_WEBSITE_ID_ICI";
10 
11export default function CrispChat() {
12  return (
13    <Script id="crisp-widget" strategy="afterInteractive">
14      {`
15        window.$crisp = [];
16        window.CRISP_WEBSITE_ID = "${CRISP_WEBSITE_ID}";
17        (function () {
18          var d = document;
19          var s = d.createElement("script");
20          s.src = "https://client.crisp.chat/l.js";
21          s.async = 1;
22          d.getElementsByTagName("head")[0].appendChild(s);
23        })();
24      `}
25    </Script>
26  );
27}

4.3 Comprendre le composant

La première ligne est importante :

1"use client";

Crisp fonctionne dans le navigateur et utilise notamment l'objet window.

Notre composant doit donc être exécuté côté client.

Nous importons ensuite le composant Script fourni par Next.js :

1import Script from "next/script";

next/script permet de charger des scripts externes tout en contrôlant leur stratégie de chargement.

Nous récupérons ensuite notre Website ID :

1const CRISP_WEBSITE_ID =
2  process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID || "VOTRE_WEBSITE_ID_ICI";

Si NEXT_PUBLIC_CRISP_WEBSITE_ID existe dans .env.local, cette valeur sera utilisée.

La seconde valeur sert simplement de fallback pendant le développement.

5. Ajouter Crisp dans le Layout Next.js

Notre composant est prêt. Il faut maintenant l'ajouter au layout principal de l'application.

Avec l'App Router de Next.js, le fichier concerné est généralement :

1src/app/layout.tsx

Importez tout d'abord CrispChat :

1import CrispChat from "@/components/CrispChat";

Puis ajoutez le composant dans votre <body>.

Voici un exemple complet :

1import type { Metadata } from "next";
2import CrispChat from "@/components/CrispChat";
3import "./globals.css";
4 
5export const metadata: Metadata = {
6  title: "Coderoe — Tuto Chatbot Crisp sur Next.js",
7  description: "Landing page de démonstration avec Crisp Chat intégré.",
8};
9 
10export default function RootLayout({
11  children,
12}: {
13  children: React.ReactNode;
14}) {
15  return (
16    <html lang="fr">
17      <head>
18        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19        <title>Coderoe — Tuto Chatbot Crisp sur Next.js</title>
20      </head>
21 
22      <body>
23        {children}
24        <CrispChat />
25      </body>
26    </html>
27  );
28}

Pourquoi placer <CrispChat /> dans le layout ?

Le layout principal englobe les différentes pages de votre application. En ajoutant Crisp ici, le widget sera disponible automatiquement sur l'ensemble de votre Landing Page sans avoir à importer le composant dans chaque page.

Vous pouvez notamment le placer après {children} :

1<body>
2  {children}
3  <CrispChat />
4</body>

Votre contenu est alors affiché normalement et Crisp est chargé globalement.

6. Vérifier l'intégration

Votre configuration est maintenant terminée.

Démarrez votre projet :

1pnpm dev

Puis ouvrez :

1http://localhost:3000

Après le chargement de votre Landing Page, vous devriez voir apparaître le bouton Crisp dans un coin de l'écran.

Cliquez dessus pour ouvrir la fenêtre de conversation.

Si Crisp ne s'affiche pas

Commencez par vérifier votre fichier .env.local :

1NEXT_PUBLIC_CRISP_WEBSITE_ID="VOTRE_WEBSITE_ID"

Assurez-vous ensuite d'avoir redémarré le serveur après avoir modifié le fichier.

Vous pouvez également vérifier que le composant est bien présent dans votre layout :

1<CrispChat />

Enfin, vérifiez que votre composant commence bien par :

1"use client";

Astuce : Ouvrez la console de votre navigateur avec les outils de développement. Une erreur liée au chargement du script ou à votre configuration pourra généralement être identifiée rapidement depuis la console.

7. Personnaliser votre chatbot Crisp

Une fois Crisp correctement installé, vous pouvez personnaliser votre widget depuis votre dashboard.

Vous pouvez notamment adapter :

• La couleur du widget à votre Landing Page
• Le message d'accueil
• La disponibilité de votre équipe
• Les informations affichées aux visiteurs
• Les automatisations et scénarios de conversation

Vous pouvez par exemple afficher un message destiné aux visiteurs qui hésitent à passer à l'action :

1Bonjour 👋
2Une question sur notre solution ?
3Envoyez-nous un message, nous sommes là pour vous aider.

L'objectif est de transformer le chatbot en véritable point de contact avec les visiteurs de votre Landing Page.

Utiliser Crisp uniquement sur certaines pages

Dans notre configuration actuelle, <CrispChat /> se trouve dans le layout principal :

1<body>
2  {children}
3  <CrispChat />
4</body>

Crisp sera donc chargé sur toutes les pages utilisant ce layout.

Si vous souhaitez afficher le chatbot uniquement sur votre Landing Page, vous pouvez déplacer le composant directement dans votre page.tsx :

1import CrispChat from "@/components/CrispChat";
2 
3export default function Home() {
4  return (
5    <>
6      <main>
7        {/* Votre Landing Page */}
8      </main>
9 
10      <CrispChat />
11    </>
12  );
13}

Cette approche est particulièrement pratique si votre application possède un dashboard ou certaines pages sur lesquelles vous ne souhaitez pas afficher le chat.

8. Félicitations !

Votre Landing Page Next.js possède maintenant un chatbot Crisp fonctionnel ! 🎉

Vous avez mis en place une architecture simple :

1.env.local
2    ↓
3NEXT_PUBLIC_CRISP_WEBSITE_ID
4    ↓
5CrispChat.tsx
6    ↓
7layout.tsx
8    ↓
9Widget Crisp

Prochaines étapes :

• Personnalisez l'apparence du widget depuis Crisp
• Configurez votre message d'accueil
• Testez l'envoi et la réception d'un message
• Configurez les notifications pour ne manquer aucun prospect
• Ajoutez des automatisations si nécessaire
• Testez l'intégration sur mobile et desktop

Avec cette configuration, Crisp est séparé du reste de votre Landing Page dans un composant dédié. Vous pouvez donc facilement modifier, désactiver ou déplacer l'intégration plus tard sans toucher au reste de votre application.