Quick Start Guide (new)

This Quick Start Developer Guide provides the most basic steps required to add Wetpaint Injected content to your site. (estimate 10 min)

Note:

For a non-technical overview, visit the How it Works page on wetpaint.com
Complete sample applications for php, asp.net, and jsp are available in the Injection Toolkit (need to bundle tools into one .zip file)

Specifically, this Quick Start guide will walk you through the following steps:

Retrieve sample content from Wetpaint Injected
Display the sample content on your Webpage
Add the Wetpaint Injected client library
Enable your users to edit and save the content

Step 1: Retrieve Sample Content from the Wetpaint Injected Server [Add Diagram]

Your server side pages will need to retrieve content from the Wetpaint Injected server using a RESTful URL of the following format:

http://togo.wetpaint.com/CellService/getCellContent.do?key=developerkey&ns=namespace&cell.cellId=cellname

This URL retrieves thecontent from the Wetpaint Injected server, providing it the following values:

Developer Key - a unique key provided by Wetpaint when you are approved (e.g. "507ace0d168024cbcb53a9add0e6fe4e9796012e6b420cfafabac6a4357824ef")
Namespace - this is a unique name for your application, provided by Wetpaint when you are approved (e.g. "sandbox-trial")
Cell Name - this is the cell that your users may edit. (e.g., "sample")

These values are working examples that you may use for test purposes. Unique developer keys are assigned to Wetpaint Injected developers upon approval. Contact Wetpaint to request your developer key.

The following is an example of the URL with sample values provided.

http://togo.wetpaint.com/CellService/getCellContent.do?key=507ace0d168024cbcb53a9add0e6fe4e9796012e6b420cfafabac6a4357824ef&ns=sandbox-trial&cell.cellId=sample
(Click on the link to see theraw contentreturnedby Wetpaint to your server code)

You can try this example by clicking on the URL and viewing the results in your web browser. View the page source to see the raw HTML content that is returned from the Wetpaint Injected server. The content is contained within "<div>" tags to enable easy integration and formatting into your web page.

Step 2: Integrate Raw Content into Your Webpage

Place the content you retrieved from the Wetpaint Injected servers into your webpage where you want it to appear. For example you may output the content below the "<body>" tag as follows:

PHP:

<html>
<body>
<?php
$url = "http://togo.wetpaint.com/CellService/getCellContent.do?key=507ace0d168024cbcb53a9add0e6fe4e9796012e6b420cfafabac6a4357824ef&ns=sandbox-trial&cell.cellId=sample" ;
print http_get($url);
?>
...

ASP.NET:

<%@ Page Language="C#"%>
<%@ Imports Namespace="System.Net"%>
<html>
<body>
<%
Uri wpUrl = new Uri("http://togo.wetpaint.com/CellService/getCellContent.do?key=507ace0d168024cbcb53a9add0e6fe4e9796012e6b420cfafabac6a4357824ef&ns=sandbox-trial&cell.cellId=sample");
HttpWebRequest request = (HttpWebRequest)WebRequest.CreateDefault(wpUrl);
request.Method = "GET";
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
StreamReader reader = new StreamReader(response.GetResponseStream());
reader.ReadToEnd().toString();
%>
...

Java:

<html>
<body>
<%
coming soon
%>
...

The examples above return HTML from the Wetpaint Injected server and displays the raw content in your own webpage, providing SEO benefits for your website (see "before" image below). This :

Step 3: Add the Wetpaint Injected Client Library

The Wetpaint Injected client includes libraries of code that provide the tools that let your users edit the content as well as a stylesheet that provides formatting. To add the client to your webpage, include the following script tag in the Head section of your HTML:

<html>
<head>
<script src="http://togo.wetpaint.com/JavaScriptService/getBootstrap.do?key=<your developer key>" type="text/javascript"></script>
</head>
<body>
...

After adding the script code, your webpage now includes Wetpaint Injected client controls instead of text (e.g. the EasyEdit button and the "What's this?" link):


Before	After

Step 4: Enable the EasyEdit & Login Buttons

3a. To enable users to view the sample content, you do not need to do anything. To enable your users to edit the sample content, you need to enable the Wetpaint Injected EasyEdit button and require your users to login.

If your user is not logged in, the Wetpaint Client will provide a login button that can be integrated with your login page. To enable the login button, you will need to add the following authentication script to the Head section of your HTML:

<html>
<head>
<script src="http://togo.wetpaint.com/JavaScriptService/getBootstrap.do?key=<your developer key>" type="text/javascript"></script>
<script type="text/javascript">

if( window.WPCAPI ) {
WPCAPI.setDeveloperKey("507ace0d168024cbcb53a9add0e6fe4e9796012e6b420cfafabac6a4357824ef");
WPCAPI.setNamespace("sandbox-trial");
WPCAPI.processLogin = function() { location.href = "/path/to/login/page.htm"; }
}

</script>
</head>
<body>
...

This authentication script sets the following Wetpaint Client properties:

a Developer Key (e.g. "507ace0d168024cbcb53a9add0e6fe4e9796012e6b420cfafabac6a4357824ef")
a Namespace (e.g. "sandbox-trial")

This is the same developer key and name space as were used in Step 1.

At this point, after the user clicks the EasyEdit button, they will be prompted to log in. When they click the Login button, the user will be redirected to the login page with the URL of your choice. Once the user logs in, your server needs to use the Wetpaint Injected API to obtain a Login Ticket on the user's behalf. Once the Login Ticket is obtained, use the WPCAPI.setLoginTicket method to pass the ticket to the Wetpaint Injected client. The the following script includes the addition of the WPCAPI.setLoginTicket method in the Head of your HTML

<html> <head> <script src="http://togo.wetpaint.com/JavaScriptService/getBootstrap.do?key=<your developer key>" type="text/javascript"></script> <script type="text/javascript">

if( window.WPCAPI ) {
WPCAPI.setDeveloperKey("507ace0d168024cbcb53a9add0e6fe4e9796012e6b420cfafabac6a4357824ef");
WPCAPI.setNamespace("sandbox-trial");
WPCAPI.processLogin = function() { location.href = "/path/to/login/page"; }
WPCAPI.setLoginTicket("your-login-ticket"); // only required if user is logged in
}

</script>
</head>
<body>
...

[[Summary, example of features, link to complete guide]]

Quick Start Guide (new)

Step 1: Retrieve Sample Content from the Wetpaint Injected Server [Add Diagram]

Step 2: Integrate Raw Content into Your Webpage

Step 3: Add the Wetpaint Injected Client Library

Step 4: Enable the EasyEdit & Login Buttons

Further Reading

Injection Toolkit

Detailed Documentation

Threads for this page

boe_wetpaint	Latest page update: made by boe_wetpaint , Sep 2 2008, 5:52 PM EDT (about this update About This Update Modified with new getBootstrap dev key get param - boe_wetpaint 15 words added 3 words deleted view changes - complete history)
	Keyword tags: None More Info: links to this page