Product Review: Helppier Rescues Users of your Web Navigation and Apps

Logo_Helppier_new_So your website developers made a small mess of the navigation, and your users are complaining. Perhaps your product is a web-based application and you want to show your users how the site works. Helppier can come to your rescue.

While oriented more towards marketing folks who want to make their sites more “sticky,” user assistance professionals and content strategists will find Helppier, developed by Hugo Magalhaes, useful, without being overwhelming.

Helppier lets you create a variety of tutorials that come in the form of text bubbles that help you guide your user. You create and edit your tutorials using the same “Need Help?” widget users click to access your content—a much simpler approach than traditional help authoring tools, and with none of the drawbacks of chm files or complex webhelp.

Another nice boon for help authors: You can get statistics on usage of your widget from Helppier’s dashboard.

Installing Helppier

To start out, you’ll need to get the “Need Help?” widget on the website. This is the part where you’ll need access to your website’s back-end.

Sign up at to get your account. Once you’re registered, you will receive a custom JavaScript that creates your widget and connects you to your Help widget statistics. Log in to and copy the script from the Install tab.

Save some time upfront, and paste the script into a text file. Paste this code in the header area of your site. Note to WordPress users: The code goes into your theme’s header.php file. It would be nice if they made a custom WordPress widget (feature request!), but that is not yet available.

HelppierEditor_MM1Writing Your First Tutorial

Once the Helppier JavaScript is applied to your site, you can handle everything else directly in your browser of choice. Open your site and the “Need Help?” button should be in the upper left corner. Click the button and log in with your Helppier account credentials. You’ll see an empty “Tutorial List.” Click “New Help” to begin your tutorial. Give the project a title and add a description for what you intend to teach with this lesson.

Click the red REC button, and Helppier will track and record your mouse movements from this point.

When you click somewhere on your interface, you’ll get to fill out a dialog box with your Help content.  A text editor appears, allowing you to add formatted text, lists, hyperlinks and links to image URLs if you like. When you’re done writing this bit of help, click Attach to have it appear in your tutorial highlighting the area where you clicked. Choosing the Link button will point your user to the page referred to in your text. WARNING: While you can link anywhere on the web, taking people away  from your site for a Wikipedia definition will slow everything down a bit, and rather defeats the purpose.

Test and edit functionality is available and simple to use. When you complete the tutorial, click PLAY to test your results. If you need to change anything in a particular bubble, click the Edit icon in the upper left corner of the box. You can also change the display order of each portion of your tutorial by drag and drop.

Once you have everything in place, change the status of your tutorial from DRAFT (where only you can see it) to PUBLISHED (where all your visitors can see it). Yes you’re done … really.


Other Nifty Features

When you have created your tutorial and refreshed the page for the first time, you can use the Dashboard to:

  • Customize the Need Help widget and help bubbles to mesh with your site’s look and feel.
  • Access usage statistics for each tutorial you create.

Log in at to view your Dashboard.

Customizing the Help widget and bubbles

Helppier offers templates to customize the style sheet for your components. Don’t like the widget in its default position? Go to the Template tab in your Dashboard and click the +Template button. You must name and describe the template you’re creating. Use the drop-down to indicate what site to apply the template to.

While the Need Help button will always be at the top of your site, you can move it to reduce interference with your existing elements. Under General, choose Select Widget Location. The drop-down menu offers five directional locations. Though you wouldn’t necessarily know this, the default setting is “NorthWest” (think of a map). North places the widget in the top-center of your page, while NorthEast is the top right .

Helppier_TemplateYou can also change colors and fonts for the Help bubbles with the Template tool. When you’re done, click Save & Activate to make the changes on the live site.

Getting Feedback

Users can provide two types of feedback to you when they access your help. At the bottom of each help bubble, users can click the Feedback link to see a standard “Was this help useful?” with thumbs-up or thumbs-down. For more serious issues, users can Flag a help bubble for items that are Outdated, contain wrong information, or have “offensive language.” They can use a comment box to explain what’s wrong.

As the author, you’ll find basic statistics for use and feedback in the Dashboard home page. If someone has flagged your content, go to the page to see what’s been reported.

Summary: Nice Basic Tool

Helppier gives technical communicators a simple way to help users navigate complex web-based applications, and lets marketers point to a site’s highlights without being terribly aggressive. It’s worth a try.

Subscribe to TechWhirl via Email