Search Widget

Use the embeddable search widgets below to help us spread the word about the Plains to Peaks Collective and your collection.

To create the default widget, using its default values and styles, searching all Plains to Peaks Collective items, use this snippet:

<div id="ppc_search"></div>
<script src="" type="text/javascript"></script>

It should produce a widget that looks something like this, depending on how your own site’s styles apply to the widget’s elements:

Customizing the widget using data attributes

There are a number of options for changing the widget’s appearance and to search the collections of specific PPC partner collections.

To use the ‘dark’ widget, include ‘data-color=”dark”‘ in the #ppc_search div, like this:

<div id="ppc_search" data-color="dark"></div>
<script src="" type="text/javascript"></script>

It should look something like this:

Restricting search to a single collection

To restrict the widget’s search to the collections of a single contributing partner, put the name of the partner institution–exactly as it appears in the list of Contributing Institutions in DPLA–in the ‘data-search’ attribute. For example, if you wanted to search only the items contributed by the Colorado State Publications library, you’d use a snippet like this:

<div id="ppc_search" data-search="Colorado State Publications Library"></div>
<script src="" type="text/javascript"></script>

Unfortunately, there is no way at present to search the collections of more than one partner at a time, other than to search all of the PPC’s collections (the default configuration).

Changing the widget’s heading

To use your own heading above the widget, or to leave out the heading altogether, use the ‘data-heading’ attribute.

<div id="ppc_search" data-heading="This is a custom heading"></div>
<script src="" type="text/javascript"></script>

Creates a widget like:

To leave out the heading, use:

<div id="ppc_search" data-heading="none">
<script src="" type="text/javascript"></script>

Applying your own styles to the widget

To use only the widget’s basic layout styles, use a data-addstyles=”basic” attribute:

<div id="ppc_search" data-addstyles="basic"></div>

Or, to not apply any of the widget’s styles, and just create your own styles:

<div id="ppc_search" data-addstyles="no"></div>

Combining Attributes

All of these attributes can be combined to customize the widget. So, for example, a ‘dark’ widget, searching only the State Publications Library collection, with no heading, and applying only basic styles, you’d use a widget like this:

<div id="ppc_search" data-color="dark" data-search="Colorado State Publications Library" data-heading="none" data-addstyles="basic">
<script src="" type="text/javascript"></script>