Intégration du widget AGO – Office du Viager

Cette page montre comment intégrer le chatbot AGO sur votre site.

1. Démo : bouton qui ouvre le chat

2. Code d'intégration

Ajoutez ce code juste avant la balise </body> de votre site :

<script>
  window.AGO = {
    basepath: "https://officeduviager.useago.com/",
    title: "Office du Viager",
    prompt: "Bonjour, comment puis-je vous aider ?",
  };
</script>
<script async src="https://useago.github.io/widgetjs/frame.js"
  integrity="sha384-Wi/9+SjBNo5RzusaT/Bd9lVkpQOLCtAg64N64o7lOw0O5Q40476mxRBRYwbQg1Lm"
  crossorigin="anonymous"></script>

3. Bouton personnalisé pour ouvrir le chat

Pour ouvrir le widget depuis votre propre bouton :

<button onclick="openAgoChat()">Parler à un conseiller</button>

<script>
  function openAgoChat() {
    const btn = document.querySelector("#ago-chat-button");
    if (btn) {
      // Si le chat est fermé, on l'ouvre
      const chatbot = document.querySelector("#ago-chatbot");
      if (chatbot && chatbot.classList.contains("closed")) {
        btn.click();
      } else if (!chatbot) {
        // Premier clic, le widget n'est pas encore chargé
        btn.click();
      }
    }
  }
</script>

4. Options disponibles

window.AGO = {
  basepath: "https://officeduviager.useago.com/",  // URL de votre instance AGO
  title: "Office du Viager",                        // Titre du chatbot
  prompt: "Bonjour, comment puis-je vous aider ?",  // Message d'accueil
  defaultAgent: "nom-de-l-agent",                   // Agent par défaut (optionnel)
  email: "visiteur@example.com",                    // Email du visiteur (optionnel)
  notifications: true,                              // Activer les notifications (optionnel)
  hideFooter: false,                                // Masquer le footer (optionnel)
  colors: {                                         // Personnalisation des couleurs (optionnel)
    button: "#2563eb",           // Couleur du bouton flottant
    header: "#2563eb",           // Couleur de l'en-tête
    agentMessage: "#f3f4f6",     // Fond des messages de l'agent
    agentMessageFont: "#333",    // Texte des messages de l'agent
    userMessage: "#2563eb",      // Fond des messages de l'utilisateur
    userMessageFont: "#fff",     // Texte des messages de l'utilisateur
    background: "#fff",          // Fond de la fenêtre de chat
    font: "#333",                // Couleur de texte générale
  },
};