Home » Categories » Multiple Categories

How To Setup Widgets for Summer Reader 2013

Setting up Widgets on your Summer Reader website

WARNING: Widgets are an advanced programing method and will require extensive knowledge of HTML, CSS and JavaScript. Evanced Solutions' Support will offer support for functional aspects but not implementation.

Defining Summer Reader Widgets

The Summer Reader 2013 widgets will allow you to take basic Summer Reader functions and integrate them into your current website. For example you will be able to allow patrons to login to their program right from your home page or teen page. You will be able to post reviews of books your kids have done anywhere within your website. You can do this and more with a few cuts and pastes. So let’s get started.

What Files Do You Need?

To make the widgets work, you will need four files that we supply. They are located in the root folder of your Summer Reader program. Example URL: http://yourserver/evanced/sr/readerwidget.html. They can be read and saved locally with your browser. If you are using IE then you will be prompted to download the file. If you are using Firefox, the files are pulled into the browser window and have to copied and pasted.You can also download the latest files from our demo site:

The files readerwidget.css, readerwidget.js and srproxy.htm need to be placed in the same folder as your library's HTML files.

A little info about each of the files:

File 1: readerwidget.html (This is a sample page that contains the code that you will copy and paste within your website to activate the widgets.)

File 1: readerwidget.css (This is where the style sheet settings for the widgets are located.) Please note that you will be able to customize your widgets using the readerwidget.css style sheet file.

File 3: readwidget.js (This is the code that the widgets need in order to function.)

File 4: srproxy.htm (This file is only required if you are integrating with Facebook or Novelist Select. You must use "View Source” and copy and paste contents of the file into a text editor and save as "srproxy.htm” on your site.) So we need to figure out what to do with all the code in the .HTML file.

1. We need to define our variables so lets just copy (from readerwidget.html) and paste them before the <HTML> tag on our page (see graphic below).

Set the ServerPath within this section of code. This tells the code where to get the data from (the path to your Summer Reader installation). It should look something like this ‘http://yourserver/evanced/sr/’. Set the ReturnPage to the fully qualified URL of your library's HTML page. Set the ProgramID to point to the specific program you will be using.

NOTE: The ProgramID can be found by logging into Summer Reader. Click ‘System Maintenance’ then click ‘Edit Program’ and select your specific program. At the top is the Program ID.

The default PageLangID may also need to be changed. This is the default language used by the widgets. To determine the PageLangID to use, go to ‘System Maintenance’ then click ‘Edit Program’ and click on the ‘Language Setup’ button. Make note of your program’s default language. Now, go back to ‘System Maintenance’ and click on ‘Language Setup’ and then click on your program’s default language. The Language ID is located at the top of the page. Set the PageLangID to this value.

NOTE: In order to use the UTF character set for compliance with alternative languages, the following META tag must be set.


The arrScriptBlocks variables tell the page where to get the information from and then where to put it within your HTML page. arrScriptBlocks[0] and arrScriptBlocks[1] should not be altered or removed – these call housekeeping routines that are required. The other arrScriptBlocks variables can be removed if not being used. For example, to remove the "links” script block, the code would look like this:

The array declaration was changed from 4 to 3 and the arrScriptBlocks variables following the "links” script block variable were renumbered.

The "reviews” script block in this section controls the behavior of the reviews displayed on your HTML page. It contains two additional configuration URL parameters – random and limit. These can be set differently to change the behavior of the reviews displayed on your HTML page. If you set random=N then only the latest reviews determined by the date that they were submitted are pulled in rather than in a random fashion. If you set limit=10 then 10 reviews will be pulled in rather than the default of 3.

2. The following variables must be included in your html page.

3. The highlighted HTML below must be included if your program is set up for 2 or more languages. This widget provides a drop-down list of your program languages for the patron to select from.

4. The highlighted HTML below is the links widget. This widget pulls in your program’s links.

