Integrating Skype presence & click to call for fun and profit

Version 1

    Skype isn't necessarily the most enterprise friendly communications application, so it's integration capabilities are somewhat limited. However, like many startups we use Skype to communicate across our distributed offices. This is updated for Jive 6 from https://community.jivesoftware.com/docs/DOC-3596

    I recently integrated Skype presence and click to chat/call into our Jive environment, and thought I'd share a basic how to on how to approach this. This requires that you have Skype installed and running. For presence to work, the user also has to have the option "Allow my online status to be shown on the web" enabled. (In Tools\Options\Privacy)

     

    1. Add a profile field to hold the Skype name.

    This is a must. Sadly Skype does not allow lookups by other means, so the user has to fill in their Skype name in their profile. Make this a regular text field, and name it "skypename".

    2. Reference the Skype Javascript library. Best to put it into the   /template/decorator/default/footer-javascript.ftl template of your theme

    <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"> 
    
    
    
    

     

    3. Add the presence indicator.

    Now on some pages, such as the profile page you will be able to reference the field directly as a variable in the ftl as Vinh suggested in his post. However this does not work everywhere in Jive, and I also wanted to leverage this in a Jive app. So I took a slightly different route by using the v3 REST api.

    Here is an example on how to add the Skype presence indicator to the profile popup.

    Edit the /template/global/view-profile-short.ftl template in your theme. Add a div to hold the Skype status. I named it skypeStatus.

    I wanted to add the Skype status next to the users name, so I changed the H5 that displays the users full name like this:

    <h5><@jive.displayUserDisplayName user=targetUser/><div id="skypeStatus"></div></h5>
    
    
    

     

    This snippet is right at the top of the template.

     

    4. Add click to call functionality to the users phone number

    Find the display of the users phone number and change it as follows. You'll change the static html display into a skype:// link

     

            <#if targetUserProfile.primaryPhoneNumber?? && targetUserProfile.primaryPhoneNumber.phoneNumber?has_content>
                <tr>
                    <td><@s.text name='profile.tooltip.user.phone' /></td>
                    <td><a href="skype:${targetUserProfile.primaryPhoneNumber.phoneNumber?html}?call">${targetUserProfile.primaryPhoneNumber.phoneNumber?html}</a></td>
                </tr>
            </#if>
    
    
    

     

    This should work automatically if you have the Skype browser plugin installed, but I found the plugin to be pretty unreliable (not to mention ugly.)

     

    5. Enable the Skype integration

     

    We're now pulling the skype profile field and it's value via the v3 REST api using a jQuery Ajax call. Place this at the end of the template. If you actually, unlike me, know your way around Javascript you'll find a more elegant way of doing this.

     

    <script>
    $j(document).ready(domReady)
    function domReady() {  
       
    $j.ajax
      ({
        type: "GET",
        // the url where you want to sent the userName and password to
        url: '/api/core/v3/people/email/${targetUser.email?html}',
        dataType:'HTML',
    
        success: function (data, textStatus, jqXHR) {
       
    var cleanString = data.replace ("throw 'allowIllegalResourceCall is false.';","");
    var dataPerson = JSON.parse(cleanString);
    console.log (dataPerson.displayName);
    var profileArray = dataPerson.jive.profile;
    jQuery.each(profileArray , function(i, val) {
    //console.log(val.jive_label);
    
    
    if (val.jive_label == "skypename") {
              //console.log(val.value);
           
              $j('#skypeStatus').html('<a href="skype:'+val.value +'?chat"><img src="http://mystatus.skype.com/smallicon/'+encodeURI(val.value)+'" style="border: none;" width="16" height="16" alt="My status" /></a>');
         }
         });
        },
    error: function (one, two, three) {
          alert(three);
             }
           });  
        }
    
    </script>
    
    
    

     

    Voila. Skype integration with presence, click to chat and click to call within Jive. I am actually signed in as invisible in this example. The IM status below the email is coming from our Cisco Jabber integration.

    2013-02-04_1420.png