Angular & AngularJS
Angular and AngularJS integration.
- Go to the Settings tab of your admin panel to get your
APP_IDandAPP_SECRET. You may need these during installation.
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 ofappIdwith yourAPP_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 ofappIdwith yourAPP_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.
Last modified 5mo ago