The information in this article is no longer accurate. Serving ads in the Webmessenger is now accomplished using a different means.

Documentation is available to add ads to webmessenger under the FAQ section.

One of the perks of selecting a paid package with Userplane is the ability to generate revenue by serving your own ads within the Userplane applications. Currently, you can do this in Webmessenger3 by utilizing what we call the Decorator. While we plan on adding a simplified way of serving your own ads, here is a guide of how to do it using the Decorator.

Modify the Embed Code

The first step involves updating the Userplane Embed Code. The following parameters need to be added into the settings parameter of the Embed Code:

  • wmWindowDecoratorURI: “PATH_TO_YOUR_AD_CODE_HTML_FILE”
  • wmWindowDecoratorContainerId: “up-decorator-container”

Once added, the Embed Code should look like this:

<script type="text/javascript" src="http://cdn.userplane.com/release/sdk/userplane.js"></script>
<script>
	up.init({ 
		siteId:"YOUR_SITE_ID", 
		key: "",
		session: "YOUR_SESSION_IDENTIFIER",
		settings: { wmWindowDecoratorURI: "PATH_TO_YOUR_AD_CODE_HTML_FILE", wmWindowDecoratorContainerId: "up-decorator-container" },
		lang: "en-us"
	});
</script>

Create an HTML File for Ad Code

The second step requires the creation of an HTML file that will contain both the Webmessenger interface, as well as your ad code. This is the HTML file referenced in the Settings parameter of the Embed Code (wmWindowDecoratorURI: “PATH_TO_YOUR_AD_CODE_HTML_FILE”). Please note the following items in the code below:

  • Webmessenger3 will render inside of the <div> with the id “up-decorator-container”.
  • Your ad code should be placed inside of the <div> with the id “your-ad-code-div”.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Webmessenger Decorator Window</title>
<script src="http://cdn.userplane.com/release/sdk/userplane.decorator.js" type="text/javascript"></script>
</head>
<body>
<div id="up-decorator-container">
	<!-- This is where Userplane Webmessenger gets rendered.
	     REMOVE THIS COMMENT -->
</div>
<div id="your-ad-code-div">
	<!-- This is where your ad code should be implemented.
	     REMOVE THIS COMMENT -->
</div>
</body>
</html>

For general information regarding Userplane SDK decorator implementation, visit our SDKDecorator Page.