Angular & AngularJS

REST API Tutorials Back to mqtt-chat.com
Search…
Angular & AngularJS
Angular and AngularJS integration.
Before you begin
​Register to mqttchat,  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.
​
 Angular & AngularJS
It only takes a few minutes to install MQTT chat in your Angular app. Once installed, your users will be able to communicate with each other.
MQTT chat provides two layouts to cater to your unique requirements. Our Docked Layout creates a floating chat widget at the bottom right/left corner of your website. Our Embedded Layout creates a chat widget in any page of your website.
Docked Layout
Embedded Layout
 Paste the code below right before the closing </head> tag in the 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/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 the Component template, add #mqttchat div with the chosen theme affected to class attribute .
<div id="mqttchat"  class="mqttchat-default" ></div>
  In your login() function (or equivalent), login the user, and start chat :
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 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 the Component template, where you want to display chat, add #mqttchat div with user data.
<div id="mqttchat"  class="mqttchat-default" ></div>
  In your login() function (or equivalent), login the user and start chat :
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(); 
To be able to use javascript variables in Component class add this code on the top of your Component.
declare var telifounJQ:any;
declare var mqttchat_userId:any;
declare var mqttchat_userName:any;
declare var mqttchat_userSurname:any;
declare var mqttchat_userGender:any;
declare var mqttchat_userAvatar:any;
declare var mqttchat_width:any;
declare var mqttchat_height:any;
​
 You can also read a step by step tutorial that explain MQTT-CHAT  Integration for an Angular application.
Joomla
ReactJS
Last modified 23d ago
Copy link
Outline
Before you begin
Angular & AngularJS
Before you begin

​ Angular & AngularJS

Angular & AngularJS
