Userplane

Presence Bar

Jump to

Documentation → Presence Bar

Overview

Presence Bar is an integrated, in-window experience that allows you users to chat with each other. Because Presence Bar is in the window that means your users have access to it at all times, never needing to find a popup window to engage in a conversation. This implementation is often compared to Facebook’s implementation of chat and it is generally best suited to sites with a free flow of communication such as social network or casual dating sites.

Embed

These instructions to add Presence Bar to your site assume that you have first gone through the Getting Started process to ensure that your copy of the Userplane SDK is embeded and connected. If you have not accomplished this first please do so as it is the precursor to every experience Userplane offers.

Adding Presence Bar

<script>

  // Load Presence Bar once the SDK has fully loaded.
  up.api.addEventListener(up.api.events.READY,function () {
	up.api.require("PresenceBar",{});
  });

</script>

Properties

Property	Value	Default
customContainers	Embed custom containers into your Presencebar using this array property. See Custom Containers for more information
minimized	Determines whether the bar is minimized by default. If a user chooses to maximize it will stay maximized as their choice will override this embed.	false
minimizeLocation	The location of where Presencebar should minimize to. Options are “left” and “right”.
showOfflineUsers	Whether or not to show the users who are currently offline in the buddy list.

Example

<script>

  up.api.addEventListener(up.api.events.READY,function() {
       up.api.require("PresenceBar",{
          minimizeLocation:"left"
	});
  });

</script>

FAQ

How do I launch my own help from the help icon?

There is a way to launch a help page from the Webmessenger3 window. You will just need to create a javascript function to launch the page and pass the function into the Userplane embed code in the the html of your web page within the

Javascript

function helpClickHandler(){
window.open("http://www.example.com/help.html);
}

Here is an example of how to pass the function into the embed code:

<script type="text/javascript" src="http://cdn.userplane.com/release/sdk/userplane.js"></script>
<script>
       up.init({
      siteId:"YOUR_SITE_ID",
      key: "",
      token: "YOUR_SSO_TOKEN",
      settings: {
            helpClickHandler:helpClickHandler
      },
      lang: "en-us"
   });

</script>

How do I launch a profile page using the avatar and handle?

In order to launch a profile page using the avatar and handle you need to capture the AVATAR_CLICK and HANDLE_CLICK events.

I have an existing account. How can I upgrade to the new Webmessenger 3?

If you would like to upgrade to the new platform, please contact support@userplane.com.

How do I launch and Instant Message using just Javascript?

While we do highly suggest that you use the badge widget or the hover cards as your call to action for sending an instant message, we understand that our implementations may not meet your design or business requirements around launching an instant message. So in its place we recommend you use the following code to launch an Instant Message from the local logged in user to a target user. Do understand that this code is deferred until after your page load so if you attempt to execute the custom launcher code before the Userplane SDK has fully loaded and connected, nothing will happen.

Example

// Format Example
up.api.startInstantMessage('INSERT_USER_ID_HERE');

// Code Example
<a onClick="up.api.startInstantMessage('414267')" href="#OpenIM">Send IM</a>

How do I add advertisements in Webmessenger?

Adding your custom html to the Webmessenger requires that you add a custom footer to the popup window whereby you can load any html you wish to to the popup window. The Webmessenger will automatically adjust to the space your code takes up, so you shouldn't need to do anything beyond providing your html to your userplane embed code.

<script type="text/javascript" src="http://cdn.stage.userplane.com/release/sdk/userplane.js"></script>
<script>
   // Embed the Userplane SDK and provide the general configuration for your account.
   up.init({
      siteId:"YOUR_SITE_ID",
      token: "YOUR_SSO_TOKEN",
      lang: "en-us",
      settings: {
          popupWindowCustomHeader: "Some Custom Code Here",
	  popupWindowCustomFooter: "Some Custom Code Here"
      }
   });

</script>

Note that the code placed into these properties must either appear on one line or be properly formated as it may potentially cause issues with your javascript syntax if you simply copy an paste into it.

Inserting Advertisements

Given the above, adding your advertismeents is as simple as compressing you entire advertisement snippet into a single line and placing it into the popupWindowCustomerFooter property above.

Note For Adsense Customers

Due to the way adsense embed code works and in order to comply with the Terms of Service you must add the following snippet of CSS to your footer in order to get the ad to render in the right location

<style>ins { position: absolute !important; bottom: 5px !important; left: 5px; }</style>

How to launch a help page using help icon

Javascript

function helpClickHandler(){
window.open("http://www.example.com/help.html);
}

Here is an example of how to pass the function into the embed code:

<script type="text/javascript" src="http://cdn.userplane.com/release/sdk/userplane.js"></script>
<script>
       up.init({
      siteId:"YOUR_SITE_ID",
      key: "",
      token: "YOUR_SSO_TOKEN",
      settings: {
            helpClickHandler:helpClickHandler
      },
      lang: "en-us"
   });

</script>

How do I launch Webmessenger 3 from Webchat 2

There is a way to launch the Webmessenger 3 from within the Webchat 2. You will just need to add a javascript function to launch the Webmessenger 3 and the userplane embed code to the wc file.You will need to remove or comment out the launchWM javascript function in the 'InstantCommunicator.StartConversation' event in the wc file.

Then you will replace it with the following javascript function:

Javascript

up.api.startInstantMessage(strUserID);

Example

if( strEvent == "InstantCommunicator.StartConversation" )
         {
            var strUserID = strParameter1;
            var bServer = strParameter2;
            // open up an InstantCommunicator window.  For example:
            //launchWM( "", strUserID );
            up.api.startInstantMessage(strUserID);

         }

Finally, in the wc file you will add the following userplane embed code to the

Embed

<script type="text/javascript" src="http://cdn.userplane.com/release/sdk/userplane.js"></script>
<script type="text/javascript">
    up.init({
   siteId:"YOUR_SITE_ID",
   key: "",
   token: "YOUR_TOKEN",
   settings: {}, 
   lang: "en-US"
} );
</script>

You must set the siteID and session parameters with a values. The siteID should already be input in your embed code or we will provide you with one. The session parameter will be the same value as the sessionGUID you are currently using in the wc file.