Documentation

Floating Help Center | Advanced jQuery Plugin

Thank you so much for purchasing our item.

  • Created: 1 July, 2021
  • Update: 7 March, 2023

If you have any questions that are beyond the scope of this help file, Please feel free to email via Support Page.

Installation

Follow the steps below to setup the plugin:

  1. Unzip the downloaded package and open the /SourceCode/FloatingHelpCenter folder to find all the files.
  2. Below is the folder structure and and details about folders/files:
    • FloatingHelpCenter/assets - Contains all of the assets referenced
      • /css - Contains stylesheets
        • floatinghelpcenter.style.css - Plugin CSS
        • floatinghelpcenter.theme.css - Popup HTML content CSS
      • /js - Contains scripts
        • floatinghelpcenter.script.js - Unminified plugin scripts
        • floatinghelpcenter.script.min.js - Minified plugin scripts
      • /fonts - Contains plugin fonts
      • /img - Referenced images
    • FloatingHelpCenter/vendors - Contains third-party libraries(jQuery)
    • FloatingHelpCenter/data.json - (JSON file)Contains data to be displayed
    • FloatingHelpCenter/sample.json - (JSON file)Sample JSON data
    • FloatingHelpCenter/index.html - Index HTML reference file
  3. You should add all or specific files in your project as per your need.

Integration

The bare minimum for using Floating Help Center on a web page is linking to the plugin javascript and the styles then finally initializing the pluin.

Link the plugin stylesheets & scripts:
<head>
  <link rel="stylesheet" href="assets/css/floatinghelpcenter.style.css" />
  <link rel="stylesheet" href="assets/css/floatinghelpcenter.theme.css" />
  <script src="assets/js/floatinghelpcenter.script.js"></script>
</head>
Add HTML Plugin wrapper:
<body>
  <!-- Other Elements  -->
  <div id="floatingHelpCenter" class="floating-help-center"></div>
</body>

Initialization

Once you have added the link path of necessary JS or CSS files, you can initialize the plugin either by using JS or jQuery using the onload methods.

jQuery Initialization:
$(document).ready(function() {
  floatingHelpCenter.init();
});
Javascript Initialization:
window.addEventListener('load', function (event) {
  floatingHelpCenter.init();
});

There is already initialization code in the index.html file.

Configuration

Floating Help Center plugin is highly customisable. You can customise the colors, add or remove elements as per your needs and requirements.

You need to edit the values of helpCenterConfig object present in floatinghelpcenter.script.js file.

var helpCenterConfig = {
  .....
  .....
  .....
}

Theme Colors

Change the color code and behaviour as per need of your website. You will find the settings in helpCenterConfig object in floatinghelpcenter.script.js

var helpCenterConfig = {
  primaryColor:"#007bff", // Floating button color
  linkColor: "#007bff", // Color of anchor tags or links
  .....
  .....
}
Option Defult Value Values Description
primaryColor #007bff Any hex/rgb/rgba color code The background color of floating button
linkColor #007bff Any hex/rgb/rgba color code The color of links in popup

Toggle Visibility

You can hide or show elements based on you needs and requirements. You will find the settings in helpCenterConfig object in floatinghelpcenter.script.js

var helpCenterConfig = {
  showHelperText:true, // Helper text beside floating button(true|false)
  showContactUsLink: true, // Hide or show contact us link(true|false)
  resetOnPopupClose:false, // Reset popup back to original state on close(true|false)
  .....
  .....
}
Option Defult Value Values Description
showHelperText true true | false Helper text beside floating button
showContactUsLink true true | false Hide or show contact us link in popup
resetOnPopupClose true true | false Reset popup back to original state i.e first page on close

Textual Changes

Set the text of various elements and links as per your requirements.

var helpCenterConfig = {
  helperTextLabel:"Have any queries?<br /><strong>Check Help Center</strong>", // Helper text label
  contactUsLabel:"Still no luck? We can help!", // Text of contact us link
  contactUsLink:"/contact-us", // Contact us link
  noResultsLabel:"Sorry, we don’t have any results. Updates are being added all the time.", // No results found text
  .....
  .....
}
Option Defult Value Description
helperTextLabel Have any queries?<br/><strong>Check Help Center</strong> Helper text beside floating button
contactUsLabel Still no luck? We can help! Text of contact us link
contactUsLink /contact-us Contact us link/anchor
noResultsLabel Sorry, we don’t have any results. Updates are being added all the time. No results found text

Callbacks & Others

The details about callback functions and other variables in helpCenterConfig object.

