Displaying SharePoint user presence indicator in CSR
The following are code snippets which can be used to show a user’s Lync/Skype for Business presence status in SharePoint Client Side Rendering (CSR).
Default Render
<span>
<span class="ms-imnSpan">
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
<span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_1,type=sip"></img>
</span>
</a>
</span>
<span>
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
<img name="imnmark" title="" ShowOfflinePawn="1" class=" ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_2,type=sip"></img>
</a>
<span>User</span>
</span>
</span>With Picture Detail View
<div>
<div class="ms-tableRow">
<div>
<span class="ms-imnSpan">
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
<span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_661,type=sip"></img>
</span>
</a>
</span>
</div>
<div class="ms-tableCell ms-verticalAlignTop">
<div class="ms-peopleux-userImgDiv">
<span class="ms-imnSpan">
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_3452,type=sip"></img>
</a>
<span>
<img style="width:62px; height:62px; border:none" src="http://userimageurl" alt="User"></img>
</span>
</span>
</div>
</div>
<div class="ms-tableCell ms-peopleux-userdetails ms-noList">
<ul style="max-width:150px">
<li>
<div class="ms-noWrap">
<span>
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_34523,type=sip"></img>
</a>
<span>User</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>With Picture
<div>
<div>
<span>
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_1,type=sip"></img>
</a>
<span>
<img style="width:62px; height:62px; border:none" src="http://userimageurl" alt="User"></img>
</span>
</span>
</div>
<div class="ms-floatLeft ms-descriptiontext">
<span class="ms-verticalAlignTop ms-noWrap ms-displayInlineBlock">
<span class="ms-imnSpan">
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
<span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_2,type=sip"></img>
</span>
</a>
</span>
<span class="ms-noWrap ms-imnSpan">
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_3,type=sip"></img>
</a>
<span>User</span>
</span>
</span>
</div>
</div>Presence Only
<span class="ms-imnSpan">
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
<span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_1,type=sip"></img>
</span>
</a>
</span>Picture Only
<div>
<div>
<div class="ms-tableCell">
<span class="ms-imnSpan">
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
<span class="ms-spimn-presenceWrapper ms-spimn-imgSize-8x72">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-8x72x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_1,type=sip"></img>
</span>
</a>
</span>
</div>
<div class="ms-tableCell ms-verticalAlignTop">
<div class="ms-peopleux-userImgDiv">
<span class="ms-imnSpan">
<a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
<img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_2,type=sip"></img>
</a>
<span class="ms-peopleux-imgUserLink">
<span class="ms-peopleux-userImgWrapper" style="width:72px; height:72px">
<img style="min-width:72px; min-height:72px; clip:rect(0px, 72px, 72px, 0px); max-width:72px" src="http://userimageurl" alt="User"></img>
</span>
</span>
</span>
</div>
</div>
</div>
</div>Source: http://www.sharepointcolumn.com/lync-presence-indicators-code-snippets-in-sharepoint-2013/