Comment ouvrir Fin avec une question pré-remplie ?

Utilisez l'API JavaScript d'Intercom : Intercom('showNewMessage', 'Votre question ici'). Cela ouvre le Messenger avec la question pré-remplie ; l'utilisateur n'a plus qu'à appuyer sur envoyer pour obtenir une réponse instantanée de Fin.

Puis-je utiliser des questions pré-remplies avec Fin AI sur n'importe quel site ?

Oui, à condition d'avoir le Messenger Intercom installé et Fin AI activé. L'API JavaScript fonctionne sur toute page où le snippet Intercom est chargé.

Les questions pré-remplies comptent-elles comme des résolutions Fin ?

Oui. Si Fin résout la question pré-remplie sans transfert humain, elle compte comme une résolution Fin standard. Les boutons pré-remplis sont donc un excellent moyen d'augmenter votre taux de résolution en orientant les utilisateurs vers des questions que Fin gère bien.

Puis-je suivre quels boutons pré-remplis les utilisateurs cliquent le plus ?

Oui. Vous pouvez ajouter du tracking d'événements à chaque bouton via les events personnalisés d'Intercom ou votre plateforme d'analytics. Ces données vous aident à comprendre les questions les plus fréquentes et à optimiser votre base de connaissances en conséquence.

Comment ajouter des boutons qui ouvrent Fin avec des questions pré-remplies

Vous voulez aider vos visiteurs plus facilement ? En ajoutant des boutons qui ouvrent l'assistant IA Fin d'Intercom avec des questions pré-remplies, vous pouvez guider les utilisateurs vers des réponses instantanées et réduire les frictions du support.

Ce que vous allez apprendre

La commande JavaScript principale pour ouvrir Fin avec un message
Plusieurs approches d'implémentation (HTML, JavaScript, React)
Style et bonnes pratiques
Résolution des problèmes courants

Prérequis

Avant d'implémenter cette fonctionnalité, assurez-vous d'avoir :

Un compte Intercom actif avec Fin activé (besoin d'aide ? Découvrez nos services d'implémentation Intercom)
Le Messenger Intercom installé sur votre site
Des connaissances de base en HTML et JavaScript

La commande principale

La magie opère avec une seule commande JavaScript :

window.Intercom('showNewMessage', 'Votre question pré-remplie ici');

Cette commande fait deux choses :

Ouvre le Messenger Intercom
Pré-remplit le champ de message avec votre texte

L'utilisateur peut alors simplement appuyer sur envoyer (ou modifier le message au préalable) pour démarrer une conversation avec Fin.

Méthodes d'implémentation

Méthode 1 : Simple bouton HTML

Le moyen le plus rapide d'ajouter cette fonctionnalité est un gestionnaire onclick inline :

<button onclick="window.Intercom('showNewMessage', 'Comment réinitialiser mon mot de passe ?')">
  Obtenir de l'aide pour la réinitialisation du mot de passe
</button>

Méthode 2 : Fonction JavaScript avec contrôle de sécurité

Pour plus de fiabilité, créez une fonction réutilisable qui vérifie si Intercom est chargé :

function askFin(question) {
  if (window.Intercom) {
    window.Intercom('showNewMessage', question);
  } else {
    console.warn('Intercom is not loaded yet');
    // Repli : ouvrir votre page de contact ou afficher une alerte
    window.location.href = '/contact';
  }
}

Puis utilisez-la dans votre HTML :

<button onclick="askFin('Comment passer à un plan supérieur ?')">
  Poser une question sur les upgrades
</button>

Méthode 3 : Plusieurs boutons de questions rapides

Créez une section type FAQ avec plusieurs boutons préconfigurés :

<div class="quick-questions">
  <h3>Questions rapides</h3>
  <button onclick="askFin('Comment démarrer ?')">
    🚀 Premiers pas
  </button>
  <button onclick="askFin('Quels sont vos plans tarifaires ?')">
    💰 Tarifs
  </button>
  <button onclick="askFin('Comment contacter le support ?')">
    📞 Contacter le support
  </button>
  <button onclick="askFin('Où trouver la documentation ?')">
    📚 Documentation
  </button>
</div>

Méthode 4 : Implémentation React

Si vous utilisez React, voici une approche par composant propre :

import React from 'react';

interface AskFinButtonProps {
  question: string;
  children: React.ReactNode;
  className?: string;
}

const AskFinButton: React.FC<AskFinButtonProps> = ({ 
  question, 
  children, 
  className 
}) => {
  const handleClick = () => {
    if (window.Intercom) {
      window.Intercom('showNewMessage', question);
    } else {
      console.warn('Intercom not loaded');
    }
  };

  return (
    <button onClick={handleClick} className={className}>
      {children}
    </button>
  );
};

// Utilisation
<AskFinButton question="Comment intégrer Slack ?">
  Question sur l'intégration Slack
</AskFinButton>

💡 Astuce TypeScript

Ajoutez cette déclaration de type pour éviter les erreurs TypeScript :

// Dans un fichier .d.ts ou en haut de votre composant
declare global {
  interface Window {
    Intercom: any;
  }
}

Ouvrir Fin sans message pré-rempli

Si vous voulez simplement ouvrir le messenger sans pré-remplir de texte :

// Ouvrir le messenger (affiche les conversations récentes)
window.Intercom('show');

