All Tutorials

Your One-Stop Destination for Learning and Growth

How to Install Chatra's Chat Admin with Load on Click Event

Chatra is a powerful and user-friendly chat solution that allows businesses to interact with their customers in real-time. One of its features is the Chat Admin, which provides additional functionality for managing multiple chats at once. In this blog post, we'll walk you through the steps to install Chatra's Chat Admin on your website with a load on click event.

Prerequisites

Before we begin, ensure that you have the following:

  • A Chatra account: If you don't have one yet, sign up for free at Chatra
  • Access to your website's HTML/JavaScript code

Installing Chatra

  1. Go to the Chatra dashboard and log in with your credentials.
  2. Click on Install Chat and follow the instructions to add the Chatra script to your website.
  3. Customize the appearance and functionality of your chat by going to Settings > Appearance and Settings > Features.

Installing Chat Admin

  1. Go to Settings > Admin Panel > Enable Admin Panel and toggle it on.
  2. Copy the Admin Panel script provided by Chatra.

Adding Load on Click Event

To add the Chat Admin with a load on click event, you'll need to use JavaScript. Create a new file, e.g., myscript.js, and paste the following code:

document.addEventListener('DOMContentLoaded', () => {
  const adminButton = document.createElement('button');
  adminButton.innerHTML = 'Open Admin Panel';
  adminButton.style.position = 'fixed';
  adminButton.style.right = '30px';
  adminButton.style.bottom = '30px';
  adminButton.style.zIndex = '9999';
  adminButton.style.backgroundColor = '#1da1f2';
  adminButton.style.color = '#fff';
  adminButton.style.padding = '10px 20px';
  adminButton.style.border = 'none';
  adminButton.style.borderRadius = '5px';
  adminButton.style.fontSize = '14px';
  adminButton.style.cursor = 'pointer';

  document.body.appendChild(adminButton);

  adminButton.addEventListener('click', () => {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://chatra-admin.com';
    iframe.style.width = '500px';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    document.body.appendChild(iframe);
  });
});

Replace https://chatra-admin.com with your Chatra Admin Panel URL. This code creates a new button, listens for a click event, and opens the Admin Panel in an iframe when clicked.

  1. Add the following lines to your website's HTML file:
<head>
  <script src="myscript.js"></script>
</head>

Now, whenever someone clicks on the new button, the Chat Admin Panel will open in an iframe.

Congratulations! You've successfully installed Chatra's Chat Admin with a load on click event. If you have any questions or encounter any issues, please leave a comment below, and we'll be happy to help.

Published November, 2017