Setting up Widgets on your Summer Reader website
A little about Summer Reader Widgets
The Summer Reader 2009 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.
First things first: In order to make these widgets work you will need 3 files from us (the .css, and the .js file should be in the same folder with your HTML files).
These files are located in the application’s root folder and can be read and saved locally with your browser (Note: Firefox is required to access the .js file. IE blocks direct access to javascript files). You can download the latest files from our demo site:
http://evanced.info/evanceddemo/sr/readerwidget.css
http://evanced.info/evanceddemo/sr/readerwidget.html
http://evanced.info/evanceddemo/sr/readwidget.js
The files can also be downloaded from your application’s site. Example URL: http://yourserver/evanced/sr/readerwidget.html.
Let’s talk about the files.
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 2: readerwidget.html (this is the code that you will copy and paste within your website)
File 3: readwidget.js (This is the code that the widgets need in order to function).
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).
a. Take note that you will need to 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/’. Then set your return page to your html page (use the fully qualified URL). You will also need to change the ProgramID to reflect the specific program you will be using.
NOTE: You can get the ProgramID by logging into Summer Reader. Click ‘System Maintenance’ then click ‘Edit Program’ and select your specific program. At the top you will see the Program ID.
You may also need to change the default PageLangID. 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.
A couple of things to note about the arrScriptBlocks variables; these 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. In order to remove for example the “links” script block the code would look like this:
Make note that the array declaration was changed from 4 to 3 and the arrScriptBlocks variables following the “links” script block variable were renumbered.
The other thing to note about this section is the “reviews” script block. There are 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.
3. 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.
4. 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.
5. 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.
6. The highlighted HTML below is the messages widget. This widget pulls in your program messages.
7. The highlighted HTML below is the reviews widget. This widget pulls in accepted patron reviews and displays the buttons for patrons to submit (if the program is configured appropriately) or view additional reviews.
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. Also, be sure to set the ProgramID in the URL to reference the appropriate program:
Why aren’t my widgets showing any information?
This can be for several reasons:
1. Check that you have entered the correct ProgramID in variable definition at the top.
2. Make sure all the paths are correct.
3. Make sure you copied the code within the <HTML></HTML> tags.
4. 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)
