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
Advanced features
Advanced intégration
Custom Module
Decreasing App size
Third-party Libraries
Demo Application
Powered By
GitBook
Joomla
Joomla 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.
Joomla
Add JQuery to the header of your page. If you have already included JQuery skip this step.
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Copied!
Add MQTT chat script to the header of your page.
1
<script src="https://cluster1.telifoun.com/rest/en/mqttchat.js?appId=mqttchat-xxxxxxxx&uf=0"></script>
Copied!
Get User Informations.
1
<?php
2
$user
=
JFactory
::
getUser
();
3
if
(
!
$user
->
guest
)
{
4
$mqttchat_user_id
=
$user
->
id
;
5
$mqttchat_user_name
=
$user
->
name
;
6
$mqttchat_user_surname
=
$user
->
username
;
7
//...
8
}
9
?>
Copied!
Show Chat Layout : In the body of your page, where you want to display MQTT chat, add
#mqttchat
div to show docked or embedded layout.
Docked Layout
Embdded Layout
1
<
div
id
=
"
mqttchat
"
2
data-layout
=
"
docked
"
3
class
=
"
mqttchat-default
"
4
data-user-id
=
"
<?=$mqttchat_user_id?>
"
5
data-user-name
=
"
<?=$mqttchat_user_name?>
"
6
data-user-surname
=
"
<?=$mqttchat_user_surname?>
"
7
>
</
div
>
Copied!
1
<
div
id
=
"
mqttchat
"
2
data-layout
=
"
embedded
"
3
class
=
"
mqttchat-default
"
4
data-user-id
=
"
<?=$mqttchat_user_id?>
"
5
data-user-name
=
"
<?=$mqttchat_user_name?>
"
6
data-user-surname
=
"
<?=$mqttchat_user_surname?>
"
7
data-width
=
"
900
"
8
data-height
=
"
500
"
9
>
</
div
>
Copied!
Previous
WordPress
Next
Angular & AngularJS
Last modified
1yr ago
Copy link
Contents
Before you begin
Joomla