Home > Developers > Documentation > MQTTCHAT CLOUD Web


Cloud version of MQTTCHAT 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.

Unlike the self-hosted version, which can only be used in a PHP environment, the cloud version is independent of the web development platform and can therefore be integrated into any website using javascript.

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-user-iduser id that you use to identify specific user in your database . It should be INT 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 at least.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.

class attribute of "#mqttchat" div is very important, it allows to specify the type of graphical interface 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 class 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" class="embedded" ... ></div>         

      <div id="mqttchat" class="docked" ... ></div>         

Omit class attribute when calling MQTTCHAT cloud is helpfull in case you want to show only notifications for users in case he receive new messages or to show message summary when he is 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>               

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 GUI types, currently "embedded" or "docked" 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.

 js.src = "https://cluster1.telifoun.com/rest/fr/mqttchat.js?appId=mqttchat-XXXXXXXX";            

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.

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

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

       $(document).ready(function() {

Start chat with specific user

If you want to start conversation with certain user automatically just after loading MQTTCHAT GUI you can use __initChatWithUser() function like this:

$(document).ready(function() {

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 © Telifoun.MQTTCHAT Inc.