Integrate a chat in few seconds using MQTT CHAT WordPress plugin
In this tutorial we will see step by step how to integrate MQTT CHAT Wordpress plugin in a website created with WorPress.
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.
Installation
Before you can install the 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 under settings/credentials menu.
Got to the WordPress admin page and click on Plugins item from admin menu. You will find a list of all plugins actually installed in your website.
Click on plugins -> Add New and type the keyword ‘mqtt chat’ to find the MQTT CHAT plugin.
Click on Install Now to install the MQTT CHAT plugin. Then click on activate. If all is well done, MQTT CHAT plugin is added to the list of plugins installed in your website as below.
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. Enter your APP_ID and click on Save Changes button.
This is all. MQTT CHAT wordpress plugin is installed, activated and configured.
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. then add the following short code [mqttchat layout=’docked’] to add docked chat.
This is all. Click on Update to save change and then click on Preview to see result.
You can change chat theme class attribute in short code [mqttchat layout=’docked’ class=’mqttchat-lite’]
To integrate Embedded chat, you must specify embedded layout and the height and width of the chat iframe in short code. [mqttchat layout=’embedded’ class=’mqttchat-lite’ width=’500' height=’400'] .see below.
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. So You should first download mqttchat_sw_1_0.js service worker script and place it at the root of your wordpress folder.
To verify that the installation was successful, the message user is subscribed to push must be displayed in the browser console.
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.
