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.

VueJS

It only takes a few minutes to install MqttChat in your VueJS 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 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/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 your template, add #mqttchat div with user data.

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

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

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 Your template, where you want to display MQTTCHAT, add #mqttchat div with user data.

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

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

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


2020 © MQTT-CHAT.com Inc.