Home > Developers > Documentation > MQTTCHAT CLOUD Web

MQTTCHAT CLOUD WEB

MqttChat cloud is intended for non-experienced developers who want to integrate a chat solution fast and with the least possible complexity.
Application is then hosted in our servers and the integration is done through an iframe. Configuration and customization options are not so similar to a self hosted installation. Because you do not have direct access to the source code of the application.
However, we have tried to provide as many configuration parameters as possible using html data or through basic javascripts events.

MqttChat cloud is independent of the web development platform and can therefore be integrated into any website using javascript.

It only takes a few minutes to install MqttChat on your website. Once installed, your users will be able to communicate with each other.

1- 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 to the header of your page.

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

Ready Integrations

Some CMS do not allow direct access to the html code for modification. For this we have developed specific plugins for most famous CSM like WordPress, Joomla etc... We also made an adaptation of MqttChat code for the client-side JAVAscript frameworks like Angular, ReactJS and Vue.js.

Click here to see All Integrations Ready plateforms.

Below is a list of all possible HTML data that you can use to customize the display of MQTTCHAT cloud in your site.

HTML5 AttributeDescriptionNote
data-layoutSpecify the type of layout to load (docked or embedded)This field is required.
data-user-iduser id that you use to identify specific user in your database . It should be Integer type and unique for each user.This field is required.
data-user-nameuser name from user session or database. Must be composed of three characters minimum.This field is required.
data-user-surnameuser surname from user session or database.This field is optional
data-user-avataruser profile photo URL from user session or database.This field is optional
data-user-linkuser profile URL from user session or database.This field is optional
data-user-genderuser gender from user session or database.It can be : 0 [Man],1[women],2[miss] default 0
data-widthIframe width in pixels.If this field is not used. The width of iframe is equal to the width of #mqttchat parent div.
data-heightIframe height in pixels.If this field is not used. The height of iframe is equal to the height #mqttchat parent div.

data-layout attribute of "#mqttchat" div is very important, it allows to specify the layout to load. Currently it only takes the value "embedded" to load the embedded MQTTCHAT GUI or "docked" to load docked GUI. Other GUI types are under development. If the data-layout attribute is absent, no GUI will be loaded, but the user will be connected to MQTTCHAT and continue to receive messages and events.


      <div id="mqttchat" data-layout="embedded" ... ></div>         

      <div id="mqttchat" data-layout="docked" ... ></div>         

Omit data-layout attribute when calling MQTTCHAT cloud is helpfull in case you want to show only notifications for users in case they receive new messages or to show message summary when they are navigating between different pages of your site.
In this case you can call MQTTCHAT cloud using user id or mqttchat user id only.


      <div id="mqttchat" data-user-id="1" ></div>               

class attribute of "#mqttchat" div allows you to specify what mqttchat theme to use for a specific layout. Currently it only takes the value "mqttchat-default" to load default theme,"mqttchat-dark" to load dark theme or "mqttchat-lite" to load lite theme. Other themes are under development. If the class attribute is absent, the default mqttchat theme is then loaded. mqttchat default theme


      <div id="mqttchat" class="mqttchat-default" ... ></div>         
mqttchat default theme


      <div id="mqttchat" class="mqttchat-dark" ... ></div>         
mqttchat default theme



      <div id="mqttchat" class="mqttchat-lite" ... ></div>         

Don't change class value

Be careful, do not assign to class attribute a CSS class name or other personal value. if the class attribute is used, it must only have the value MQTTCHAT themes names, currently "mqttchat-default","mqttchat-dark" or "mqttchat-lite" values only.

You can change the language of the MQTTCHAT cloud GUI by loading a localized version of the JAVASCRIPT library. Change the value of src to use your locale. For example, you can replace en with your locale, such as fr for French.
Currently Three languages are supportes en, fr and ar.

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

Friends concept is an MQTTCHAT feature for dating or social networks websites. If friends option is enabled, uf value is set to 1, all MQTTCHAT features will be limited to the friends list. Else user can browse the list of all users and can chat with any one.

You can specify uf value in the MqttChat script url. If not added, default value of 0 will be used.

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

You can manage friends lists using MqttChat SDKs.

In spite of you do not have direct access to the source cod and to work around the problem of "cross-origin" we used a framework called easyXDM for sharing javascript events between your site and our servers through socket messages exchange. So you have the possibility to capture some MQTTCHAT events in your JavaScript code.
Below list of events that you can use: data of each event is encapsulated in mqttchat_data variable.

NameDescriptionNote
mqttchat-load-completeEvent fires when MQTTCHAT iframe is completely loaded.
mqttchat-incoming-message
fromUserid user id of user who sent the message
message Message content
Event fires when currently user receives a message from another user.
mqttchat-not-read-messages-count-update
nNew value
Event fires when for the connected user,the number of unread messages changes.
mqttchat-error
errorError description
Event fire when an error has occurred

Here is an example of how to use MQTTCHAT events in your JavaScript code.

    
       telifounJQ(document).ready(function() {
        telifounJQ(document).on("mqttchat-not-read-messages-count-update",function(e){
         console.log(e.mqttchat_data.n);
        });
        telifounJQ(document).on("mqttchat-load-complete",function(e){
          telifounJQ(document).MQTTchat_Cloud.__initChatWithUser(122);
        });
        telifounJQ(document).on("mqttchat-incoming-message",function(e){
         console.log(e.mqttchat_data);
        });
        telifounJQ(document).on("mqttchat-error",function(e){
         console.log(e.mqttchat_data.error);
        });
       });                  

Start chat with specific user

If you want to start conversation with certain user automatically just after loading MQTTCHATlayout or louch automatically a conversation with a specific user you can use __initChatWithUser() function like this:


telifounJQ(document).ready(function() {
 telifounJQ(document).on("mqttchat-load-complete",function(e){
    telifounJQ.MQTTchat_Cloud.__initChatWithUser(122);
 });
});                        

MQTTCHAT cloud allows you to retrieve your domain users presence status in real time through the use of a Callback URL. You can then save user's presence status in your database and show the list of online users in your website or filter users by presence status.
The feature is not enabled by default, to activate it you must define a valid URL in your site and enable the option from your MQTTCHAT client area.
Once the option is activated, for each change of user presence status, our MQTT servers send to this URL three variables: :

userid : data-user-id of your user.
status : new presence status of your user.
timestamp : unix timestamp of the last presence status.

Below is an example of a PHP page https://www.votre-domain.com/callback.php that retrieves and displays parameters sent by MQTTCHAT.

  	


/* get userid  */
echo $_REQUEST["userid"];

/* get new status */
echo $_REQUEST["status"];

/* get status unix timestmp */
echo $_REQUEST["timestamp"];



2020 © MQTT-CHAT.com Inc.