var helpCenterConfig = {
  onPopupOpen:function(){}, // Callback function which runs on popup open
  onPopupClose:function(){} // Callback function which runs on popup close
  btnZindex:999, // Z-index property of floating button
  popupZindex:998, // Z-index property of popup
  .....
  .....
}
Option Description
onPopupOpen Callback function which runs on popup open. You can add code which you want to execute when popup opens
onPopupClose Callback function which runs on popup close. You can add code which you want to execute when popup closes
btnZindex Z-index property of floating button. You can increase or decrease as per your theme requirements
popupZindex Z-index property of popup. You can increase or decrease as per your theme requirements

If popup or button is hiding behind other elements you can increase/decrease the btnZindex/popupZindex value accordingly. Make sure btnZindex is greater than popupZindex

Learn more about z-index here: z-index

JSON Data

The data in the floating help center popup is populated through data.json file. You can add the JSON object as per your needs and requirements.

Basic Example:
{
  "data": [
      {
          "title": "Floating Help Center",
          "html": "<p>The purpose of the Floating Help Center Plugin is to make it easy for people to find solutions quickly to their problems without having to ask for help.<\/p>\r\n<p>Floating Help Center can encompass many forms of content, including:<\/p>"
      },
      {
          "title": "Plugin Features",
          "html": "<ul>\r\n    <li>Light-weight and Robust<\/li>\r\n    <li>Easy Integration<\/li>\r\n    <li>Easy Customization No Coding<\/li>\r\n    <li>Millions Of Colors to Choose From<\/li>\r\n    <li>Responsive Design<\/li>\r\n    <li>Responsive Design<\/li>\r\n    <li>Encompass Many Forms Of Content<\/li>\r\n    <li>Sub-questions upto N-level<\/li>\r\n    <li>Simple & Rich Documentation<\/li>\r\n    <li>Free Future Updates<\/li>\r\n<\/ul>"
      }
  ]
}

About Data Format:

  • data is an array which has objects.
  • object can have 3 keys: title, html and nodes
    • title: It is the question or title or article
    • html: The HTML content of the article. You need to Escape your HTML before adding to JSON object. You can use any online JSON escape tools.
      Example: JSON String Escape/Unescape
    • nodes: It is an array which has sub-articles i.e objects. More informations is provided below.
    • Every object should have 2 keys, title key is compulsory in every object where as the second key can be either html or nodes
Sub Articles or Multi-level Example:
{
  "data": [
      {
          "title": "Floating Help Center",
          "html": "<p>The purpose of the Floating Help Center Plugin is to make it easy for people to find solutions quickly to their problems without having to ask for help.<\/p>\r\n<p>Floating Help Center can encompass many forms of content, including:<\/p>"
      },
      {
          "title": "Plugin Features",
          "html": "<ul>\r\n    <li>Light-weight and Robust<\/li>\r\n    <li>Easy Integration<\/li>\r\n    <li>Easy Customization No Coding<\/li>\r\n    <li>Millions Of Colors to Choose From<\/li>\r\n    <li>Responsive Design<\/li>\r\n    <li>Responsive Design<\/li>\r\n    <li>Encompass Many Forms Of Content<\/li>\r\n    <li>Sub-questions upto N-level<\/li>\r\n    <li>Simple & Rich Documentation<\/li>\r\n    <li>Free Future Updates<\/li>\r\n<\/ul>"
      },
      {
        "title": "I have childs",
        "nodes":[
            {
                "title":"I am first child",
                "html": "<li>Sub-questions upto N-level<\/li>"
            },
            {
                "title":"I am second child",
                "html": "<li>Sub-questions upto N-level<\/li>"
            }
        ]
      }
  ]
}

About Multi-level Sub-questions:

  • The object can be nested upto N-level as per your needs.
  • To add sub-childs, you can add nodes array which contains objects
  • Can be nested upto N-level
  • nodes array can contain another nodes array

To make the data more readable and easy while adding questions/sub-questions, you can use online JSON editors.
Example: JSON Editor Online

Get JSON data via API:

Getting the data via API url is simple and hardly takes a seconds to implement. You just have to find the following code and replace "data.json". with your API end point.

In the below code, replace YOUR_API_URL with an API which returns json data.

 $.fn.floatingHelpCenter = function () {
  $.getJSON("YOUR_API_URL", function (jsonObj) { // get the JSON data
    jsonData = jsonObj["data"];
    renderHelpCenterBtn(helpCenterConfig); // render popup button
    renderPopup(jsonData); // render popup with JSON data

  }).fail(function () {
    alert("JSON error");
  });
}

You can learn more about getJSON here: jQuery.getJSON()

Inter-Linking Articles

You can link any other articles in anchor tags with the help of data-title attribute. You need to add title of another article which you want to link as a value of data-title attribute.

Example:

<a href="#" data-title="Callouts Example">Callouts Example</a>

Popup Content

Documentation and examples for displaying typography and other HTML elements in Popup. You can also modify the existing style as per your needs by editing the floatinghelpcenter.theme.css file.

