Monday, October 29, 2012

SOIS Advisor Chat Code

Why Zoho?

We chose Zoho because it allows for multiple IM services to be integrated into a single web-based application where anyone can messange the account, and it wasn't bought by Google (like meebo.com). There is another alternative, Yahoo Ping Box, but it doesn't allow for other IM networks to be integrated in.

What other IM Networks? 

SOIS has advisor accounts setup on MSN, Yahoo, AIM, and Google Talk; allowing students to connect to SOIS from any device or service of choice. 

How do I setup an account with Zoho?

Simple, go to chat.zoho.com and register for a free account. For the basic chat code, you are going to want to setup a "Live Support" Box. Because the Zoho code uses an iframe it will not just work within the CommonSpot, but instead will have to be put into an HTML or CFM file and linked to the CMS via the Static HTML Element or the Custom Script element.

The Code: 

The School of Information Studies has implemented an advisor chat feature for many years now. Below is the code that we use for the popup window within the CommonSpot CMS, comments/notes are preceded by a #:

#formatted to be human readable, should all be on one line
<a
     href="
          javascript:HandleLink(
               # Auto generated ID by the CMS
               'cpe_3906026_0',
               'CPNEWWIN:SOIS_Advisor_Chat^
                    # position the window in the upper left corner of the window
                    top=10,
                    left=10,
                    # set the dimensions of the window
                    width=275,
                    height=450,
                    # disable the toolbar, location bar, status, URL, and scroll areas
                    toolbar=0,
                    location=0,
                   directories=0,
                   status=0,
                   menubar=0,
                   scrollbars=0,
                   # allow the window to be re-sizable
                   resizable=1
                   # set the URL for the script to call
                  @http://www4.uwm.edu/sois/assets/scripts/advischat_head.cfm
          ');"
      # set the window statuses to be equal to the location of the script
     onmouseout="return window.status=''; "
     onmouseover="return  window.status=
         'http://www4.uwm.edu/sois/assets/scripts/advischat_head.cfm';"
      #make it look nice
     class="newbutton button-smaller"
     # set the title (hover text) and regular text of the link
     title="Chat/IM a SOIS Advisor"> Advisor Chat
</a>

The styling of the Advisor chat button


a.button-smaller {
  1. border-radius: 4px 4px 4px 4px;
  2. font-size: .917em;
  3. padding: 1px 7px;
  4. margin: 5px 0 0;
}



a.newbutton {
  1. color: black;
  2. background-image: url("/sois/assets/images/buttons/white-background.png");
  3. background-position: left center;
  4. background-repeat: repeat-x;
  5. border: 2px solid #DAD8D8;
  6. border-radius: 7px 7px 7px 7px;
  7. cursor: pointer;
  8. display: inline-block;
  9. font-size: 1.083em;
  10. font-weight: bold;
  11. line-height: 18px;
  12. margin: 0;
  13. outline: medium none;
  14. padding: 5px 10px;
  15. text-decoration: none;
  16. word-wrap: normal;
}

The Code for the advischat_head.cfm file

<html>
<head>
<title>IM @uwmsois</title>
</head>
<body>
<br>
<div style="height:275px;width:260px">
<iframe style="overflow:hidden;width:100%;height:100%;" frameborder="0" border="0" src="http://chat.zoho.com/mychat.sas?u=fdbbc009b4689cb7a1cb3fda6bea6b6c&amp;chaturl=SOIS%20Advisor&amp;V=000000-70a9e1-eff4f9-70a9e1-SOIS%20Advisor%20Chat">
</iframe>
</div>
<p>
Hours of Opperation<br>
Monday to Friday: 8AM to 4PM CST
</p>
<p>
Look for us on these other networks:<br>
<a href="aim:goaim?screenname=soisadvise"><img src="/sois/assets/images/im/aim.png" alt="AIM Icon"></a>
<a href="gtalk:chat?jid=soisadvisor@gmail.com"><img src="/sois/assets/images/im/google.png" alt="Google Talk Icon"></a>
<a href="msnim:chat?contact=soisadvisor"><img src="/sois/assets/images/im/msn.png" alt="MSN Messanger Icon"></a>
<a href="ymsgr:sendim?soisadvisor"><img src="/sois/assets/images/im/yahoo.png" alt="Yahoo Messanger Icon"></a>
</p>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)