You are viewing an Archived item in your Knowledge Base, it is not publicly accessible.

US English (US)
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)
BS Bosnian
  • Home

How To Install Swifty

Written by Emil Hajric

Updated at September 27th, 2024, by Amanda Stançani

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.

  • 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 and Webhooks
  • Article Editor
  • Billing / Subscription
  • Authentication
  • Pricing
  • Swifty AI Chatbot
  • Swifty AI Helpbar
  • What's New
+ More

Table of Contents

Installing Swifty Customizations Which Articles Does Swifty Display? Loading Custom Data Example: Helpjuice Swifty with Olark Video Overview

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

 

 

setup swifty install swifty

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Olark Integration

Copyright © 2025 - 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 support@helpjuice.com
Expand