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
Configuring a Certificate in Summer Reader
Viewed 14713 times since Mon, Mar 25, 2013
Evanced Application Hosting FAQ
Viewed 4157 times since Mon, Jun 8, 2015
Classic Summer Reader Version Number
Viewed 2439 times since Fri, Sep 19, 2014
Tiered Prize Messages Setup for Prizes Won for Each Level
Viewed 4315 times since Mon, Oct 17, 2011
Current System Status
Viewed 65929 times since Mon, Oct 31, 2016
Summer Reader Evanced Style Templates: All Seasons
Viewed 16303 times since Fri, Jan 18, 2013
Understanding Amazon SES Opt-In and Verification
Viewed 11859 times since Tue, Nov 3, 2015
Summer Reader Template Installation Guide
Viewed 22243 times since Mon, Jan 16, 2012
What to Expect With Wandoo Reader for 2015
Viewed 3621 times since Tue, Feb 3, 2015