Proactive Reference Widget

For a quick and easy widget solution that does not need a programmer, use the ready to use standard RefTracker widget.

We encourage you to use the standard RefTracker widget, however it is possible to create your own widget (tiny request form that can be inserted in a web page without an iframe) using the RefTracker API.   In case you need to do use this “do it yourself” option, the following discusses how you might go about building a custom widget using the RefTracker API:

The Proactive Reference Widget has been designed to bring your reference services to the forefront of your organization’s website. In just a few steps, you can actively engage patrons that might not be finding the information they require. The Proactive Reference Widget is an independent jQuery plugin that can be used with or without the RefTracker API widget. It allows you to display a RefChatter widget (offering a chat response), a RefTracker form (offering a response by email), a RefChatter widget when RefChatter is online and a RefTracker form when it is not, or any HTML in a modal popup, to website visitors that stay on a page for a given period of time. The widget will be displayed after the specified number of seconds and after visitors have visited the specified number of pages in the current session. If the visitor closes the popup, it will not be displayed again until their next visit.

To see the proactive widget in action, reload this page and wait 3 seconds.

Widget Setup

Because the Proactive Reference widget uses jQuery and jQuery UI, you will need to ensure that it is included at the top of the webpage where you would like the widgets to appear. Many websites already use jQuery so this step might not be necessary. You will need to check with the person responsible for managing your organization’s website. You can use the jQuery UI CSS included in your RefTracker installation or create your own styling with the jQuery UI Themeroller. (The only required component is the Dialog component and all of its dependencies.)

Including jQuery and jQuery UI

If you do need to include jQuery then you’ll want to make sure it appears between the head tags as demonstrated below. Be sure to replace {Your RefTracker URL}  with the appropriate URL.

<head>    <!-- Place these script and link tags anywhere in between the head tags. -->    <link rel="stylesheet" href="http://{Your RefTracker URL}/exchange/widget/css/jquery-ui.css">    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script></head>

Including the Widget JavaScript

The following Javascript needs to then be placed on every page in which you would like the Proactive Reference Widget to possibly appear.

Be sure to replace {Your RefTracker URL} with the appropriate URL and {Your RefTracker Form Key} with the desired form key.  You may also want to add the
&iframebreakout=1
parameter discussed in Direct access to specific request forms in order to ensure the form displays automatically in browsers that do not support third party cookies. 
The iframe style can be modified as well as it might not be the appropriate height for your selected form. See below for a list of the available initialization settings. 

<!-- Include the following code just before the closing </body> tag on every page where you would like the widget to appear --><script type="text/javascript">    // Settings    var rtc = rtc || {};        rtc.content = '<iframe src="http://{Your RefTracker URL}/reft100.aspx?key={Your RefTracker Form Key}&extmode=1&sfooter=0&sdevice=1" style="width: 100%; height: 340px; border: none;" frameborder=0></iframe>';        rtc.seconds = 30;               rtc.title = "Lost? We can help!";    // Load script    (function() {        var x = document.createElement("script"); x.type = "text/javascript"; x.async = true;        x.src = "http://{Your RefTracker URL}/exchange/widget/js/proactive-reference.js";        var y = document.getElementsByTagName("script")[0]; y.parentNode.insertBefore(x, y);    })();</script>

Widget Settings

The modal popup can be controlled with the following settings in order to set the # of pages before displaying, time delay, title, etc. The only required setting is rtc.content which specifies the content of the modal popup.

NameDefaultDescription
rtc.content Sets the content for the modal popup.RefChatter example: ‘<div class=”needs-js”></div>’RefTracker example: ‘<iframe src=”http://{Your RefTracker URL}/reft100.aspx?key={Your RefTracker Form Key}
&extmode=1&sfooter=0&sdevice=1″ style=”width: 100%; height: 340px; border: none;” frameborder=0></iframe>'(Any other HTML can also be used.)
rtc.title Sets the modal popup title.Example:‘Lost? We can help!’
rtc.rcurl Specifies which widget to load if RefChatter is being used.Example:‘us.refchatter.net/js/libraryh3lp.js?183’
rtc.seconds60Sets the number of seconds to wait before displaying the widget
rtc.pages3Sets the number of pages that your patron must visit before the widget is displayed.
rtc.position Sets position on the page the widget should display. Possible values include a combination of “center”, “left”, “right”, “top”, and “bottom”.Examples:‘top center’ , ‘center’ , ‘right bottom’
rtc.include Sets the pages to include.Examples:[‘http://yoursite.com’, ‘/subjectguides.php’, ‘etc.’]
rtc.exclude Sets the pages to exclude.Examples:[‘http://yoursite.com/contactus.html’, ‘/index.php’, ‘etc.’]
rtc.rtwidth500Sets the width of the widget for RefTracker forms or other HTML.
rtc.rcwidth300Sets the width of the widget for RefChatter chat widgets.

Full RefChatter Widget example

<script type="text/javascript">    
// Settings
   var rtc = rtc || {};        
rtc.content = '<div class="needs-js"></div>';        
rtc.rcurl = "us.refchatter.net/js/libraryh3lp.js?183";        
rtc.title = 'Lost? We can help!';        
rtc.seconds = 30;        
rtc.pages = 2;        
rtc.position = 'right bottom';        
rtc.include = ['http://yoursite.com', '/subjectguides.php'];        
rtc.exclude = ['http://yoursite.com/contactus.html', '/index.php'];        
rtc.rtwidth = 300;        
rtc.rcwidth = 300;    
// Load script    
(function() {        
var x = document.createElement("script"); x.type = "text/javascript"; x.async = true;              
x.src = "http://{Your RefTracker URL}/exchange/widget/js/proactive-reference.js";        
var y = document.getElementsByTagName("script")[0]; y.parentNode.insertBefore(x, y);
  })();
</script>

Full RefTracker Widget example

<script type="text/javascript">    
// Settings    
var rtc = rtc || {};        
rtc.content = '<iframe src="http://{Your RefTracker URL}/reft100.aspx?key={Your RefTracker Form Key}&extmode=1&sfooter=0&sdevice=1" style="width: 100%; height: 340px; border: none;" frameborder=0></iframe>';        
rtc.title = 'Lost? We can help!';        
rtc.seconds = 30;        
rtc.pages = 2;        
rtc.position = 'right bottom';        
rtc.include = ['http://yoursite.com', '/subjectguides.php'];        
rtc.exclude = ['http://yoursite.com/contactus.html', '/index.php'];        
rtc.rtwidth = 300;    
// Load script    
(function() {        
var x = document.createElement("script"); x.type = "text/javascript"; x.async = true;              
x.src = "http://{Your RefTracker URL}/exchange/widget/js/proactive-reference.js";       
 var y = document.getElementsByTagName("script")[0]; y.parentNode.insertBefore(x, y);    
})();
</script>