Frontend Integration

This guide explains how to integrate the Binj Chat Widget into your website.

Overview

The Binj Chat Service provides a ready-to-use chat widget that you can easily embed on your website. The widget handles all the communication with the API for you and can be customized to match your brand's look and feel.

Prerequisites

• You have obtained a chat ID by following the Backend Integration guide

Important: The chat ID must be obtained from your backend by making API calls as described in the Backend Integration guide. This ensures proper security and management of your chat sessions. Do not attempt to hardcode or generate chat IDs on the frontend.

Integration Steps

1. Add the Script Tag

To add the chat widget to your website, include the following script tag in your HTML:

<script 
  src="https://chat-service.agent.binj.com/embed.js" 
  data-chat-id="YOUR_CHAT_ID" 
  data-position="corner" 
  data-auto-display="true"
  async
></script>

Replace YOUR_CHAT_ID with your actual chat configuration ID.

2. Customize Widget Placement

You can control where the chat widget appears on your website using the data-position attribute:

• "corner": Places the chat button in the bottom-right corner of the screen (default)
• "center": Places the chat widget in the center of the screen

<!-- Corner placement (default) -->
<script 
  src="https://chat-service.agent.binj.com/embed.js" 
  data-chat-id="YOUR_CHAT_ID" 
  data-position="corner" 
  async
></script>

<!-- Center placement -->
<script 
  src="https://chat-service.agent.binj.com/embed.js" 
  data-chat-id="YOUR_CHAT_ID" 
  data-position="center" 
  async
></script>

3. Control Auto-Display

By default, the chat widget will automatically display a chat button. You can disable this and control the display programmatically:

<!-- Disable auto-display -->
<script 
  src="https://chat-service.agent.binj.com/embed.js" 
  data-chat-id="YOUR_CHAT_ID" 
  data-position="corner" 
  data-auto-display="false"
  async
></script>

4. Using Your Own Button

If you've disabled auto-display, you can use your own button to open the chat widget:

<!-- Add this script with auto-display disabled -->
<script 
  src="https://chat-service.agent.binj.com/embed.js" 
  data-chat-id="YOUR_CHAT_ID" 
  data-position="corner" 
  data-auto-display="false"
  async
></script>

<!-- Add your custom button -->
<button id="my-chat-button">Chat with us</button>

<script>
  // Connect your button to the chat widget
  document.getElementById('my-chat-button').addEventListener('click', function() {
    if (window.BinjChat) {
      window.BinjChat.open();
    }
  });
</script>

JavaScript API

The chat widget exposes a JavaScript API that you can use to control it programmatically:

// Open the chat widget
window.BinjChat.open();

// Close the chat widget
window.BinjChat.close();

// Check if the chat widget is open
const isOpen = window.BinjChat.isOpen();

// Update the chat ID (e.g., when user logs in)
window.BinjChat.setChatId('new-chat-id').then(success => {
  if (success) {
    console.log('Chat ID updated successfully');
  }
});

Widget Customization

The appearance of the chat widget is controlled by your chat configuration in the Binj admin portal. These settings are fetched automatically when the widget loads, based on your data-chat-id.

User Authentication Integration

If your website has user authentication, you can update the chat ID when a user logs in to maintain conversation continuity:

// Example: Update chat ID when user logs in
function onUserLogin(userId) {
  // Get a chat ID from your backend or generate one
  const userChatId = getUserSpecificChatId(userId);
  
  // Update the chat widget with the new chat ID
  if (window.BinjChat) {
    window.BinjChat.setChatId(userChatId)
      .then(success => {
        if (success) {
          console.log('Chat ID updated for logged-in user');
        } else {
          console.error('Failed to update chat ID');
        }
      });
  }
}

Complete Integration Example

Here's a complete example of integrating the chat widget with custom styling and user authentication:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website with Binj Chat</title>
  <style>
    /* Custom styling for your own chat button */
    #custom-chat-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      font-size: 24px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Products</a>
      <a href="#">Contact</a>
      <button id="login-button">Log In</button>
    </nav>
  </header>
  
  <main>
    <h2>Our Services</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </main>
  
  <!-- Custom chat button -->
  <button id="custom-chat-button">💬</button>
  
  <!-- Binj Chat Widget with auto-display disabled -->
  <script 
    src="https://chat-service.agent.binj.com/embed.js" 
    data-chat-id="YOUR_CHAT_ID" 
    data-position="corner" 
    data-auto-display="false"
    async
  ></script>
  
  <script>
    // Wait for the chat widget to load
    window.addEventListener('load', function() {
      // Connect custom button to chat widget
      document.getElementById('custom-chat-button').addEventListener('click', function() {
        if (window.BinjChat) {
          window.BinjChat.open();
        }
      });
      
      // Example: Handle user login
      document.getElementById('login-button').addEventListener('click', function() {
        // Simulate login
        const userId = 'user123';
        
        // Update chat ID for the logged-in user
        if (window.BinjChat) {
          const userChatId = `user-${userId}-${new Date().getTime()}`;
          window.BinjChat.setChatId(userChatId);
        }
        
        // Update UI to show logged-in state
        this.textContent = 'Log Out';
        this.id = 'logout-button';
      });
    });
  </script>
</body>
</html>

Troubleshooting

If you encounter issues with the chat widget, check the following:

1. Widget not loading: Ensure your data-chat-id is correct and the script URL is accessible.
2. API errors: Open your browser's developer console to see any error messages.
3. Widget not appearing: If you've set data-auto-display="false", make sure you're calling window.BinjChat.open() to display it.

For further assistance, contact Binj support at [email protected].