Integrating Web Widget

Follow this guide to integrate the Helpshift Web Widget on your site

Widget Embed Code Generator

To bring up the embed code generator, navigate to Settings>Web Support Portal and click Generate Embed Code in your agent dashboard:

This brings up the custom embed code generator:

1 App Selection
Set this if you want the web-widget to open a particular app. Doing so will also hide the app dropdown.
2 Platform Selection
Set this if you want to limit the web-widget to a particular platform. Doing so will also hide the platform dropdown.
3 Language Selection
Set this if you want to open the web-widget in a particular language.
4 Web Widget Embed Code
Click the textarea to select the web widget embed code

How does it work

  1. Once you have integrated the web-widget, you can see a small help button on the right/left bottom corner based on which direction was set in the embed code. Also, the button & button-icon color will be seen as per customization done in the embed code.

  2. Clicking the button will open the we widget. It you had checked the 'Show contact form on page load' while generating the embed code, it will show the contact us form too. Note that an app also needs to be selected to show the contact-us form since it is app-specific.

Customizing the web-widget embed code

The web widget embed code generator will give a script tag. Add this after the body tag of your site's main page. The script will initialize the web-widget based on the app, platform and language options you selected while generating the widget embed-code. Additionally, you can customize the appearance of the web widget button.

<script>
  (function (d) {
    var s = d.createElement("script");
    s.setAttribute("src", "//s.helpshift.com/static/build/external/hsftWebSdk.js");
    s.addEventListener ("load", function () {
      hsft.init ({
        url: "support.helpshift.com/",
        config: {
          contact: false,
          platform: "all", language: "en",
          /* Customize the below fields as required */
          direction: "right", // direction where the help button is placed bottom-left/ bottom-right
          buttonColor: "#3AB54A", // color of the help button
          buttonIconColor: "#FFFFFF" // color of icon on the help button
        }
      });
    });
    d.head.appendChild (s);
  }(document));
</script>

You can modify the following parameters to customize the look and feel of the web widget to suit your site's look and feel:

direction
Either left or right - default value is right. To customize where the help button will appear on the screen - bottom-left or bottom-right.
buttonColor
This is the color of the help button - default value is #3AB54A.
buttonIconColor
The color of the icon on the help button - default value is #FFFFFF.

For example

<script>
  (function (d) {
    var s = d.createElement("script");
    s.setAttribute("src", "//s.helpshift.com/static/build/external/hsftWebSdk.js");
    s.addEventListener ("load", function () {
      hsft.init ({
        url: "support.helpshift.com/",
        config: {
          contact: false,
          platform: "all", language: "en",
          /* Customize the below fields as required */
          direction: "left", // direction where the help button is placed bottom-left/ bottom-right
          buttonColor: "#FF0000", // color of the help button
          buttonIconColor: "#000000" // color of icon on the help button
        }
      });
    });
    d.head.appendChild (s);
  }(document));
</script>

The direction is set to left, the button color is set to #FF0000 and the button-icon color is set to #000000 :

Important guidelines for setting up the Web Widget

  1. The z-index for the widget is set to 2147482647. If you want a UI component to be visible on top, then please set a z-index greater than this value.

  2. Please put the embed code at the end of 'body' tag to ensure correct functioning.

  3. When you customize CSS in the Web Support Settings, it will affect both your widget & your Web Support page.

  4. Browsers supported for the Web Widget's end-user interface are IE11+, Chrome, Firefox, and Safari.