Integration
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 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.
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.
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 MQTTchat script to the header of your page just after jQuery.
<script src="https://cluster1.telifoun.com/rest/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.
<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>
Below is a list of all possible HTML data that you can use to customize the display of MQTTchat 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 |
data-height | Iframe height in pixels | If this field is absent. The height of iframe is equal to the height |
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 MQTTchat 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 MQTTchat 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 MQTTchat cloud using data-user-id only. 😛 User should be already added to MQTTchat.
<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.
<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 .
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/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 MTTChat SDKs.​
