Install Swifty

Note: Before installing Swifty, you MUST have a Helpjuice account.

To install Swifty, you must have access to the web app you want Swifty to appear on. If you want Swifty to appear on every page of your web app, simply paste the code on every page of your web app.

1) Paste the Swifty Embed JS script into your before closing your </body> tag:

 <! - Helpjuice here ->
<script>
helpjuice_account_url = "https://helps.helpjuice.com";

// Button "Contact" HREF
helpjuice_contact_us_url = "http://help.helpjuice.com/contact-us";

// On Helpjuice initialization. Feel free to edit
// For custom activities
on Helpjuice Init = function () {}

// You can also customize the look & feel of Swifty
// use our Config parameter, have a look:
// widgetPosition accepts: bottomLeft, topLeft, bottomRight, topRight
// widgetPosition accepts: bottomLeft, topLeft, bottomRight, topRight


// helpjuiceSwiftyConfig = {
 


// Use this function if you want JS
// are fired instead of an HREF URL.

// at Helpjuice ContactUs = function () {}

</script>
<script async src = 'https: //s3.amazonaws.com/helpjuice-static/helpjuice_production/swifty/helpjuice_inapp.min.js'> </script>

2) Save your file!

Modifications

As of now, you won't be able to customize Swifty's colors / icon, but we plan to open that functionality in the future.

However, you CAN modify the URL of the "Contact Us" button, as well as the javascript Contact Us and On Initialization , in the embed code itself.

Load custom data

With the latest update of Swifty, you can now call a JavaScript function that allows Swifty to load a search result or popular questions of a particular category.

 openSwifty ({search: "OPTIONAL_QUERY_FOR_SEARCH", category: OPTIONAL_CATEGORY_ID})

As you can see, the openSwifty function accepts a JSON object, with search, or, category as the values. You may use a string within the search function and an integer within the category.

If you enter a search query only, it will search for that keyword.
Specifying category only returns the top 5 articles for that category.
Specifying BOTH the search and the category searches for that keyword and checks if it matches that particular category.

You can indeed have this associated with a link (for example "Read more about this feature" ), such as:

 <a href="openSwifty()search: "Installing the MacOS File""> Learn more about MacOS installations for this app </a>

Example: Helpjuice Swifty with Olark

Using the Helpjuice Swifty Custom features, you can customize Olark so that it appears and disappears when someone clicks "Contact" in your Helpjuice Swifty Widget button.

Here's an example of a Javascript that you would embed to make Helpjuice Swifty work perfectly with Olark.

Make sure to include Swifty NA Olark embed code.

 <! - Helpjuice here ->
<script>
helpjuice_account_url = "https://helps.helpjuice.com";

// Button "Contact" HREF
// helpjuice_contact_us_url = "http://google.com/";


on Helpjuice Init = function () {
olark ('api.box.hide');
}
at Helpjuice ContactUs = function () {
olark ('api.box.show');
olark ('api.box.expand');
$ ('# helpjuice-widget'). fadeOut ();
}

// hide Olark on contract.
olark ('api.box.onShrink', function () {
olark ('api.box.hide');
$ ('# helpjuice-widget'). fadeIn ();
});

</script>
<script async src = 'https: //s3.amazonaws.com/helpjuice-static/helpjuice_production/swifty/helpjuice_inapp.min.js'> </script>

Video overview

How to install Helpjuice Swifty (easy):

Helpjuice Swifty + Olark (Advanced):