InfoSoup Widgets for Library Websites

---

The information below is for InfoSoup libraries' use for the purpose of marketing InfoSoup's catalog and some of its features and offerings. This list is not all-inclusive, and sourced from ​infosoup.bibliocommons.com/info/integration. Please see your NFLS or OWLS marketing contacts with any questions.

​JavaScript-Enhanced Widgets

JavaScript Setup Code
Paste the following snippet at the bottom of the page or if necessary, after every widget on the page. It’s best for performance if this part is embedded only once.

Snippet:

​<script async="async" type="text/javascript">(function(){var e=document.createElement("script"); e.src="https://infosoup.bibliocommons.com/javascripts/sdk.js"; e.async=true;var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()</script>

---

User Navigation Widget (Top Menu Bar)
You’ve seen this bar on the top of every BiblioCommons catalog page, now you can add it to your own site -- no server-side coding necessary!

Snippet:

​<div class="bc-widget bc-my-account-nav"></div>

---

Login / Logout (Top Menu Bar)
It contains the login / logout links, as well as links to the user's settings page.
If you want to change the color of the links, just add the attribute data-bc-widget-link-color:

---

Log In

Snippet:

<div class="bc-widget bc-login-nav-widget" data-bc-widget-link-color="#00F"></div>

---

Account Info (from user dashboard)
Perfect for your homepage or as a sidebar on select pages, now you can embed the user dashboard sidebar account summary on your own pages. This widget also doubles as a login form when users aren’t signed in.

Snippet:

<div class="bc-widget bc-account-widget" style="width: 300px;"></div>

---

Bib Item Widget

Snippet:

<iframe class="bc-widget bc-item-widget" src="//infosoup.bibliocommons.com/widgets/item/S123C456789" width="100%" height="192" frameBorder="0" scrolling="no" allowTransparency></iframe>

---

Bib Item Widget - Item Not Found

Snippet:

<iframe class="bc-widget bc-item-widget" src="//infosoup.bibliocommons.com/widgets/item/S987C654321" width="100%" height="192" frameBorder="0" scrolling="no" allowTransparency></iframe>

---

​IFRAME-Powered Carousel Widgets

To add a carousel widget to your website you need to simply copy and paste the following lines of code into your webpage.
​
By using the code below you no longer have to download javascript or CSS to support the carousels and all updates that occur in the catalog will immediately be reflected on your site.
​

Recently Review Carousel
The following code produces the recently reviewed carousel.

Snippet:

​<iframe src="//infosoup.bibliocommons.com/widgets/carousel_rr" height="315" width="550" frameBorder="0" scrolling="no"></iframe>

---

User List Carousel
To display a user list in a carousel your must know the list id.

To get the list id simply navigate to the desired list in a browser and copy the 2nd number that appears in the URL.

For example the carousel below was generated from the URL,
"http://opl.bibliocommons.com/list/show/1581266_gt/82684829_visual_arts_for_preschool_guide".  The second number 82684829 is bolded. Simply replace the word LIST_ID with that number in the code snippet provided below.

Snippet:

<iframe src="//infosoup.bibliocommons.com/list/list_browse/user/LIST_ID" height="315" width="550" frameBorder="0" scrolling="no"></iframe>

---

Adding a Search Form

Keyword only Search
This is the HTML code you can add to your site to search your BiblioCommons catalog by keyword.

Snippet:

​<form action="http://infosoup.bibliocommons.com/search"> <input type="hidden" name="t" value="smart"/> <input type="text" name="q"/> <input type="submit" value="search"/> </form>

​

---

Searching different types
This form includes a select box with options for searching on keyword, title, subject, tag, author, lists and users. As new search types become available this page will be updated to reflect that but you will have to update the form manually on your site.

Snippet:

​<form action="http://infosoup.bibliocommons.com/search"> <select name="t" id="t"> <option value="smart" title="Keyword">Keyword</option> <option value="title" title="Title">Title</option> <option value="author" title="Author">Author</option> <option value="subject" title="Subject">Subject</option> <option value="tag" title="Tag">Tag</option> <option value="userlist" title="List">List</option> <option value="user" title="User">User</option> </select> <input type="text" name="q"/> <input type="submit" value="search"/> </form>

​