ReactJS

REST API Tutorials Back to mqtt-chat.com
Search…
ReactJS
ReactJS integration.
Before you begin
​Register to MQTT chat,  add your domain name and activate a subscription that suits you.
 Go to the Settings tab of your  admin panel  to get your APP_ID and APP_SECRET. You may need these during installation.
​
 ReactJS
Docked Layout
Embedded Layout
  Paste the code below right before the closing </head> tag in the public/index.html page.
<script>
​
var mqttchat_userId=''; // Intentionally left blank
var mqttchat_userName=''; // Intentionally left blank
var mqttchat_userSurname=''; // Intentionally left blank
var mqttchat_userGender=''; // Intentionally left blank
var mqttchat_userAvatar='skip'; // Intentionally affected 'skip'
var mqttchat_userLink='skip'; // Intentionally affected 'skip'
​
(function(d, s, id) { 
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "https://cluster1.telifoun.com/webapi/en/mqttchat-docked.js?appid=mqttchat-xxxxxxxx&uf=0";
   fjs.parentNode.insertBefore(js, fjs.nextSibling);
}(document, 'script', 'mqttchat-cloud'));
</script> 
 You must change the value of appId with your APP_ID. You can also change  language : fr, en or ar.
  In Your template, where you want to display chat, add #mqttchat div with user data.
<div id="mqttchat"  class="mqttchat-default" ></div>
In the component once your user logs in, add the following code:
mqttchat_userId=1;
mqttchat_userName="name";
mqttchat_userSurname="surname";
mqttchat_userAvatar="user avatar url"
mqttchat_userLink="user profile url"
mqttchat_userGender=0;   
telifounJQ.mqttchat_docked.start();
  Paste the code below right before the closing </head> tag in the public/index.html page.
<script>
var mqttchat_userId=''; // Intentionally left blank
var mqttchat_userName=''; // Intentionally left blank
var mqttchat_userSurname=''; // Intentionally left blank
var mqttchat_userGender=''; // Intentionally left blank
var mqttchat_userAvatar='skip'; // Intentionally affected 'skip'
var mqttchat_userLink='skip'; // Intentionally affected 'skip'
var mqttchat_width='800'; 
var mqttchat_height='500'; 
​
(function(d, s, id) { 
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "https://cluster1.telifoun.com/webapi/en/mqttchat-embedded.js?appid=mqttchat-xxxxxxxx&uf=0";
   fjs.parentNode.insertBefore(js, fjs.nextSibling);
}(document, 'script', 'mqttchat-cloud'));
</script> 
 You must change the value of appId with your APP_ID. You can also change  language : fr, en or ar.
  In Your template, where you want to display chat, add #mqttchat div with user data.
<div id="mqttchat"  class="mqttchat-default" ></div>
 In the component once your user logs in, add the following code:
mqttchat_userId=1;
mqttchat_userName="name";
mqttchat_userSurname="surname";
mqttchat_userAvatar="user avatar url"
mqttchat_userLink="user profile url"
mqttchat_userGender=0;  
telifounJQ.mqttchat_embedded.start(); 
​
Angular & AngularJS
VueJS
Last modified 25d ago
Copy link
Outline
Before you begin
ReactJS
Before you begin

​ ReactJS

ReactJS
