AGO Widget Integration – TN

This page shows how to integrate the AGO chatbot widget using https://tn.useago.com/.

1. Demo: button that opens the chat

2. Integration code

Add this code just before the </body> tag of your site:

<script>
  window.AGO = {
    basepath: "https://tn.useago.com/",
    title: "TN",
    prompt: "Hello, how can I help you?",
  };
</script>
<script async src="https://useago.github.io/widgetjs/frame.js"
  integrity="sha384-Wi/9+SjBNo5RzusaT/Bd9lVkpQOLCtAg64N64o7lOw0O5Q40476mxRBRYwbQg1Lm"
  crossorigin="anonymous"></script>

3. Custom button to open the chat

To open the widget from your own button:

<button onclick="openAgoChat()">Chat with us</button>

<script>
  function openAgoChat() {
    const btn = document.querySelector("#ago-chat-button");
    if (btn) {
      const chatbot = document.querySelector("#ago-chatbot");
      if (chatbot && chatbot.classList.contains("closed")) {
        btn.click();
      } else if (!chatbot) {
        btn.click();
      }
    }
  }
</script>

4. Available options

window.AGO = {
  basepath: "https://tn.useago.com/",              // URL of your AGO instance
  title: "TN",                                      // Chatbot title
  prompt: "Hello, how can I help you?",             // Welcome message
  defaultAgent: "agent-name",                       // Default agent (optional)
  email: "visitor@example.com",                     // Visitor email (optional)
  notifications: true,                              // Enable notifications (optional)
  hideFooter: false,                                // Hide footer (optional)
  colors: {                                         // Color customization (optional)
    button: "#2563eb",           // Floating button color
    header: "#2563eb",           // Header color
    agentMessage: "#f3f4f6",     // Agent message background
    agentMessageFont: "#333",    // Agent message text color
    userMessage: "#2563eb",      // User message background
    userMessageFont: "#fff",     // User message text color
    background: "#fff",          // Chat window background
    font: "#333",                // General text color
  },
};