---

Adding Paratext Search to Your Library’s Website – A Guide
13 February 2020 by Paratext Editorial

Eight Centuries | United States Masterfile | Reference Universe

With a little HTML and CSS know-how, adding our widget code to your existing library webpage is as easy as 1-2-3. Need a refresher? Not to worry, we’ve got you covered! Read on to learn where to add the code and how to customize the widget to match your library website style.

These instructions will detail how to add the Eight Centuries widget code to a library website. However, fear not if you are a U.S. Documents Masterfile or Reference Universe customer: the steps are exactly the same to add widgets for other products. Simply use the U.S. Documents Masterfile or Reference Universe widget code instead.

Note: customers who use LibGuides from Springshare should follow the instructions laid out on their FAQ page to add Paratext widgets to their guides.

 

Why the Widget?

(Those only interested in the step-by-step, skip to “Adding the Widget” below.)

Why bother with the widget at all?

The answers to this can vary depending on the institution, but they generally boil down to one aim: to get students and researchers the quality source material they need, faster.

The search widget cuts one extra step out of the research process, allowing your patrons to search Paratext products right from your library website or online syllabus. It makes it easy for your patrons to get to quality primary source material fast.

 

See how some of our customers have integrated Paratext widgets into their library websites:

Morehead State University

Gonzaga University

Lycoming College

 

About the Widget

Structurally, the widget is divided into two parts: the “back end” and the “front end.”

The first section—the back end—is the script that powers the search itself. This is written in a widely-used language called JavaScript and looks like this:

Don’t worry, you don’t need any JavaScript knowledge to add this code to your page. You, the library practitioner (or your IT department), will only need to customize one small part to make the widget work – but more on that later.

The second section, or front end, of the widget is what produces the search box that appears on your library website.

The front end is written in HTML, and—among other things—contains the code that styles the element on your page (styles shown in bold below – but more on that later):

 

Adding the Widget

To add the widget, follow these step-by-step instructions:

1. Determine where on your library page you want the search widget to appear. Find that section in your site’s web code.
2. Copy the entire block of relevant widget code (in links below), everything from “<!--[Product Name] Search Widget-->” to “<!--/[Product Name] Search Widget-->”
   1. Eight Centuries code
   2. U.S. Documents Masterfile code
   3. Reference Universe code
3. Paste the code where you want the search widget to appear.
4. In the back end JavaScript code, replace the square bracketed section in “var url” with your school’s OpenURL resolver proxy URL.
   1. For example, “var url="http://exproxy.mycollege.edu:2048/login?url=https://history.paratext.com/ncm/ncm.php/...”

And that’s it, the search widget is implemented and ready to go.

 

Updating your Widget’s Look

To update the look of the widget to match your library website, you can apply CSS styles to any part of the front end HTML code.

(For more information on how to use CSS, what CSS syntax looks like, and what can be changed with CSS, there are many excellent—and free—online resources like the W3 Schools set of tutorials. CSS allows you to change the color of text, the background colors, borders, margins, and much much more.)

Simply add the desired trait to the “style” attribute of the element in question. For example, to change the text color of the label from white to red, you would change this line of code from this: