Connections widgets are parts of Connections that can be integrated in any web-based system. The pre-requisite to have Connections widgets is:
Single sign-on API described here.
To display widget contents:
If need to show several widgets on the same page, their names can be comma-separated. There is an example call for widget on the page:
<div id="cf_widget_myfollowing"></div>
<div id="cf_widget_statistics"></div>
<script type="text/javascript" src="http://chilifresh.com/connections/opac/chilifresh.js"></script>
<script type="text/javascript">
<!--
$.chilifresh.init({
'library_id': '12345',
'opac_session': 'poi12j3oi12j3oi1j23oi',
'widgets': 'myfollowing,statistics',
'item_isbn': '0670031534'
});
//-->
</script>
To parse the widgets the following code (parser script) most go on below the following widget codes:
<script type="text/javascript" src="http://chilifresh.com/connections/opac/chilifresh.js"></script>
<script type="text/javascript">
<!--
$.chilifresh.init();
//-->
</script>
The $.chilifresh.init() call may contain additional parameters, e.g., to pass opac_session parameter value to user session after user opens OPAC screen after login or registration, the code would be:
<script type="text/javascript" src="http://chilifresh.com/connections/opac/chilifresh.js"></script>
<script type="text/javascript">
<!--
$.chilifresh.init({
'opac_session':'as90du0a9sud092wu020',
'library':'1234'});
//-->
</script>
For usershavingitem and itemconnections widgets the item ID (such as ISBN, UPC, etc.) is required to be passed to init(), and it can be done this way: <script type=“text/javascript” src=“http://chilifresh.com/connections/opac/chilifresh.js”></script>
<script type="text/javascript">
<!-- $.chilifresh.init({'item_isbn':'0670031534'}); //-->
</script>
</code>
The code necessary to add each of the widgets are available below with each of the widgets, the widget name is the part after the “cf_widget_” prefix. You may include several widget place-holders per page, the parser script needs to be included only once. So that the entire implementation needs following lines of code in following order to work:
<div id="cf_widget_XXX">
<script type="text/javascript" src="http://chilifresh.com/connections/opac/chilifresh.js"></script>
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets':'XXX',
'item_isbn':'0670031534'
});
//-->
</script>
The output will be HTML code of the widget without CSS styling - it must be added separately or the widget will use the styling of the page where it is implemented.
For widgets involving iFrame, a CSS file may be passed in as parameter like this:
<div id="cf_widget_XXX">
<script type="text/javascript" src="http://chilifresh.com/connections/opac/chilifresh.js"></script>
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets':'XXX',
'item_isbn':'0670031534',
'css':'http://www.opac.com/css/file.css'
});
//-->
</script>
Also, the full Connections interface CSS can be adjusted by passing 'connections_css' parameter like this: <script type=“text/javascript”>
<!--
$.chilifresh.init({
'widgets':'XXX',
'item_isbn':'0670031534',
'connections_css':'http://www.opac.com/css/file.css'
});
//-->
</script>
</code>
For widgets with item, user deep-linking or specific widget linking back to catalog, the deep-link structure must be defined in source code such as in the example below. Here is explanation of each of URLs:
<div id="cf_widget_XXX">
<script type="text/javascript" src="http://chilifresh.com/connections/opac/chilifresh.js"></script>
<script type="text/javascript">
<!--
$.chilifresh.init({
'item_url' : 'http://example-catalog.com/view.aspx?location=example_location&cn={CONTROL_NUMBER}',
'user_url' : 'http://example-catalog.com/social/profile.aspx?location=example_location&cfc={USER_ID}',
'isbn_url' : 'http://example-catalog.com/view.aspx?location=example_location&isbn={ISBN}',
'title_url' : 'http://example-catalog.com/view.aspx?location=example_location&title={TITLE}&author={AUTHOR}',
'logon_url' : 'http://example-catalog.com/logon.aspx?location=example_location&cfc=1&modal=1&close=1',
'register_url' : 'http://example-catalog.com/patronaccount/selfregister.aspx?location=example_location',
'record_url' : 'http://example-catalog.com/patronaccount/default.aspx?location=example_location',
'search_url' : 'http://example-catalog.com/search/default.aspx?location=example_location',
'related_users_url': 'http://example-catalog.com/social/cfc.aspx?location=example_location&isbn={ISBN}&mode=relatedusers',
'connected_items_url': 'http://example-catalog.com/social/cfc.aspx?location=example_location&isbn={ISBN}&mode=relateditems',
'tags_url': 'http://example-catalog.com/social/cfc.aspx?location=example_location&isbn={ISBN}&mode=itemtags',
'css' : 'http://example-catalog.com/themes/shared/styles.css',
'connections_css' : 'http://example-catalog.com/shared/chilifresh.css',
'after_fb_close' : 'execute_this()'
});
//-->
</script>
PLEASE NOTE: must use {CONTROL_NUMBER}, {USER_ID} and {ISBN} tokens in corresponding places to mark where the appropriate ID should go
Code:
<div id="cf_widget_profile"></div>
Code:
<div id="cf_widget_bookshelf"></div>
Code:
<div id="cf_widget_corkboard"></div>
Code:
<div id="cf_widget_interests"></div>
Code:
<div id="cf_widget_mylibrary"></div>
Code:
<div id="cf_widget_myfriends"></div>
Code:
<div id="cf_widget_interests"></div>
Code:
<div id="cf_widget_statistics"></div>
Code:
<div id="cf_widget_myfollowing"></div>
Code:
<div id="cf_widget_tags"></div>
Code:
<div id="cf_widget_communities"></div>
Code:
<div id="cf_widget_bookclubs"></div>
Code:
<div id="cf_widget_chatrooms"></div>
Code:
<div id="cf_widget_discussions"></div>
Code:
<div id="cf_widget_itemconnections"></div>
However, it requires having item ID specified in the init() part like this:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'itemconnections',
'item_isbn': '0670031534'
});
//-->
</script>
Code:
<div id="cf_widget_usershavingitem"></div>
However, it requires having item ID specified in the init() part like this:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'usershavingitem',
'item_isbn': '0670031534'
});
//-->
</script>
Code:
<div id="cf_widget_editprofile"></div>
Code:
<div id="cf_widget_publicprofile"></div>
However, it requires having user ID specified in the init() part like this or uses user's own ID:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'publicprofile',
'userid': '1234'
});
//-->
</script>
Code:
<div id="cf_widget_revieweditems"></div>
However, it requires having user ID specified in the init() part like this or uses user's own ID:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'revieweditems',
'userid': '1234'
});
//-->
</script>
Code:
<div id="cf_widget_reviews"></div>
However, it requires having user ID specified in the init() part like this or uses user's own ID:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'reviews',
'userid': '1234'
});
//-->
</script>
Code:
<div id="cf_followingcfg"></div>
Widget ID: widget_followingcfg
Code:
<div id="cf_widget_userfollowers"></div>
However, it requires having user ID specified in the init() part like this or uses user's own ID:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'userfollowers',
'userid': '1234'
});
//-->
</script>
Code:
<div id="cf_widget_userfollowing"></div>
However, it requires having user ID specified in the init() part like this or uses user's own ID:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'userfollowing',
'userid': '1234'
});
//-->
</script>
Code:
<div id="cf_widget_findusers"></div>
Code:
<div id="cf_widget_userbookshelves"></div>
However, it requires having user ID specified in the init() part like this or uses user's own ID:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'userbookshelves',
'userid': '1234'
});
//-->
</script>
Code:
<div id="cf_widget_userfriends"></div>
However, it requires having user ID specified in the init() part like this or uses user's own ID:
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'userfriends',
'userid': '1234'
});
//-->
</script>
Code:
<div id="cf_widget_messaging"></div>
Code:
<div id="cf_widget_relatedusers"></div>
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'relatedusers',
'item_isbn': '0670031534'
});
//-->
</script>
Code:
<div id="cf_widget_relateditems"></div>
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'relateditems',
'item_isbn': '0670031534'
});
//-->
</script>
Code:
<div id="cf_widget_itemtags"></div>
<script type="text/javascript">
<!--
$.chilifresh.init({
'widgets': 'itemtags',
'item_isbn': '0670031534'
});
//-->
</script>