Installing Swifty

Please note: Before Installing Swifty, You MUST Have A Helpjuice.com Account.

To Install Swifty, you must have access to the web app you'd like Swifty to appear on. If you'd like for Swifty to appear on every page of your web-app, you'd simply paste the code on every page on your web-app.

1) Paste this Swifty Embed Javascript snippet before your closing </body> tag:

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

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

  //On Helpjuice Initialization. Feel free to edit
  //For Custom activity
  onHelpjuiceInit = function(){ }

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


  //helpjuiceSwiftyConfig = {
  //  widgetPosition: "bottomLeft",
  //  themeColor: '',
  //  linkColor: ''
  //}


  // Please use this function if you'd like for JS
  // to be fired off instead of an HREF Url.

  //onHelpjuiceContactUs = function() { }

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

2) Save your file!

Customizations

It's possible to change the Swifty icon! Unfortunately, we don't have customization samples for the Helpjuice Swifty widget at the moment, as it would need to be done directly in the front-end code (on the same page where the widget is embedded at).

This change should be performed on your end, by overriding the default CSS of the Swifty widget. It's a code change and the URL of your CSS file can be found at https://subdomain.helpjuice.com/swifty.css

Additionally, you can customize the "Contact Us" button URL, as well as the Contact Us and On Initialization javascript, in the embed code itself.

Which Articles Does Swifty Display?

The Swifty widget displays Public articles, so you must have a Public Knowledge Base for it to work.
 

Loading 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 given 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. Inside search, you may use a string, and inside category, an integer.

If you only supply search, it'll run a search for that keyword.
If you only supply category, it'll supply the top 5 articles for that category.
If you supply BOTH the search & category, it'll run a search for that keyword, and make sure that it matches that given category.

You can indeed, have this tied to a link (for example "Read more about this feature"), like so: 

<a href="openSwifty({search: "Installing the MacOS File"})">Learn More bout MacOS Installations for this app</a>

Example: Helpjuice Swifty with Olark

Utilizing the Helpjuice Swifty Custom functions, you can customize Olark to appear & disappear when someone clicks on "Contact Us" in your Helpjuice Swifty Widget button. 

Here's a sample Javascript that you'd embed for Helpjuice Swifty to work perfectly with Olark.

Just make sure you include Swifty AFTER Olark's embed code.

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

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


  onHelpjuiceInit = function(){
    olark('api.box.hide');
  }
  onHelpjuiceContactUs = function() {
    olark('api.box.show');
    olark('api.box.expand');
    $('#helpjuice-widget').fadeOut();
  }

  //helpjuiceSwiftyConfig = {
  //  widgetPosition: "bottomLeft",
  //  themeColor: '',
  //  linkColor: ''
  //}

  //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 (Simple):

 

How To Install Helpjuice Swifty + Olark (Advanced):