Before you begin…

1. Register to mqttchat, add your domain name to your customer area and activate a subscription that suits you.

2. Go to the Settings tab of your customer area to get your APP_ID and APP_SECRET. You may need these during installation.

Basic 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. Include JQuery

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

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>

* You must change the value of appId with your APP_ID.
You can change Mqttchat language : fr, en or ar.

3. Show Chat Layout

In the body of your page, where you want to display MQTTCHAT, add #mqttchat div to show docked or embedded layout

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

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

* You should set user's informations dynamically from database or Session.

That is all. For advanced integration, please consult the complete MQTTCHAT cloud documentation.

You can also read a step by step tutorial that explain Mqttchat cloud web Integarion : How to use MQTT CHAT Cloud Web in a mini website developed with PHP & Mysql.


2020 © MQTT-CHAT.com Inc.