5. The highlighted HTML below is the prize message widget. This pulls in the program’s prize message when a patron is eligible for a prize. This assumes that the settings are set appropriately to show the prize message.

6. The highlighted HTML below is the certificate message widget. This pulls in the program’s certificate message when a patron is eligible print their certificate. This assumes that the settings are set appropriately to show the certificate message.

7. The highlighted HTML below is the login widget. Depending on whether the patron is logged in or out determines the various buttons that are displayed. Some buttons visibility is based on the various configuration settings in the program’s setup and whether the patron is logged in or out.

8. The highlighted HTML below is the messages widget. This widget pulls in your program messages.

9. The highlighted HTML below is the reviews widget. This widget pulls in accepted patron reviews and displays the buttons for patrons to submit (if program is configured appropriately) or view additional reviews.

10. The highlighted HTML below is necessary if you have enabled your program for Facebook integration. The file "srproxy.htm” also needs to be included on your site. This code should be placed within the "<body></body>” tags of your HTML page.


11. The highlighted HTML below is necessary if Novelist Select has been enabled. The file "srproxy.htm” also needs to be included on your site.

Common Questions

Why can’t I get the links to display from both my programs at the same time, on the same page?

This is because you must change the div ID. The first can remain being named id=”divLinks” while you can name the second something else like id=”divLinks2”. See the screenshot below for an example:

You will also need to add a script block to the javascript code for the additional links div. Make sure to increment the arrScriptBlocks array when making this change:

Why aren’t my widgets showing any information?

This can be for several reasons:

  • Check that you have entered the correct ProgramID in variable definition at the top.
  • Make sure all the paths are correct.
  • Make sure you copied the code within the <HTML></HTML> tags.
  • Make sure you are using the latest release of the readwidget.js file. If you are getting javascript errors, try updating your readwidget.js file by downloading the most recent file from here:


  • Check that your program has information available to be displayed.

Why can’t I make my widget the same color as my website background?

You are able to do this within the readerwidget.css file. Please note that you must have a general knowledge of style sheets in order to use. (Review the style sheets section in the user manual for more info)

Custom Fields
  • Applicable To: Admin Users
  • Attachments: No
  • Summary: Summer Reader Widget
0 (0)
Article Rating (No Votes)
Rate this article
  • Icon PDFExport to PDF
  • Icon MS-WordExport to MS Word
Attachments Attachments
There are no attachments for this article.
Comments (2) Comments
Comment by Nate Dunlevy on Mon, Apr 22nd, 2013 at 12:43 PM
This widget article has nothing to do with Facebook setup.To set up facebook:Edit program, Turn facebook on, then use the configure button to set it up.
Comment by cathy Lichtman on Sat, Apr 20th, 2013 at 4:42 PM
Do you need to add all this to have facebook integration or is it enough to just click yes on the question "facebook integration?" I do not understand any of the instruction on facebook configuration.
Related Articles
Hosted Customer Sites Security Protocol
Viewed 4916 times since Wed, Sep 28, 2011
How to Locate Unsecured content in a Secured HTTPS page
Viewed 5483 times since Tue, Dec 20, 2016
Summer Reader 2013 Evanced Style Templates and Certificates
Viewed 31471 times since Fri, Feb 8, 2013
Summer Reader Template Installation Guide
Viewed 23254 times since Mon, Jan 16, 2012
Mobile Access for Summer Reader
Viewed 4895 times since Mon, Nov 25, 2013
Summer Reader - Authentication
Viewed 15732 times since Wed, Sep 28, 2011
Configuring a Certificate in Summer Reader
Viewed 17609 times since Mon, Mar 25, 2013
How do I add text to the landing page?
Viewed 5646 times since Thu, Oct 6, 2011
What to Expect With Wandoo Reader for 2015
Viewed 4845 times since Tue, Feb 3, 2015
Can one Summer Reading Program Support Multiple Goals?
Viewed 4781 times since Thu, Oct 6, 2011