Online Chat
 Call Us: 
1-877-744-1221
Browse Submit a Ticket
 
Advanced Search
Tools
Rss Categories

Adding Active Response suggestions to a form on your website

Author: Edward Hardin Reference Number: AA-00703 Views: 4236 Last Updated: 03/25/2013 02:40 PM 0 Rating/ Voters

This guide explains how to add Active Response feature to a form on your website. Active Response helps you to provide an always available self-service to your customers, allowing them to find the answers to their questions immediately instead of submitting them to your support or sales department and waiting for the answer. While user types text in the form with Active Response feature, he sees suggested articles from the knowledgebase below. Active response system analyzes user input and finds the most accurate answers to his question from the knowledge base.

Enable API in KMP

Go to Administration > General Settings > API Server page and tick the checkbox against "Enable API Server". Then click "Save".


Notice the Server Link here, you'll need it later.

Upload files to the server

Download the active-response.zip file below on this page. Unzip it and copy its contents to a directory on the website (this may any directory and it doesn't have to be on the same site as KMP). You'll be launching your API script from that directory.

Adjust the URL and the token

Adjust the URL to KMP API server and the token in the config.php file:

define('CLIENT_TOKEN', '198fcc74ce556625d1b09a36cd8325b7');
define('URL_TO_KMP_RPC_SERVER', 'http://www.yourwebsite.com/kb/api.php');

To get a token, you need to create a Staff user (Users & Groups > Staff > Add Staff User) and assign him to a group. Then re-open the user edit window. You can copy the token from it.


Please note that the token is being used for authentication, so if you're using the token of a certain user account, it means that each article that the user can see may be shown to public via the form with Active Response. We would recommend to create a user with special access permissions, and use his token here to avoid exposure of restricted information. Alternatively you can enable the "Allow Anonymous Access" option at the API settings page (Administration > General Settings > API Server).

You can get the URL to the API server from the Administration > General Settings > API Server page.

Copy CSS and JavaScript references

Adjust the URLs as mentioned below and copy-paste this code to the <head></head> section of the page were you want to have the Active Response feature.

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/search.css" />
<link rel="stylesheet" type="text/css" href="css/ask_question.css" />
<script type="text/javascript">
                    base_url = 'http://www.web-site-scripts.com/knowledge-base/';
                    emptyImageUrl = 'http://demo/active-response/images/s.gif';
                    base_href = 'http://demo/active-response/';
                    i18n = { 'lbl_article': 'Article', 'lbl_attachment_in': 'Attachment to', 'lbl_category': 'Category', 'lbl_do_these_answers_help': 'Do These Answers Help?', 'lbl_found_some_answers': 'We\'ve found some answers in our knowledge base that might be helpful to you:', 'lbl_cancel': 'Cancel', 'lbl_desc': 'Description', 'lbl_save': 'Save', 'lbl_term': 'Term', 'msg_error_yellow': 'Please complete the required fields below highlighted in red.', 'msg_exist_term': 'You already have this term.', 'msg_title_add_term': 'Add Term' };
                    rtl='';
</script>
<script type="text/javascript" src="js/lite-build.js" ></script>
<script type="text/javascript" src="jsa/gateway_ask_question.js" ></script>

where:

http://www.web-site-scripts.com/knowledge-base/ - needs to be replaced with the URL to your KMP main front-end page

http://demo/active-response/ - needs to be replaced with with the URL to the folder with the aforementioned API files.

Adjust the form fields

Edit the form which you're going to plug Active Response feature to, and add some IDs to it.

Wrap it with:

<div id="ask-question-case">

Here goes your form.

</div>

Add id="askSubject" to the Subject field of the form (optional - only if you wish that field to be searchable):

<input type="text" name="subject" value="" id="askSubject">

Add id="ask-question" to the text area for user question:

<textarea id="ask-question" name="question" cols="" rows=""></textarea>

Add image that will show loading animation to a desired place on the form page:

<img alt="" style="padding-left: 5px; display: none;" src="images/loadingme.gif" id="ask-loader">

Add this div to the place where you want to show articles suggested by Active Response:

<div id="ask-proposes"></div>

That's it! Now you can open the form in your browser and try typing something that can be found in your knowledge base. You'll see the Active Response in action.

If you would need any help in configurung Active Reponse, feel free to contact us.


Attachments
active-response.zip 0.3 Mb Download File