The Userplane SDK enables you to add engaging white-label social features to your site. Using the components of the Userplane SDK you can add chat, instant messaging, real-time notifications and more to drive engagement in your online community.
Our single-sign-on approach allows these components and plugins to run seamlessly, directly against your user base. This puts the power of engagement in your hands, and preserves both brand identity and continuity of your user experience.
This overview section will walk you through the basics of integrating Userplane and leveraging the SDK’s components and features within your site. For more advanced customization, feel free to use the menu at left to find the proper documentation.
The examples on these pages will include HTML/JavaScript/CSS for client-side code and PHP for server-side code. These examples are meant to be straightforward and are easily transferred to other programming languages as needed.
The Embed Code is the first step in integrating Userplane into your site. Implement this code on every page of your site where you want Userplane features to be made available to your users.
<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",
// Docs: Simple-SSO · Token Examples
settings: {},
lang: "en-us"
});
</script>
It is imperative to generate a token for each user when they log in to your, as it identifies the particular user you are asking Userplane to connect. Generating a token is simply the process of concatenating all of the information about your users that you wish to provision in a URL-encoded string along with a security mechanism.
Click here for detailed instructions on how to generate your token. We also have some examples available.
For advanced and/or enterprise integrations, please contact support.
Embeding Userplane will default to enabling Webmessenger site-wide. If this is the experience you wish to use you can simply skip to the next step and ignore the information in this step.
Enabling Presencebar is as simple as adding “presenceBarEnabled” to your settings to your embed discussed above:
<script type="text/javascript" src="http://cdn.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",
key: "",
token: "YOUR_SSO_TOKEN",
// Docs: Simple-SSO · Token Examples
lang: "en-us"
});
// Add an onReady handler to launch the Presence Bar experience once the Userplane SDK is available.
onReady = function () {
up.api.require("PresenceBar",{});
}
up.api.addEventListener(up.api.events.READY,onReady);
</script>
The next step is allowing your users to start new conversations with each other. To make it easier to manage the scenarios around starting a new instant message we have built the Badge widget, which will give your users a visual indication of whether or not the destination user is online and available. If the destination user is online, the badge widget also allows the user to click the badge to launch an IM.
<script type="text/javascript">
up.render( "badge", {userid:"INSERT_USER_ID",displayName:"DISPLAY_NAME_OF_USER"} );
</script>
If you are interested in launching instant messages with JavaScript for more advanced needs see the Instant Message API (coming soon).
At this point you have successfully created your own chat network within your site and provided your users a way to talk to each other. But what if you already have the concept of friends in your site? Naturally, you want that data to automatically show up inside your users’ experience. Click to read more about the Buddy List API.
So you synchronized your buddy list, but what about the list of people that your users have explicitly said they don’t want to talk to? Click to read more about the Block List API.
Give it a whirl! And if you run into any issues don’t hesitate to contact support.
If you need some help debugging the SDK connection, you can review our Debug Tools. We are working on expanding our debug tools that are currently available.