Introduction
Your Help Widget can be highly customized to fit the needs of your website and/or application. To customize these settings, within your dashboard, go to the Help Widget and click on Settings.
Once there, you will see preview of your widget on the left (on the desktop view) and on the right, a panel that looks like the following:
Important to note:
- The widget's "body" background will always be a light shade. As a result, we recommend that the top of the widget remain a dark colour with lighter colours for the text. This will give your widget a more professional appearance.
Before you read further, we recommend that you first get acquainted with setting up our article on Setting up your Help Widget if you have not done so already.
Appearance settings
In the appearance section, you can modify the colours as well as upload a logo for the widget. In addition to this, we recommend that you set a greeting text for the widget, such as "Welcome" with a short introduction of what information the widget offers.
This will help orient your users and customers to access the widget on subsequent page visits should they need help with your product, services, or website.
Sections configuration
You can add, remove, and sort the sections that are shown within the Help Widget. This allows you to customize the kind of help that is displayed to the user.
Currently, we have the following section type options:
- Content
- Contact form
- Documentation browse
- Documentation autosuggest
- Documentation search
- Link list
We will talk about each of these sections below.
Content section
The content section allows you to add any custom rich text content you want. This is good for displaying special announcements, instructions, or other information that's best suited to free-form text content.
Contact form section
The contact form section displays a contact form for users to send a message to one of your Shared Inbox.
Important to note:
- When a user sends a message, Eager's Help Widget will ask a user to provide their name and email address so that responses can be created back to the original sender.
- You can, through the JavaScript configuration block (see below), preset these values (name and email).
Documentation browse section
The documentation browse section lets you suggest a list of articles. This list of articles will be the same for this Help Widget, so good uses of this might be articles like "Getting Started" or "Frequently Asked Questions".
Documentation autosuggest section
If you want to dynamically set articles that are relevant to the current page the user is on, you can set the section type to as documentation autosuggest.
There are two requirements to use this properly:
- You must specify a "keywords" configuration parameter in the JavaScript setup (see below in JavaScript configuration)
- You must have existing articles already written
When Eager's Help Widget detects that you want to automatically query for article suggestions, the app will query (based on the keywords you provide) the specified Documentation Site and will return the most relevant four (4) articles.
Documentation search section
The documentation search section shows a search field for users to look up documentation manually:
You can specify which Documentation Site Eager will send the user query to.
Link list section
The link list section is used for adding a list of links. This is useful if you want to display some links to other parts of your website/web application in a central location (eg. links to your Privacy Policy, Pricing, etc).
JavaScript configuration
The Help Widget can be further customized using the JavaScript configuration option.
Here is the default configuration block that is given in the Setup page instructions:
<script>
window.eagerapp = (window.eagerapp || { queue: [], setup: function(x) { window.eagerapp.queue.push(x); } });
window.eagerapp.setup({
"app": "help_widgets",
"id": "your-unique-id",
"config": {
"language": {}
}
});
</script>
Within the "config" block, you can specify additional options.
Localization
You can (optionally) define the labels within the Help Widget. Any values you declare here will override the ones that are set by default within our app, as well as the values you've set within the Notification Feed settings page.
This is useful for situations where you are dynamically generating the page and want to provide localization values (ie. languages).
To do this, set a "language" block like so:
window.eagerapp.setup({
"app": "help_widgets",
"id": "your-unique-id",
"config": {
"language": {
"contact_form_heading": "Start a conversation",
"contact_form_description": "",
"name_input_placeholder": "What is your name?",
"email_input_placeholder": "Enter your email",
"message_input_placeholder": "Type your message here...",
"no_results_label": "No results found",
"send_message_button_label": "Send message",
"send_complete_label": "Message sent",
"reset_form_label": "Send another message",
"search_heading": "Search our documentation",
"search_placeholder": "Enter your search...",
"search_results_label": "Search results for",
"view_more_label": "View more"
}
}
});
Specifying customer
Sometimes you may want to specify customer information so that the Help Widget can help customers auto-populate certain information (eg. Name and email for the built in Contact form section).
When available, Eager will fill in the information for you. You can specify whether the customer can edit the information here by specifying whether it is "editable", which is a true/false boolean value.
window.eagerapp.setup({
"app": "help_widgets",
"id": "your-unique-id",
"config": {
"customer": {
"name": "customer name here",
"email": "customer email here",
"editable": false
}
}
});
Important to note:
- In the above examples (for Localization and Customer customizations), only the relevant new blocks are shown. If you customize both, combine the configuration so the widget is only set up once, or else the app will load the Help Widget twice.
Manually trigger widget
In certain situations, you may wish to manually trigger your Help Widget instead of having Eager.
This method may help to fix situations where the widget isn't triggered properly due to other page load factors.
To trigger a widget, you will need the "id" of your widget and call the following JavaScript code:
// eg. Let's say your widget has the "id" of "1-b34eb687-24e4-4da1-bd56-32cd1cae6944", you will then call: <script> let widgetId = "1-b34eb687-24e4-4da1-bd56-32cd1cae6944"; window.eagerapp.helpWidgetToggle(widgetId); </script>
If the widget is already opened when you call this, calling it again will close it. Because of this reason, you should ensure that any custom events you bind to your trigger is properly bound so that it does not get called multiple times.
Did this article help?