Home > Developers > Installation Guide > MQTTCHAT Cloud WEB > Angular and AngularJS

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.

Angular & AngularJS

It only takes a few minutes to install MqttChat in your Angular app. Once installed, your users will be able to communicate with each other.

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

a. Docked Layout

i- 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/rest/en/mqttchat-docked.js?appId=mqttchat-xxxxxxxx&uf=0";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'mqttchat-cloud'));
</script> 

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

ii- In the Component template, add #mqttchat div with the chosen theme affected to class attribute .

<div id="mqttchat"  class="mqttchat-default" ></div>

iii- 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();

a. Embedded Layout

i- 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/rest/en/mqttchat-embedded.js?appId=mqttchat-xxxxxxxx&uf=0";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'mqttchat-cloud'));
</script> 

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

ii- In the Component template, where you want to display MQTTCHAT, add #mqttchat div with user data.

<div id="mqttchat"  class="mqttchat-default" ></div>

iii- 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 Componenet 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;

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


2020 © MQTT-CHAT.com Inc.