Embedding a chat widget within the SFX menu CARLI SFX - - PDF document
11/10/11 Embedding a chat widget within the SFX menu CARLI SFX webinar Oct. 19, 2011 / Oct. 20, 2011 Andrea Imre Southern Illinois University
¡
¡ ¡a.) ¡Simplified ¡ ¡SFX ¡menu ¡users ¡(subsKtute ¡your ¡library’s ¡code ¡for ¡sfxsic): ¡ ¡ ¡/exlibris/sfx_ver/sfx4_1/sfxsic/templates/simplified_template1/sfxmenu.tmpl ¡ ¡ ¡ ¡ ¡ ¡Insert ¡code ¡right ¡under ¡<body> ¡tag ¡ ¡b.) ¡Advanced ¡SFX ¡menu ¡users ¡(subsKtute ¡your ¡library’s ¡code ¡for ¡sfxsic): ¡: ¡ ¡ ¡ ¡/exlibris/sfx_ver/sfx4_1/sfxsic/templates/sfxmenu/sfxmenu.tmpl ¡ ¡ ¡ ¡Insert ¡code ¡right ¡aXer ¡ ¡ ¡ ¡</HEAD> ¡ ¡ ¡<BODY ¡LEFTMARGIN="0" ¡TOPMARGIN="0" ¡MARGINWIDTH="0" ¡MARGINHEIGHT="0"> ¡
Red ¡elements ¡control ¡posiKon ¡of ¡the ¡widget ¡on ¡the ¡SFX ¡menu, ¡blue ¡elements ¡control ¡the ¡widget ¡when ¡there ¡is ¡ a ¡librarian ¡logged ¡in, ¡purple ¡elements ¡control ¡the ¡appearance ¡of ¡the ¡box ¡when ¡no ¡librarians ¡are ¡logged ¡in. ¡ ¡
¡ ¡ <!-‑-‑ ¡Beginning ¡of ¡libraryh3lp ¡widget ¡code. ¡ ¡-‑-‑> ¡ ¡ <div ¡style="float: ¡right; ¡posiKon: ¡absolute; ¡top: ¡180px; ¡right: ¡5px"> ¡ <div ¡class="needs-‑js"> ¡ Your ¡JavaScript ¡is ¡disabled. ¡ </div> ¡ ¡ <div ¡class="libraryh3lp" ¡style="display: ¡none;" ¡jid="morrislibrarian@chat.libraryh3lp.com"> ¡ <iframe ¡src="hop://libraryh3lp.com/chat/morrislibrarian@chat.libraryh3lp.com?skin=13394&theme=bulb&Ktle=Ask+A +Librarian&idenKty=Librarian" ¡style="width: ¡175px; ¡height: ¡250px; ¡border: ¡1px ¡solid ¡#0066CC;" ¡frameborder="1"></iframe> ¡ </div> ¡ ¡ <div ¡class="libraryh3lp" ¡style="display: ¡none; ¡border: ¡3px ¡solid; ¡border-‑color: ¡#660000; ¡width: ¡175px; ¡font-‑weight: ¡bold; ¡text-‑align: ¡center;"> ¡ No ¡librarians ¡available ¡to ¡chat. ¡ <p> ¡Get ¡help ¡at ¡our ¡<a ¡href="hop://www.lib.siu.edu/askalibrarian" ¡target="_blank"> ¡Ask-‑A-‑Librarian ¡</a> ¡website. ¡ </p> ¡ </div> ¡ ¡ <script ¡src="hop://libraryh3lp.com/js/libraryh3lp.js?mulK" ¡type="text/javascript"></script> ¡ ¡ </div> ¡ <!-‑-‑ ¡End ¡of ¡libraryh3lp ¡widget ¡code. ¡ ¡-‑-‑> ¡
Red ¡elements ¡control ¡posiKon ¡of ¡the ¡widget ¡on ¡the ¡SFX ¡menu, ¡green ¡elements ¡control ¡the ¡size ¡of ¡the ¡widget. ¡ ¡ Text ¡and ¡colors ¡are ¡customized ¡on ¡meebo.com ¡
¡ ¡ <!-‑-‑ ¡Beginning ¡of ¡meebo ¡me ¡widget ¡code. ¡-‑-‑> ¡ ¡ <div ¡style="float: ¡right; ¡posiKon: ¡absolute; ¡top: ¡180px; ¡right: ¡5px"> ¡ <embed ¡src="hop://widget.meebo.com/mm.swf?eiSgwrKRQS" ¡type="applicaKon/x-‑ shockwave-‑flash" ¡width="190" ¡height="275"></embed> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ </div> ¡ ¡ <!-‑-‑ ¡end ¡ ¡of ¡meebo ¡me ¡widget ¡code. ¡ ¡-‑-‑> ¡
¡<!-‑-‑ ¡Beginning ¡of ¡meebo ¡me ¡widget ¡code. ¡-‑-‑> ¡ <div ¡style="float: ¡right; ¡posiKon: ¡absolute; ¡top: ¡180px; ¡right: ¡5px"> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<script ¡language="javascript1.1" ¡type="text/javascript"> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<!-‑-‑ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡var ¡dateObject ¡= ¡new ¡Date(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡var ¡tday ¡= ¡dateObject.getDay(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡var ¡thours ¡= ¡dateObject.getUTCHours(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡var ¡tmins ¡= ¡dateObject.getUTCMinutes(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡funcKon ¡embedWidget() ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡document.write ¡('<embed ¡src="hop://widget.meebo.com/mm.swf?eiSgwrKRQS" ¡type="applicaKon/x-‑shockwave-‑flash" ¡wmode="transparent" ¡ width="190" ¡height="250"></embed>'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡//Convert ¡to ¡Local ¡Kme; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡//**thours-‑6 ¡for ¡standard ¡Kme. ¡ ¡thours-‑5 ¡for ¡daylight ¡savings ¡Kme.** ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡thours ¡= ¡thours-‑5; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡if ¡(thours ¡< ¡0) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡thours=thours+24; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡//Convert ¡Kme ¡to ¡an ¡integer ¡in ¡HHMM ¡format. ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡var ¡myKme ¡= ¡thours*100 ¡+ ¡tmins; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡switch(tday) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡case ¡0: ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡break; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡case ¡6: ¡//Saturday ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡break; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡case ¡4: ¡//Thursday ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡if ¡(myKme ¡> ¡959 ¡&& ¡myKme ¡< ¡2300) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡embedWidget(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡break; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡case ¡5: ¡//Friday ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡if ¡(myKme ¡> ¡959 ¡&& ¡myKme ¡< ¡1600) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡embedWidget(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡break; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡default: ¡// ¡Monday, ¡Tuesday, ¡Wednesday ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡if ¡(myKme ¡> ¡959 ¡&& ¡myKme ¡< ¡2300) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡embedWidget(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡break; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡//-‑-‑> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡</script> ¡ </div> ¡ ¡<!-‑-‑ ¡end ¡ ¡of ¡meebo ¡me ¡widget ¡code. ¡ ¡-‑-‑> ¡ ¡