Pika Training - List Widgets & Search Box Embed Codes for Websites 12/06/2016

Pika List Widgets can be integrated into other sites. Multiple styles of widgets can be embedded on external websites. These widgets can be based on user-created lists or search results. This is a great way to show patrons a glimpse of what is available from the library's catalog. Patrons who click on items will be redirected to the catalog where they can place holds or get additional information about the title.

Pika search boxes can be embedded on your primary library website to allow patrons to search the catalog from your library’s homepage. Patrons will be redirected to the catalog after they conduct a search.

Pika List Widget Embedding

Go to Pika Configuration and List Widgets.

The Available List Widgets will show everyone’s widgets. To get the embed codes click on View. If want to learn how to create, edit, view or preview a list widget, click on the online documentation link.

$C:\Users\TPOQUE~1\AppData\Local\Temp\SNAGHTML25623071.PNG$

Iframe Embed Code

Scroll down to the Integration notes. You will see the iframe code, and the Live Preview. Copy the code to use to embed into your website. Note: the iframe does not resize well for mobile devices.

List Widget with Resizing Embed Code

Scroll down to the List Widget with Resizing and Integration notes. Copy the entire code to use to embed into your website. Note: this code will resize with mobile devices.

$C:\Users\TPOQUE~1\AppData\Local\Temp\SNAGHTML256e1398.PNG$

Adding Multiple Widgets to a Website

You will not need all of the code for each widget. Below is an example mark-up for multiple widgets, and the inclusion of the resizing code just once.

You will need an additional Jquery line jQuery("#listWidget178").iFrameResize(); for each widget that is on the page.

jQuery("#listWidget178").iFrameResize();

jQuery("#listWidget179").iFrameResize(); /* 2nd widget */

jQuery("#listWidget180").iFrameResize(); /* 3rd widget */

</script>

<!-- Vertical Resizing : When Iframe is larger than viewport width,

resize to 100% of browser width - 2 * padding (in px) -->

setWidgetSizing = function(iframe, OutsidePadding){

originalWidth = jQuery(iframe).width();

wasResized = false;

jQuery(window).resize(function(){

resizeWidgetWidth(iframe, OutsidePadding);

}).resize();

};

resizeWidgetWidth = function(iframe, padding){

if (padding == undefined) padding = 4;

var viewPortWidth = jQuery(window).width(),

newWidth = viewPortWidth - 2*padding,

width = jQuery(iframe).width();

if (width > newWidth) {

wasResized = true;

return jQuery(iframe).width(newWidth);

}

if (wasResized && originalWidth + 2*padding < viewPortWidth){

wasResized = false;

return jQuery(iframe).width(originalWidth);

}

};

</script>

Pika Search Box Embed Code

Currently, the embed code for the Pika search box can be found on the Marmot Wiki under the title of “Add a Pika searchbox to your webpage.”

You would copy the entire embed code to use on your website. However, you do want to change the opac.marmot to your library’s Pika site address. Otherwise, patrons will be redirected to the Union Catalog.

Meeting Date:

Tuesday, 2016, December 6

Documentation Type:

Training Material

Link to File:

Google Doc

Committees:

Discovery Committee

Search form

Pika Training - List Widgets & Search Box Embed Codes for Websites 12/06/2016