How to: Integrate helpdesk web widget into WordPress site

February 5, 2025
floating button helpdesk widget

Integrating helpdesk web widget into your WordPress enhances the customer support experience by providing real-time assistance to website visitors. There are several steps required to follow the process of embedding a floating button that triggers SympoQ helpdesk web widget. By following these steps, you’ll be able to integrate the widget, customize its appearance, and ensure it functions across your website pages.

Step 1: Get the widget JavaScript code

The first step required is to get the JavaScript code of the web widget. Before you get the code, you can follow the help documentation on how to customize and set up the web widget: Floating button style, Front menu, and other available options. Once you apply changes, you’ll get the JavaScript code. Simply copy the code to your clipboard and it is ready for integration into the WordPress website.

floating button settings

Step 2: Access your WordPress Admin Dashboard

Log in to your WordPress admin dashboard.

Step 3: Add the JavaScript code

There are two different methods to add JavaScript code to the WordPress site:

Method 1: Using a Plugin

  1. Install a Plugin: Go to Plugins > Add New and search for a plugin like “Insert Headers and Footers” or “WPCode”.
  2. Activate the Plugin: Click Activate.
  3. Add the Code: Go to Settings > Headers and Footers and paste JavaScript code in the Scripts in Footer section.
web helpdesk wordpress javascript

Method 2: Adding Code to Theme Files

  1. Access Theme Editor: Go to Appearance > Theme File Editor.
  2. Locate the Footer File: Find the footer.php file (usually located in the theme’s directory).
  3. Add the Code: Paste your JavaScript code before the closing </body> tag for the footer.

Step 4: Test the Widget

After adding the code, visit your website and check if the floating button appears on each page. Make sure to test it on different devices and browsers to ensure compatibility, e.g. mobile devices, different screen resolutions, etc.

Step 5: Debugging

If the widget doesn’t appear, check for any errors in the JavaScript code and ensure it’s correctly placed in the footer. You can also use the Browser’s debugger, such as Chrome DevTools, or Firefox Developer Tools.

Tags: