In this tutorial we will see step by step how to integrate MQTT Chat Wordpress plugin in a website created with WorPress.

VIDEO DEMO


WordPress is the world’s most popular site builder. It powers more than 39% of all websites on the internet, that’s millions of websites all over the world. WordPress is extremely flexible which is the main reason why it is a popular choice to build a website. You can use WordPress to build almost any kind of website imaginable!

MQTT CHAT WordPress plugin is intended for WordPress developers who want to quickly integrate a chat solution into their WordPress websites. Chat script integration must follow the same logic of WordPress which is the simplicity of just copy/paste, no programming and no source code.

In this tutorial we will not discuss the installation of wordpress or the features it offers. Many tutorials on the internet and youtube can help you in this area. We will only focus on how to integrate MQTT Chat plugin in a website developed with WordPress through a practical example.

1- Installation

Before you can install plugin on your website, you must first create an account and activate an MQTT CHAT subscription. Once the subscription is activated, you can retrieve the APP_ID and APP_SECRET parameters required during the installation.

Got to the WordPress admin page and click on Plugins item from admin menu. You will find the list of plugins actually installed in your website.

Click on plugins -> Add New and type the keyword 'mqtt chat' to find the MQTT CHAT plugin.

mqtt chat wordpress plugin install

Click on Install Now to install the MQTT CHAT plugin. Then click on activate.

If all is well, MQTT CHAT plugin is added to the list of plugins installed in your website as below.

mqtt chat wordpress plugin install

Before you can integrate MQTT Chat plugin into your site, Click on the settings link to configure plugin.

You will be redirected to the settings form. The most important parameter is APP_ID which identifies your MQTT CHAT subscription.

mqtt chat wordpress plugin settings

This is all. MQTT CHAT wordpress plugin is installed, activated and configured.

2- Integration

MQTT Chat provides two layouts: Docked Layout creates a floating chat widget at the bottom right/left corner of your website and embedded Layout creates a chat widget in any page of your website.

We will start by integrating docked chat into the main page of our website.

Go to pages menu item of admin panel. Then click on Edit to edit the page content.

mqtt chat wordpress plugin integration

Add now the following short code [mqttchat layout='docked'] to add docked chat.

mqtt chat wordpress plugin short code

This is all. Click on Update to save change and then click on Preview to see result.


mqtt chat wordpress plugin docked

You can change chat theme class attribute in short code [mqttchat layout='docked' class='mqttchat-lite'] .

mqtt chat wordpress plugin docked

To integrate embedded chat, you must specify embedded layout and the height and width of the chat iframe in short code. see below.

mqtt chat wordpress plugin embedded mqtt chat wordpress plugin embedded

3- Enable web push notifications

To activate push notifications just add a script called service worker which must be added to the root of your site. This script will be installed in the browser and is responsible for managing all notifications for your website. see more informations about service worker on documentation.

You must first download mqttchat_sw_1_0.js service worker script and place it at the root of your wordpress folder.

mqtt chat wordpress plugin embedded

To verify that the installation was successful, the message user is subscribed to push must be displayed in the browser console.

mqtt chat wordpress plugin embedded mqtt chat wordpress plugin embedded

In this tutorial we have shown that the plugin installation is very simple,User is added automatically no need to call an API or javascript. If you are facing any issue in this tutorial, please comment in below discussions.