Setting up your Help Widget

Introduction

In this article, we'll talk about how to install your Help Widget. To learn more about Eager's Help Widgets, take a look at our What are Help Widgets? article.

Prerequisites

Before you begin setting up your Help Widget, you must be able to modify your website's HTML. Specifically, we will need to add a few lines of JavaScript code to the end of your HTML file where you want the Help Widget displayed.

If you need help with this step, feel free to contact us at support@eager.app and we'll be happy to guide you through the process.

Creating a Help Widget

Before we can begin, let's create a Help Widget.

Click on the Help Widget section of Eager:

If you already have a Help Widget, you will see a list of your existing Help Widgets. If you don't have any Help Widgets yet, Eager will prompt you to create one.

The first step is to give your Help Widget an identifiable name. This name is just used internally (by you and your team), and is useful for situations where you plan on having multiple Help Widgets under a single Eager account.

On the next screen, you'll be able to customize the Help Widget design, including:

• Modifying the colours (eg. to match your brand)
• Changing the labels and text
• Changing the sections that's available (eg. contact form, documentation browse) and the order of these sections

Securing your Help Widget

By default, your Help Widget can be loaded from any website. We recommend that that you add a list of domains where you will be adding your Help Widget.

For example, for our Help Widget, we confine it to the following subdomains:

A few things to note:

• If you use http (unsecured) connections, you will need to add those as well (eg. https://eager.app AND http://eager.app).
• Wildcard (*) is acceptable for subdomains. This will match all subdomains for a given root domain.
• If this field is empty, Eager will allow loading of your Help Widget from any website.

Installing your widget

To install your widget, click on the Setup menu label to the left (on desktop).

You should see a customized instructions on how to embed the code into your website, like so:

Important to note:

• If you've already installed a Notification Feed to your page, you will notice that the loader.js file is may have been added already. In this case, you do not need to load this file twice. Just be sure to add the loader.js line at the very end of all configurations.

Copy and paste the code that you see there to the bottom of your HTML file, right before the end </body> tag. Once you do that, your basic set up should be complete.

Triggering Help Widget

By default, the Help Widget is triggered when a user clicks on the circular trigger button. However, you can manually toggle it by using JavaScript.

The toggle function works by automatically opening or closing it, depending if the widget is already closed or opened. (eg. If the Help Widget is opened, calling the function will close it.)

You can invoke the toggle method by calling the following function:

window.eagerapp.helpWidgetToggle(identifier);

Because Eager allows multiple widgets to be on the same page, there is no universal function to open whichever widget is present. An identifier argument is needed to trigger a specific widget.

The identifier represents the "id" in the set up code.

For example, if the identifier is 1-e160bd14-54a1-4f5e-b689-c0f2d96d2112, then you would use:

window.eagerapp.helpWidgetToggle("1-e160bd14-54a1-4f5e-b689-c0f2d96d2112");

Important: At this time, only the Help Widget supports manual toggle. Other widgets (eg. Notification Feed Widget) does not currently support this.