Joomla

Product:
Our installation instructions are slightly different depending on the version of Joomla you are running. Please select:

1. Joomla version 3.2 and higher
2. Joomla version lower than 3.2

Joomla version 3.2 and higher

Introduction

This guide will help you through the installation process and get CometChat running on your site.

Installation is very straight forward, only taking about 5 minutes from uploading the files to viewing the CometChat bar on your site.

You do not need programming knowledge to install CometChat.

This guide assumes that you have successfully downloaded the latest release of CometChat and have the zip file “unzipped” and ready to go. If not, you can download the package from your client area.

The instructions will term the zip file you downloaded as cometchat_UNZIP_FIRST.zip. Extract this zip to a local folder.

Installation

Step 1
Log in to Joomla administration panel and navigate to Extension Manager.

Step 2
Install CometChat extension by browsing and choosing joomla.zip from cometchat_UNZIP_FIRST.zip.

install-cometchat-extension

Step 3
Click on Upload and Install button.

click-upload-and-install

Step 4
After successful installation of extension, you will find CometChat under component menu. Click CometChat component.

cometchat-component

Step 5
It will ask you to browse the cometchat.zip. Browse cometchat.zip and click install.

cometchat-zip

This will install CometChat successfully.

Additional Settings

On clicking the CometChat component in the Component menu, you will be asked to click on “Access CometChat Admin Panel”.

cometchat-admin-panel

Over here you will find the additional settings.

additional-settings

With the help of additional settings, you can show CometChat for a specific usergroup.

synchronize

You can also have a look at our installation video tutorial :

Upgrading CometChat

To upgrade CometChat to its latest version on your site, download CometChat package from ‘https://my.cometchat.com/’. Unzip the cometchat_UNZIP_FIRST.zip and upload the new ‘cometchat.zip’ and click Install.

joomla_upgrade1


Joomla version lower than 3.2

Introduction

Before you begin, you will need an FTP client, if you do not have one, some popular solutions include FileZilla (free) or CuteFTP (trial).

You do not need programming knowledge to install CometChat, but a working knowledge of FTP functions is a plus.

This guide assumes that you have successfully downloaded the latest release of CometChat and have the zip file “unzipped” and ready to go. If not, you can download the package from your client area.

The instructions will term the zip file you downloaded as cometchat_UNZIP_FIRST.zip. Extract this zip to a local folder. You should now have a file named cometchat.zip.

Uploading

At this point, you should have the zip archive cometchat.zip and find a single folder- “cometchat”.

If you don’t know already, find out the folder in which Joomla is installed.

If you access your Joomla site via ‘http://www.domain.com’, then look for the webroot directory.

The “webroot” directory is usually ‘public_html’ or ‘www’, but this varies from server to server so if you’re unsure, contact your hosting provider.

Using your FTP client, copy the cometchat folder inside your Joomla folder. e.g. http://www.domain.com/cometchat

Installation

Step 1
Login to your Joomla Administration (usually http://www.domain.com/administrator)

Step 2
Under the Extensions tab, select the Template Manager option.

Step 3
Now select the template which has a star next to it i.e. the template in which you want to add CometChat.

Step 4
Click on the Edit HTML button (top-right corner)

Step 5
Immediately after the opening head tag add the copied code:

<head>
<link type="text/css" rel="stylesheet" media="all" href="/cometchat/cometchatcss.php" charset="utf-8" />
/cometchat/cometchatjs.php

If you are unable to find <head> tag, then please add the code manually using this guide.

CometChat installation instructions

Step 1 :
Log in to the Administrator (Backend)
Eg: https://www.yoursite.com/administrator to access the Administrator panel

Step 2 :
Click on: Extensions » Templates
You will now see the Template Manager screen.

Note: Only Users logged in as Super Administrators will see Templates menu item listed as an option on the Extensions menu.

Step 3 :
Once Joomla Directory shows you the template list, click on the active / default template.

Step 4:
You should now be seeing the template editor as show in the image below.
On the left panel, click on index.php.

Step 5:
Now we can edit and add code to the index.php file.
Add the following code before the <html> tag.


<?php
$chat_id = $chat_name = $chat_avatar = $chat_link = $chat_displayname = $chat_role = "";
$user = JFactory::getUser();
  if (!$user->guest) {
    $chat_id = $user->id;
    $chat_name = $user->username;
    $chat_displayname = $user->name;
    if(class_exists('JAccess')) {
      /* START: User ROLE */
      $user = JFactory::getUser();
      $groups = JAccess::getGroupsByUser($user->id, false);
      $groups_list = "(" . implode(",", $groups) . ")";
      $db = JFactory::getDbo();
      $query = $db->getQuery(true) ->select($db->qn("title")) ->from("#__usergroups") ->where($db->qn("id") . " IN " . 
      $groups_list); $db->setQuery($query);
      $rows = $db->loadObjectList();
      if(!empty($rows) && is_object($rows[0]) && property_exists($rows[0], "title")){
       $chat_role = $rows[0]->title;
      }
    }
      /* END: User ROLE */
  }
?>

Step 6:
Now, scroll down to see your <html> code.
Add the following code inside html <head> tag.



  var chat_id = "<?php echo $chat_id; ?>";
  var chat_name = "<?php echo $chat_name; ?>";
  var chat_avatar = "<?php echo $chat_avatar; ?>";
  var chat_link = "<?php echo $chat_link; ?>";
  var chat_displayname = "<?php echo $chat_displayname; ?>";
  var chat_role = "<?php echo $chat_role; ?>";

After step 5 and step 6 your code should look similar as shown below :

Step 7 : Add CometChat to your website
To add Docked or Embed layout :
Login to your CometChat Client Area.
Go to : Install CometChat tab on left panel, see Add CometChat step.

For Docked Layout :
» Click on Add To Site

» Copy the the code from the dialog box
» Add this code in your webpage’s htmltag.

For Embed Layout :
» Click on Add To Site
» Set the desired height and width values of the chat box in the text boxes provided and Click Generate code.

» Copy the generated embed code and add it your webpage’s html accordingly.

That’s It! CometChat has now been integrated on your website.
Go ahead and customize CometChat from your CometChat Client Area.

  • Was this helpful?
  • Yes   No