MQTTchat
REST API
Tutorials
Back to mqtt-chat.com
Search…
MQTTchat
Welcome
Quick Start
MQTTchat REST API
Downloads
MQTTchat SDKs
Setup & Configuration
Users Management
Friends Management
MQTT Notifications
Messages Management
MQTTchat Cloud Web
Integration
Javascript Events
Push Notifications
Webhooks
Ready Integrations
WordPress
Joomla
Angular & AngularJS
ReactJS
VueJS
MQTTchat Android
Integration
Chat events
Messenger Plugins
Visio Module
Advanced features
Advanced intégration
Custom Module
Decreasing App size
Third-party Libraries
Demo Application
Powered By
GitBook
ReactJS
ReactJS integration.
Before you begin
Register
to MQTT chat, 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
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 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.
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 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.
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!
Previous
Angular & AngularJS
Next
VueJS
Last modified
8mo ago
Copy link
Contents
Before you begin
ReactJS