Integration

REST API Tutorials Back to mqtt-chat.com
Search…
Integration
Application hosted in our servers, we take care of all the work. No installation No configuration.
MQTT Chat 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 don't 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.
MQTT chat cloud is independent of the web development platform and can therefore be integrated into any website using javascript.
Installation Guide
It only takes a few minutes to install MQTT chat on your website. Once installed, your users will be able to communicate with each other.
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> 
Add MQTT chat script to the header of your page just after jQuery.
<script src="https://cluster1.telifoun.com/webapi/en/mqttchat.js?appid=mqttchat-xxxxxxxx&uf=0"></script>
Add #mqttchat div to the body of your page. Where you want to show chat layout.
Docked Layout
Embedded Layout
<div id="mqttchat" 
 data-layout="docked"
 class="mqttchat-default"
 data-user-id="1"          
 data-user-name="name" 
 data-user-surname="surname" 
 data-user-avatar=""
 data-user-link=""
 data-user-gender="0"
 ></div>   
<div id="mqttchat" 
 data-layout="embedded"
 class="mqttchat-default"
 data-user-id="1"          
 data-user-name="name" 
 data-user-surname="surname" 
 data-user-avatar=""
 data-user-link=""
 data-user-gender="0"
 data-width="900"
 data-height="500"
></div>   
HTML Data attributes
Below is a list of all possible HTML data that you can use to customize the display of MQTT chat cloud in your website.
HTML5 Attribute
Description
Note
data-user-id
User id that you use to identify specific user in your database . It should be positive Integer and unique for each user.
This field is required
data-user-name
User name . Must be composed of [2-20] caracters. 
This field is required
data-user-surname
user surname . Must be composed of [2-20] caracters. 
This field is required
data-user-avatar
user profile photo URL 
This field is optional
data-user-link
user profile URL
This field is optional
data-user-gender
user gender
It can be  0 :men,1:women,2: miss default 0
data-width
Iframe width in pixels
If this field is absent. The width of iframe is equal to the width of #mqttchat parent div.
data-height
Iframe height in pixels
 If this field is absent. The height of iframe is equal to the height #mqttchat parent div.
Data-layout attribute
 data-layout attribute of  #mqttchat div is very important, it allows you to specify the layout to load. Currently it only takes the value "embedded" to load the embedded MQTT chat layout or "docked" to load docked layout. Other  layouts are under development.
<div id="mqttchat" data-layout="embedded" ... ></div>    
<div id="mqttchat" data-layout="docked" ... ></div>      
 Omit data-layout attribute when calling MQTT chat cloud is helpfull in case you want to show only notifications for users when they receive new messages or to show not read messages count  when they are navigating between different pages of your site.
In this case you can call MQTT chat cloud using data-user-id  only. 😛
 User should be already added to MQTT chat.
<div id="mqttchat" data-user-id="1" ></div>
Class attribute
 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.
<div id="mqttchat" class="mqttchat-default" ... ></div>
​
​
<div id="mqttchat" class="mqttchat-dark" ... ></div>     
​
  <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 of mqttchat-default, mqttchat-dark or mqttchat-lite .
Changing Language
You can change layout language  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 supported en, fr and ar.
<script src="https://cluster1.telifoun.com/webapi/fr/mqttchat.js?appid=mqttchat-xxxxxxxx&uf=0"></script> 
Friends Feature
Friends concept is an MQTT chat feature for dating or social networks websites. If friends option is enabled, uf value is set to 1, all MQTT chat 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 MQTT chat script url. If not added, default value of 0 will be used.
<script src="https://cluster1.telifoun.com/webapi/fr/mqttchat.js?appid=mqttchat-xxxxxxxx&uf=1"></script> 
 You can manage friends lists using MTTChat SDKs.​
MQTTchat SDKs - Previous
Messages Management
Next - MQTTchat Cloud Web
Javascript Events
Last modified 25d ago
Copy link
Outline
Installation Guide
HTML Data attributes
Data-layout attribute
Class attribute
Changing Language
Friends Feature