Before you begin…

1. Register to mqttchat, add your domain name to your customer area and activate a subscription that suits you.

2. Go to the Settings tab of your customer area to get your APP_ID and APP_SECRET. You may need these during installation.

Joomla

MqttCHat provides two layouts to cater to your unique requirements.

1. Include JQuery

Add JQuery to the header of your page. If you have already included Jquery skip this step.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

2. Add MqttChat Script

Add MqttChat script to the header of your page.

<script src="https://cluster1.telifoun.com/rest/en/mqttchat.js?appId=mqttchat-xxxxxxxx&uf=0"></script>

* You must change the value of appId with your APP_ID.
You can change Mqttchat language : fr, en or ar.

3. Get User Informations

 
<?php
 $user = JFactory::getUser();
 if (!$user->guest) {
 $mqttchat_user_id= $user->id;
 $mqttchat_user_name=  $user->name;
 $mqttchat_user_surname=$user->username;
 //...
}
?>
 

4. Show Chat Layout

In the body of your page, where you want to display MQTTCHAT, add #mqttchat div to show docked or embedded layout

a. Docked Layout

<div id="mqttchat" 
 data-layout="docked"
 class="mqttchat-default"
 data-user-id="<?=$mqttchat_user_id?>"          
 data-user-name="<?=$mqttchat_user_name?>" 
 data-user-surname="<?=$mqttchat_user_surname?>" 
 > </div>   

b. Embedded Layout

<div id="mqttchat" 
 data-layout="embedded"
 class="mqttchat-default"
 data-user-id="<?=$mqttchat_user_id?>"          
 data-user-name="<?=$mqttchat_user_name?>" 
 data-user-surname="<?=$mqttchat_user_surname?>" 
 data-width="900"
 data-height="500"
 > </div>   

That is all. For advanced integration, please consult the complete MQTTCHAT cloud documentation.


2020 © MQTT-CHAT.com Inc.