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 the Swifty Embed JS Script in your before your </body> tag closes:

<!-- 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 paramter, 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 a 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

As of now, you can't customize the colors/icon of Swifty, but we do plan on opening that functionality in the future.

You CAN, however, customize the "Contact Us" button url, aswell as the Contact Us and On Initialization javascript, in the embed code itself.

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 the 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):