Integration

Application hosted in our servers, we take care of all the work. No installation No configuration.

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.

Installation Guide

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>
  • 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.

Docked Layout
Embedded Layout
Docked 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>
Embedded Layout
<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 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 #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 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

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/rest/fr/mqttchat.js?appId=mqttchat-xxxxxxxx&uf=0"></script>

Friends Feature

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.