MQTTchat SDKs
MQTTchat Cloud Web
ReactJS
ReactJS integration.
Before you begin
- Go to the Settings tab of your admin panel to get your
APP_IDandAPP_SECRET. You may need these during installation.
ReactJS
Docked Layout
Embedded Layout
Paste the code below right before the closing
</head> tag in the public/index.html page.1
<script>
2
3
var mqttchat_userId=''; // Intentionally left blank
4
var mqttchat_userName=''; // Intentionally left blank
5
var mqttchat_userSurname=''; // Intentionally left blank
6
var mqttchat_userGender=''; // Intentionally left blank
7
var mqttchat_userAvatar='skip'; // Intentionally affected 'skip'
8
var mqttchat_userLink='skip'; // Intentionally affected 'skip'
9
10
(function(d, s, id) {
11
var js, fjs = d.getElementsByTagName(s)[0];
12
if (d.getElementById(id)) return;
13
js = d.createElement(s); js.id = id;
14
js.src = "https://cluster1.telifoun.com/rest/en/mqttchat-docked.js?appId=mqttchat-xxxxxxxx&uf=0";
15
fjs.parentNode.insertBefore(js, fjs.nextSibling);
16
}(document, 'script', 'mqttchat-cloud'));
17
</script>
Copied!
You must change the value ofappIdwith yourAPP_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.
1
<div id="mqttchat" class="mqttchat-default" ></div>
Copied!
In the component once your user logs in, add the following code:
1
mqttchat_userId=1;
2
mqttchat_userName="name";
3
mqttchat_userSurname="surname";
4
mqttchat_userAvatar="user avatar url"
5
mqttchat_userLink="user profile url"
6
mqttchat_userGender=0;
7
telifounJQ.MQTTchat_Docked.start();
Copied!
Paste the code below right before the closing
</head> tag in the public/index.html page.1
<script>
2
var mqttchat_userId=''; // Intentionally left blank
3
var mqttchat_userName=''; // Intentionally left blank
4
var mqttchat_userSurname=''; // Intentionally left blank
5
var mqttchat_userGender=''; // Intentionally left blank
6
var mqttchat_userAvatar='skip'; // Intentionally affected 'skip'
7
var mqttchat_userLink='skip'; // Intentionally affected 'skip'
8
var mqttchat_width='800';
9
var mqttchat_height='500';
10
11
(function(d, s, id) {
12
var js, fjs = d.getElementsByTagName(s)[0];
13
if (d.getElementById(id)) return;
14
js = d.createElement(s); js.id = id;
15
js.src = "https://cluster1.telifoun.com/rest/en/mqttchat-embedded.js?appId=mqttchat-xxxxxxxx&uf=0";
16
fjs.parentNode.insertBefore(js, fjs.nextSibling);
17
}(document, 'script', 'mqttchat-cloud'));
18
</script>
Copied!
You must change the value ofappIdwith yourAPP_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.
1
<div id="mqttchat" class="mqttchat-default" ></div>
Copied!
In the component once your user logs in, add the following code:
1
mqttchat_userId=1;
2
mqttchat_userName="name";
3
mqttchat_userSurname="surname";
4
mqttchat_userAvatar="user avatar url"
5
mqttchat_userLink="user profile url"
6
mqttchat_userGender=0;
7
telifounJQ.MQTTchat_Embedded.start();
Copied!
Last modified 1yr ago
Copy link