US English (US)
FR French
DE German
SA Arabic
BS Bosnian

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Book a Demo
  • Product Updates
  • Contact Us
English (US)
US English (US)
FR French
DE German
SA Arabic
BS Bosnian
  • Home
  • Swifty (In-App Widget)

How To Install Swifty

Written by Emil Hajric

Updated at June 1st, 2021

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Integrations
  • Getting Started
    Users Accessibility New to Helpjuice? Start Here Content Management Multiple Languages/Translations & Localization Multilingual Knowledge Bases Analytics Video Tutorials
  • Customization
    Customization Guides
  • API V2
  • API V3
  • Article Editor
  • Swifty (In-App Widget)
  • Billing / Subscription
  • Authentication
+ More

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


 

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • How To Update Billing Information
  • Olark Integration
  • What is Swifty?
  • Helpjuice Swifty(In-App) Widget

Copyright © 2023 - Helpjuice

Helpjuice, Inc. is a registered US Corporation, EIN # 45-2275731

Download W9
  • Help
  • Features
  • Pricing
  • About
  • Careers
  • Customers
  • Blog
  • Case Studies
  • Resources
  • Knowledge Base Examples
  • Privacy Policy
  • Terms of Service

Why is the knowledge base important?

With a knowledge base, you can allow your customers to self-help themselves, thus reducing your customer support by up to 60%. Furthermore, you can also have your team get instant answers to the questions they need without having to email themselves all using knowledge base software.

What is the purpose of a knowledge base?

The purpose of knowledge base software is to allow you to host your knowledge base/corporate wiki in one centralized 'hub'. Both your customers, and employees can now access information within seconds!

Made with from Miami, Bosnia, Morocco & Brasil

+1 (833) 387 3877 success@helpjuice.com
Expand