// Ouvrir le messenger avec un nouveau message (vide)
window.Intercom('showNewMessage');

Styler vos boutons

Voici du CSS pour donner un aspect professionnel à vos boutons :

.ask-fin-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #1f8ded 0%, #1a6fc4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(31, 141, 237, 0.3);
}

.ask-fin-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(31, 141, 237, 0.4);
}

.ask-fin-button:active {
  transform: translateY(0);
}

/* Grille de questions rapides */
.quick-questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

Bonnes pratiques

À faire ✅	À éviter ❌
Garder les questions concises et claires	Utiliser des questions trop longues ou complexes
Aligner les questions avec vos sujets FAQ	Pré-remplir avec des questions sans rapport
Placer les boutons là où les utilisateurs se posent naturellement des questions	Cacher les boutons à des endroits difficiles à trouver
Tester que Fin peut répondre aux questions pré-remplies	Supposer que toutes les questions fonctionneront bien
Ajouter un contrôle de sécurité pour window.Intercom	Appeler directement sans vérifier que c'est chargé

Ajouter du tracking analytics

Suivez les questions cliquées par les utilisateurs pour obtenir des insights :

function askFinWithTracking(question, category) {
  // Tracker l'événement (exemple avec Google Analytics 4)
  if (window.gtag) {
    gtag('event', 'ask_fin_clicked', {
      question: question,
      category: category,
      page: window.location.pathname
    });
  }
  
  // Ouvrir Fin avec la question
  if (window.Intercom) {
    window.Intercom('showNewMessage', question);
  }
}

Cas d'usage populaires

Pages de tarifs — « Quel plan convient à mon équipe ? » ou « Proposez-vous une tarification entreprise ? »
Pages de fonctionnalités — « Comment fonctionne [fonctionnalité] ? » ou « Puis-je voir une démo de [fonctionnalité] ? »
Documentation — « J'ai besoin d'aide sur [sujet] » en bas des articles d'aide
Parcours d'onboarding — « Je suis bloqué à cette étape » ou « Que dois-je faire ensuite ? »
Pages d'erreur — « Je vois une erreur et j'ai besoin d'aide » sur les pages 404 ou d'erreur

Résolution des problèmes

⚠️ Problèmes courants

Le bouton ne fait rien :

Vérifiez si Intercom est chargé : ouvrez la console du navigateur et tapez window.Intercom. S'il renvoie undefined, Intercom n'est pas chargé.
Assurez-vous que votre code d'installation Intercom est présent sur la page
Vérifiez la présence d'erreurs JavaScript dans la console

Intercom s'ouvre mais le message n'est pas pré-rempli :

Assurez-vous d'utiliser showNewMessage (pas seulement show)
Vérifiez que votre chaîne de question n'a pas d'erreurs de syntaxe

Fonctionne sur desktop mais pas mobile :

Assurez-vous que votre bouton gère correctement les événements tactiles
Vérifiez que le messenger mobile d'Intercom est activé dans vos paramètres

Exemple complet fonctionnel

Voici un exemple complet prêt à copier-coller :

<!DOCTYPE html>
<html>
<head>
  <style>
    .help-section {
      max-width: 600px;
      margin: 40px auto;
      padding: 24px;
      font-family: system-ui, sans-serif;
    }
    .help-section h2 {
      margin-bottom: 16px;
    }
    .quick-questions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .ask-btn {
      padding: 10px 20px;
      background: #1f8ded;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }
    .ask-btn:hover {
      background: #1a6fc4;
    }
  </style>
</head>
<body>
  <div class="help-section">
    <h2>Besoin d'aide ?</h2>
    <p>Cliquez sur une question ci-dessous pour discuter avec notre assistant IA :</p>
    <div class="quick-questions">
      <button class="ask-btn" onclick="askFin('Comment démarrer ?')">
        🚀 Premiers pas
      </button>
      <button class="ask-btn" onclick="askFin('Quels sont vos plans tarifaires ?')">
        💰 Tarifs
      </button>
      <button class="ask-btn" onclick="askFin('Comment contacter le support ?')">
        📞 Contacter le support
      </button>
    </div>
  </div>

  <!-- Votre code d'installation Intercom va ici -->
  
  <script>
    function askFin(question) {
      if (window.Intercom) {
        window.Intercom('showNewMessage', question);
      } else {
        alert('Le chat est en cours de chargement, veuillez réessayer dans un instant.');
      }
    }
  </script>
</body>
</html>

Prochaines étapes

Maintenant que vous savez ajouter des boutons de questions rapides, pensez à :

Analyser vos tickets de support pour identifier les questions courantes
Faire de l'A/B testing sur différentes formulations
Ajouter d'abord les boutons aux pages à fort trafic
Entraîner Fin avec des réponses personnalisées pour vos questions les plus fréquentes
Mettre en place des stratégies de support proactif pour atteindre les clients avant qu'ils ne demandent

Pour en savoir plus sur les capacités de Fin et comment il transforme l'expérience client, lisez notre guide approfondi : L'avenir de l'expérience client : comment les agents IA comme Fin d'Intercom vont transformer le support.

Besoin d'aide pour l'implémenter ?

Nous sommes spécialisés dans les implémentations Intercom et pouvons vous aider à créer une expérience de support fluide avec Fin AI.

Découvrir nos services d'implémentation Intercom →