Home » Categories » Multiple Categories

How To Setup Widgets for Summer Reader

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

5 (1)
Article Rating (1 Votes)
Rate this article
  • Icon PDFExport to PDF
  • Icon MS-WordExport to MS Word
Attachments (1) Attachments
Comments Comments
There are no comments for this article. Be the first to post a comment.
Related Articles
Staff-side Session Timeout in Events, Room Reserve, and Summer Reader
Viewed 6521 times since Wed, Sep 28, 2011
Summer Reader Version 9 Manual
Viewed 4253 times since Thu, Mar 15, 2012
How To Summer Reader-Create Program Links
Viewed 1951 times since Wed, Sep 28, 2011
How to Edit Patron Information
Viewed 1954 times since Wed, Oct 19, 2011
How To Setup Widgets for Summer Reader 2013
Viewed 23680 times since Tue, Apr 9, 2013
Mobile Access for Summer Reader
Viewed 2662 times since Mon, Nov 25, 2013
How to export and import a program’s style sheet in Summer Reader
Viewed 2587 times since Mon, Nov 21, 2011
What is new in Summer Reader 2013?
Viewed 87252 times since Tue, Feb 5, 2013
Server Requirements
Viewed 6187 times since Wed, Sep 28, 2011