SupportPal Documentation

Help Widget

A JavaScript widget that developers can embed into their website to enable customers to easily search a knowledgebase or contact the help desk without leaving the page they're viewing.

Contents

Activate or Deactivate Channel

The Help Widget channel is disabled by default and needs to be activated before use. To do this, go to Settings -> Tickets -> Channels and click the "Activate" link on the Help Widget channel row. The channel can be deactivated in the same way, instead this time by clicking the "Deactivate" link on the same row.

Settings

To configure the channel, go to Settings -> Tickets -> Channels and click the "Settings" link on the Help Widget channel row. The channel must already be activated beforehand.

It's possible to create and manage multiple configurations, in case you have multiple websites and need to show a different knowledgebase or use a different colour scheme on each. Start by clicking 'Add Widget'.

Configure (Functionality)

Customise (Look & Feel)

All the customisation options are optional.

Translations

If you make use of the multilingual functionality, you can define translations for the strings used in the widget. The language is automatically detected based on the user's browser.

Browser Support

The web widget is supported by the following browsers:

Device Type Browsers
Desktop
  • Internet Explorer 10+
  • Edge: latest version
  • Google Chrome: 2 latest versions
  • Firefox: 2 latest versions
  • Safari: latest version
Mobile
  • iOS Safari: 2 latest versions
  • Google Chrome for Android: latest version
Other browsers and versions may be supported but are untested.

Using the Widget

Once you have set up a valid configuration, the live preview will show you your widget and give you a chance to preview how it'll work. The preview resets every time you change any configuration, customisation or translation option.

Widget Preview

Below it is the code that will need to placed on your website to show the widget. It should be placed towards the end of your HTML code, just above </body>. Be sure to only copy the code once you've made all desired changes to your configuration as the code updates on changing most values.

Widget Code

The widget configuration should be saved before using the code, as some of the options rely on it.

Javascript API

A simple Javascript API has been made available to provide functions to modify the button and widget.

Function Description
setOffsetHorizontal Set the horizontal offset of the button and widget (popup only) from the left or right (based on settings) the browser screen.
setOffsetVertical Set the vertical offset of the button and widget (popup only) from the bottom the browser screen.

setOffsetHorizontal

Set the horizontal offset of the button and widget (popup only) from the left or right (based on settings) the browser screen.

Parameters

distance Distance from the left or right (based on settings) of the browser screen in pixels (integer).

Example

    

setOffsetVertical

Set the vertical offset of the button and widget (popup only) from the bottom the browser screen.

Parameters

distance Distance from the bottom of the browser screen in pixels (integer).

Example