ReactJS

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

ReactJS

Docked Layout
Embedded Layout
Docked 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/rest/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();
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'
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.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();