Typography

Documentation and examples for typography, headings, body text, lists, and more.

Headings

Heading Example
<h1></h1>

h1. Heading
<h2></h2>

h2. Heading
<h3></h3>

h3. Heading
<h4></h4>

h4. Heading
<h5></h5>
h5. Heading
<h6></h6>
h6. Heading

Inline Text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

<blockquote>This line rendered as blockquote<blockquote></blockquote>

Code

Documentation and examples for displaying inline and multiline blocks of code

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

Code blocks

Use <pre> tag for multiple lines of code.

Table

Currently, not supported due to lack of space availability.

Icons

You can add SVG icons. Be sure to escape

Image

Documentation and examples for adding images in popup.

<img src="../../my-image.jpg">

Components

Setting up components is very easy. Here are the shortcodes and examples. Directly paste it in your HTML Be sure to escape HTML angle brackets. You can also edit the colors of various components by editing floatinghelpcenter.theme.css file

Callout

Documentation and examples for adding callouts in HTML content.

Info Callout:

<div class="callout-block callout-block-info">
    <div class="content">
        <h4 class="callout-title">
          <span class="callout-icon-holder mr-1">
              <svg class="svg-inline--fa fa-info-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                <path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
              </svg>
          </span>
          Note
        </h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium <code>&lt;code&gt;</code> , Nemo enim ipsam voluptatem quia voluptas <a href="#">link example</a> sit aspernatur aut odit aut fugit.</p>
    </div>
</div>

Warning Callout:

<div class="callout-block callout-block-warning">
  <div class="content">
      <h4 class="callout-title">
        <span class="callout-icon-holder">
            <svg class="svg-inline--fa fa-bullhorn fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bullhorn" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
              <path fill="currentColor" d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"></path>
            </svg>
        </span>
        Warning
      </h4>
      <p>Nunc hendrerit odio quis dignissim efficitur. Proin ut finibus libero. Morbi posuere fringilla felis eget sagittis. Fusce sem orci, cursus in tortor <a href="#">link example</a> tellus vel diam viverra elementum.</p>
  </div>
</div>

Success Callout:

<div class="callout-block callout-block-success">
  <div class="content">
      <h4 class="callout-title">
        <span class="callout-icon-holder">
            <svg class="svg-inline--fa fa-thumbs-up fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="thumbs-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor" d="M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z"></path>
            </svg>
        </span>
        Tip
      </h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Link example</a> aenean commodo ligula eget dolor.</p>
  </div>
</div>

Danger Callout:

<div class="callout-block callout-block-danger">
  <div class="content">
      <h4 class="callout-title">
        <span class="callout-icon-holder">
            <svg class="svg-inline--fa fa-exclamation-triangle fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
              <path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
            </svg>
        </span>
        Danger
      </h4>
      <p>Morbi eget interdum sapien. Donec sed turpis sed nulla lacinia accumsan vitae ut tellus. Aenean vestibulum <a href="#">Link example</a> maximus ipsum vel dignissim. Morbi ornare elit sit amet massa feugiat, viverra dictum ipsum pellentesque. </p>
  </div>
</div>

Badges

Documentation and examples for badges

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Embeds

Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
        
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
        
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
        
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

FAQ

List of commonly asked questions and answers related to the plugin setup, configuration, troubleshooting and other important questions.

You will need to escape the HTML before adding it to JSON object. You can use various online available tools to escape HTML. Example: JSON String Escape/Unescape
You can also modify the existing style as per your needs by editing the floatinghelpcenter.theme.css file.
To make it easy while adding questions/sub-questions, you can use online JSON editors.
Example: JSON Editor Online
You can link any other articles in anchor tags with the help of data-title attribute. You need to add title of another article which you want to link as a value of data-title attribute.
Example: <a href="#" data-title="Callouts Example">Callouts Example</a>

Support

If this documentation doesn't answer your questions, please send us email via Support Page

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our plugin like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for plugin. It would be a great support for us.
Go to your Codecanyon Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.

More Products

Checkout Our Other Products Below: View Portfolio

EmailGPT | Effortless Email Generation, Powered By OpenAI
EmailGPT | Effortless Email Generation, Powered By OpenAI
Ad Block Detector Pro | Light-weight Pure JavaScript Plugin
Ad Block Detector Pro | Light-weight Pure JavaScript Plugin
Cookie Notice Pro | Advanced jQuery Plugin
iCaptcha | Frontend & Backend reCaptcha Verification

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

For Future Updates Follow Us @Codecanyon / @facebook / @twitter / @Instagram

Version 1.2.0 - Added Embeds Component (7 March, 2023)

  • Updated css/floatinghelpcenter.theme.css

Version 1.0.0 (30 June, 2021)

Initial Release