Wetpaint To Go – Interaction Definition
More Social.  More Traffic. More Revenue.
 
© 2008 Wetpaint.com , Inc.
  May 18, 2008 

Interaction Documentation

Wetpaint, Inc.   Confidential  1 

 
1. USER EXPERIENCE OVERVIEW .................................................................................................... 5

2. CUSTOMIZED LOOK AND FEEL .................................................................................................... 9

3. EMBEDDED CONTENT ON A SITE ............................................................................................... 11

3.1 DISPLAYING USER-GENERATED CONTENT ........................................................................................ 11

3.2 CONTENT AREA ATTRIBUTES ............................................................................................................. 12
3.3 MULTIPLE EDITABLE AREAS ON A PAGE ........................................................................................... 13
3.4 AUTHENTICATION REQUIREMENTS.................................................................................................... 14

4. WYSIWYG CONTENT EDITING .................................................................................................... 16

4.1. BASIC EDITING .................................................................................................................................... 16

4.2. TABLE FORMATTING .......................................................................................................................... 20

4.3 PAGE LINKING ................................................................................................................................. 24

4.4 SPELLCHECK ........................................................................................................................................ 27

4.5 ADDING IMAGES................................................................................................................................... 28
4.6 ADDING WIDGETS ................................................................................................................................ 33

5. KEYWORD TAGS .............................................................................................................................. 45

6. MODERATION TOOLS .................................................................................................................... 48

6.1 LOCKING/UNLOCKING CONTENT AREAS .......................................................................................... 49

6.2 RENAME TITLE .................................................................................................................................... 51
6.3 DELETE CONTENT ............................................................................................................................... 53
6.4 RESTORE CONTENT ............................................................................................................................. 55

7. REVISION HISTORY ........................................................................................................................ 57

7.1 VIEWING REVISION HISTORY ............................................................................................................. 57

7.2 DELETE/REVERT VERSION ................................................................................................................. 59

Wetpaint, Inc.   Confidential  2 

 
8. REPORTING ....................................................................................................................................... 63

8.1 RECENTLY UPDATED CONTENT AREAS ............................................................................................. 63

8.2 DELETED CONTENT ............................................................................................................................. 65
8.3 QUESTIONABLE LANGUAGE REPORT ................................................................................................. 66
8.4 CONTENT CARD ................................................................................................................................... 67

9. NEW PAGES ........................................................................................................................................ 69

PARTNER CREATED PAGES VS. USER GENERATED PAGES..................................................................... 69

9.1 ADD NEW PAGES ................................................................................................................................... 69
9.2 NAVIGATION......................................................................................................................................... 73

VERSION HISTORY ............................................................................................................................... 75

APPENDIX ................................................................................................................................................ 77

Wetpaint, Inc.   Confidential  3 

 
Overview
Document Overview
This document is designed to be used as a reference for Product Managers, Designers, and User 
Experience Practitioners who are interested in integrating the Wetpaint To Go product offering.  It 
describes the overall user experience, the interaction standards and paradigms, as well as the specific 
features that enable generation of user‐generated content on your site.   

Each feature chapter includes the following sections, as appropriate: 

• Overview — a high‐level description of the feature and its purpose. 
 
• Example — sample wireframe user interface (UI) with a baseline description. 
 
• Permissions — a list of the role requirements to access and use the features. 
 
• Interaction  Flow  —  the  sequence  of  actions,  including  variations  thereof,  that  a  user  can 
perform when interacting with the system. 
 
• User  Interface  (UI)  Elements  (Dialogs,  Menus,  Tooltips,  and  Lightboxes)  —  the  varying 
components and dialogs provided with the code to support the features. 
 
• Customizable  Elements  —  which  elements  inherit  your  look  and  feel  and  which  are 
customizable via overrides. 
 

This document is not intended to act as an implementers’ guide for software development.  It does not 
cover all of the technical details or architectural diagrams.  

For the purposes of this document there are no technical differences between content area(s) that 
coexist with static content on your published pages and content area(s) that exist on user created pages 
via a shell page.   

The document includes an Appendix listing other material to reference in conjunction with the 
information contained herein.  

Wetpaint, Inc.   Confidential  4 

 
1. User Experience Overview
Wetpaint To Go allows you to embed user‐generated content directly within your site pages. Wetpaint’s 
user‐friendly and well tested toolset uses a simple set of interfaces to allow users to add content with 
minimal instruction and interruption.  The application design and paradigms leverage common 
interaction standards, making for an intuitive and natural end‐user content creation experience.    Each 
tool and corresponding help topic is intended to be at the user’s fingertips to facilitate easy content 
building and utilization.   

Additionally, these elements can be plugged into your site with minimal effort.  Following is a brief 
overview of the various user interface elements of Wetpaint To Go.   

 
 

Wetpaint, Inc.   Confidential  5 

 
Embeddable Content:
Wetpaint To Go enables the creation of user‐powered content embedded contextually within your site.  
This content is served inline on the pages of your choosing for maximum SEO value.  All SEO and page 
rank credit are yours.  Additionally, the embedded content inherits your site’s look and feel, making for 
a consistent user experience.  The site and location of the embedded content is determined by you.   For 
more details on Embedded Content see section 3.0. 

Tools:
Associated with every embeddable content area are the tools necessary to allow access to the edit 
dialogs and moderator tools. These tools are situated directly above each content area.  

Dialogs:
Dialogs are used for nearly all primary functions to manipulate content, including Wetpaint’s WYSIWYG 
toolbar, keyword tag editing, the confirmation of actions like deleting content, and more. Dialogs are 
modal in nature and must be acted upon or closed in order for the user to return to the parent screen. A 
dialog can invoke other dialogs which can be progressively closed.  For example, the WYSIWYG dialog 
can instantiate the “add image” dialog.  To focus user actions and delineate editable areas, all non‐
editable areas are ghosted back in the background to make sure the user is aware of the context and 
primary actions required. 

Wetpaint, Inc.   Confidential  6 

 
Lightboxes:
Similar in behavior to dialogs, lightboxes are reserved for larger display needs, as they take up the 
majority of the screen. Leveraged selectively, lightboxes are used for presenting un‐editable content like 
reports and content area history. As with dialogs, the primary lightbox must be closed in order to return 
to the previous actionable screen.  

Menus:
Menus are presented when there are multiple actions a user may take. For example, in edit mode, if a 
user clicks into a table cell they are presented with a menu containing multiple options for manipulating 
the table.    Menus are drawn on the page to appear contextually close to the cursor insertion point, but 
far enough away to not interfere with the completion of any desired action.  

Help:
Contextual help is provided throughout the system via tooltips. Users can click on a link to access a help 
dialog populated with the relevant information needed to perform the task at hand. 
 

Wetpaint, Inc.   Confidential  7 

 
  

Wetpaint, Inc.   Confidential  8 

 
2. Customized Look and Feel
Select elements of the Wetpaint To Go user interface (UI) elements (including dialogs, lightboxes, 
menus, and tooltips) are customizable through CSS overrides that you can pass via JavaScript.  These 
customizable elements are fairly standardized across all Wetpaint To Go UI elements.  This section 
documents the global customization parameters.  If there are aspects of a certain dialog or lightbox that 
are uniquely customizable they are addressed in their respective sections.   

CSS elements that can be customized via an override include the following: 

• Title bar 
o Background colors and dialog piping (i.e. the border color around the entire 
dialog) 
o Font color 
o Font type/face 
o Font size (within a range of 10 – 30 pixels)  
 
• Instructional text and label text 
o Font color 
o Font type/face 
o Font size (within a range 10 – 30 pixels)  
 
• Buttons 
o Font color 
o Font type/face 
o Font size (within a range of 10 – 30 pixels) 
o Background color 
o Border color 
o All button customizations are set globally. Additionally, special customizations 
may be added to “OK” and “Cancel” buttons 
 
• Links 
o Link 
o Visited link 
o Active link 
o Hover 

Below is an example dialog indicating customizable elements: 

Wetpaint, Inc.   Confidential  9 

 
  

Wetpaint, Inc.   Confidential  10 

 
3. Embedded Content on a Site
3.1 Displaying User-generated Content
The placement of user‐generated content areas is determined by you.   

Example
The following figure depicts a generic site with a content area on the webpage. The only indication that 
this is user‐generated content is the appearance of the editing tools at the top of the area and the 
attributes below the content area.  

Permissions
Any user (even anonymous users) can read this information.   

Wetpaint, Inc.   Confidential  11 

 
Inherited Elements
User‐generated content need not receive CSS overrides to mirror your site’s look and feel, as the default 
display will be inherited from your site’s own CSS.   Some examples of this include: 

• Background color 
 
• Font color 
 
• Font face (browser‐safe recommended) 
 
• Font size 
 
• Link colors (active link, visited links) 

3.2 Content Area Attributes

Area attributes are included with each user‐generated content area and include a listing of the keyword 
tags associated with the content area, link to user if available, link to content tools, access to the 
content area history and link to subpages if there are any.  If the entire area attributes are not desired 
other, more succinct, attributes options are available. For more details see the API documentation. 

Permissions:
Any user (even anonymous users) can read this information.  For more details on revision history, see 
section 7.0. 

Example

Username Link:
The username link is an optional element which requires the URL of a user profile page hosted by your 
site. For more information, see the Technical Specifications document. 

Link to Subpages:
The subpages only displays if the page has subpages and this feature has been included. See section 9.2 
Navigation for more information. 

Wetpaint, Inc.   Confidential  12 

 
Inherited Elements:
As with the user‐generated content area, the content area attributes also inherit the CSS from the 
parent page.   

3.3 Multiple Editable Areas on a Page

Overview
You have the option to instantiate multiple Wetpaint To Go content areas on a discrete page within your 
site.  

Each content area will function independently and include its own set of attributes and revision history. 
A user can edit each area by clicking on the EasyEdit button associated with the respective content area.  
A user may not jump from area to area while in edit mode — they must completely close out of one 
content area’s edit mode to engage the EasyEdit tools for another neighboring content area. 

All requirements specified in 3.1 regarding the display of user‐generated content are the same for the 
display of content in multiple areas. 

Example
The following figure shows two editable content areas side‐by‐side on a page.  The decision to include 
multiple content areas and their relative layout is entirely up to your design.   

Wetpaint, Inc.   Confidential  13 

 
  

3.4 Authentication Requirements

Users must be authenticated in order to edit the WTG content; this includes editing content, tags, 
moderation tools and “add page” functionality.  If a user is not recognized after they click on a function 
they receive a customizable error message encouraging them to login or create an account to interact 
with the site.  

Wetpaint, Inc.   Confidential  14 

 
Interaction

User Experience Modules

The following dialog is utilized when a user is attempting to access a feature they do not have 
permission to use. 

Logged In Dialog:   The text in the dialog can be overridden by content of your choosing and should 
include a link to your login/sign up page so they can access the Wetpaint to Go Functionality. 

All the functional descriptions in the following sections assume that the user has been authenticated 
and can access the functionality. 

Wetpaint, Inc.   Confidential  15 

 
4. WYSIWYG Content Editing
The following section covers the complete WYSIWYG editing experience including: text editing and 
formatting; embedding images, rich media, and widgets; linking; tables; integrated spell check, etc. 

Permissions
A user must be authenticated in order to edit content areas using all WYSIWYG‐related features and 
tools. All page edits by individual users are thereby tracked.  

4.1. Basic Editing

This section covers core editing functionality, including:  multiple fonts, font sizes, font colors, 
alignment, and bulleted and numbered lists. 

Example
The following figure depicts a generic editable content area. 

 
Figure 4.1.1‐ Represents a nearly empty editable content area on a generic webpage. 

Wetpaint, Inc.   Confidential  16 

 
  
Figure 4.1.2‐ In the figure above, the user has engaged the editing toolset by clicking on the EasyEdit 
button. While in edit mode all non‐editable areas are ghosted.  The floating WYSIWYG toolbar follows 
the user as he/she scrolls down the page, keeping the tools easily accessible.  Additionally, the toolbar 
can be click‐dragged and anchored by the user to the desired location on the screen.  The toolbar will 
remain in this position until the editing session is complete.   

Wetpaint, Inc.   Confidential  17 

 
  

Figure 4.1.3‐ Once saved, the page is displayed with the content the user entered while in edit mode. 

Interaction Flows

Wetpaint, Inc.   Confidential  18 

 
  

WYSIWYG Dialogs
The following dialogs are utilized during the editing process. 

EasyEdit Toolbar:  The Wetpaint To Go EasyEdit Toolbar is intended to mirror the basic functions and 
iconography of most document‐editing tools; most features have familiar corresponding quick‐key 
functions associated with them — e.g. CTRL+S for saving.   

Edit Note:  The Edit Note is an optional notation that can be made for each edit a user commits to the 
content area.  It is stored in the history for each version and provides a handy record of each successive 
change.   

 
Reformatted Content:  If a user copies and pastes content from an unsupported format (i.e. Word) or 
website the system will recognize that it doesn’t recognize the format and reformat it to match the site. 
At that point, it will launch this dialog to notify the user that their content has been reformatted.   

Wetpaint, Inc.   Confidential  19 

 
  

4.2. Table Formatting

Users are able to insert tables into their WYSIWYG pages to better structure data or create page layouts.  
The following table attributes can be defined: table alignment/text wrapping, borders, cell colors, 
row/column insertion/deletion, column sizing, cell selection, cell merging, and indent/outdent. 

Interaction Flows

Wetpaint, Inc.   Confidential  20 

 
  

Table Dialogs
The following dialogs are utilized in the table editing process. 

Add Table Dialog:  During table creation this dialog allows users to determine the number of rows and 
columns and define other basic table appearance properties. 

 
Edit Table Dialog:  After a table has been created, several formatting attributes can be edited. Other 
table editing capabilities are triggered by a right‐click menu.   

Wetpaint, Inc.   Confidential  21 

 
 : 
Edit Table Cell Dialog:  Table cell borders and background colors can be modified.  The Edit Table Cell 
dialog is accessed via the “edit table cell” link from within the Table Controls identified.   

Table Menus
Table Menu: The following menu is used to edit tables and is accessible by clicking in a table while in 
EasyEdit mode: 

Wetpaint, Inc.   Confidential  22 

 
Right‐click Table Menu: The following menu is available when the user right‐clicks in a table while in 
EasyEdit mode. This menu allows a user to manipulate the table attributes quickly. 

 
If a user selects two cells and right‐clicks in a table while in EasyEdit mode – the following menu displays 
with the addition of Merge Cells as an option. 

Wetpaint, Inc.   Confidential  23 

 
4.3 Page Linking
Users are able to apply hyperlinks to text and images within a content area. The auto‐suggest feature 
will list user‐generated pages that can be linked to based on the first three letters typed. 

Example:

Figure 4.3.1‐ In the above example, a user is added a link to the content area. They have selected a word 
and began typing in “epis”, the system recognizes that these letters match episode and displays the link 
suggestions in a tooltip from which the user can select from. In this particular example there are 
multiple pages with the same name so the user has access to the content card (via the information icon) 
to see more information on the content. See section 8.0 Reports for more information on the content 
card. 

Wetpaint, Inc.   Confidential  24 

 
Interaction Flow

Dialogs
The following dialog is used in the “Add Link” process and is accessible via the EasyEdit Toolbar, edit 
image menu, and edit image dialog. 

Add Link Dialog: Available if a user has first highlighted/selected content (text or image) then clicked the 
“Link” option on the EasyEdit Toolbar. 

Wetpaint, Inc.   Confidential  25 

 
Add Link Dialog (No Item Selected): The following dialog is available if a user selects the “Link” option 
on the EasyEdit Toolbar but has not highlighted or selected any content. 

Edit Link Dialog: Users can easily change or remove a link while in edit mode by placing their cursor on a 
piece of linked content and selecting the “Edit Link” tool to retrieve the dialog below. 

Menus
Edit Link Menu – Available when a user clicks on hyperlinked text while in edit mode. 

Link Suggestions: This menu display when a user types an address in the “link field” after 3 characters 
have been entered. The information icon links to show the content card with more information on the 
content. See section 8.0 Reports fore more information on the content card. 

 
 

Wetpaint, Inc.   Confidential  26 

 
4.4 Spellcheck
The Spellcheck feature of the EasyEdit Toolbar enables users to spell‐check their content additions. 
Misspelled words are highlighted in yellow, and users can then individually correct them by clicking on 
the highlighted word and then selecting the correct word from the resulting menu of spelling options.  

Example
In the following figure, the user is in edit mode and has elected to spell‐check the content area. The 
misspelled words are highlighted in yellow.  

Menu
The following menu, accessible via the EasyEdit Toolbar, is used to engage the spellcheck feature. 

Spell Check Control: 

Wetpaint, Inc.   Confidential  27 

 
  
 

4.5 Adding Images

Users are able to add images via a variety of methods (upload, web‐based, and web image 
search/insertion). Similarly, there are multiple methods to manipulate images once they have been 
committed to the content area, including authoring an alt‐text caption, adding image links, and defining 
alignment, text‐wrapping, and sizing. 

Example
The following figure shows a content area without images and a user preparing to add an image to the 
content area. 

Wetpaint, Inc.   Confidential  28 

 
Figure 4.5.1 – User is in the process of adding an image   

 
Figure 4.5.2 – Image has been added to the content area, the user is still in the edit mode and able to 
manipulate the image. 

Wetpaint, Inc.   Confidential  29 

 
  
Figure 4.5.3 – The content area has been saved and the image is displayed on the page.  

Interaction Flows

Wetpaint, Inc.   Confidential  30 

 
  

Dialogs
The following dialogs are used during the add image process, which is initiated via the EasyEdit Toolbar. 

Add Image Dialog: Users can browse to an image file on their computer hard drive to add an image, add 
one by pasting in an image URL, or select and upload an image via a search of Yahoo’s image repository.   

 
 

Wetpaint, Inc.   Confidential  31 

 
 
Add Image Dialog (Search Yahoo Images): From the text field users can search millions of images by 
keyword. 

 
 
Add Image Dialog (Search Yahoo Images): Yahoo returns a short list of the top related image results 
found, as well as a count of the total number of available images.  

 
 

Wetpaint, Inc.   Confidential  32 

 
Edit Image Dialog:  After an image has been added to the content area, the Edit Image dialog appears.  
From this dialog users can align an image relative to other content, resize, add a descriptive alt‐tag, or 
apply a link.  

Menu
The following menu is used to edit an image. 

Image Controls Menu: Accessible by clicking on an image while in EasyEdit mode: 

 
 

4.6 Adding Widgets

Users can add widgets to editable content areas with multiple methods, including via URL, embed code, 
and web video search/insertion.  Multiple methods to manipulate widgets once they have been 
embedded within a content area include defining alignment, text‐wrapping, and resizing with a live 
preview. 

The following widgets are supported by the Wetpaint To Go system: 

• YouTube Video — Users can embed favorite videos from YouTube — this includes 
functionality to allow keyword searches on YouTube’s directory within the “add video” 
dialog. 
 
• Google Video — Similarly, users can embed favorite videos from Google Video. 

Wetpaint, Inc.   Confidential  33 

 
 • Vizu Polls — Users can create custom polls with Vizu and place them within the editable 
content area. Poll results are displayed as users vote. 
 
• RSS Feeds — Users can embed RSS feeds from any site.  
 
• Google Calendar — Users can embed a personal Google calendar.  
 
• Photobucket Slideshow — Users can create and embed a slideshow via Photobucket. 
 
• Imeem — Songs or playlists from the Imeem network can be added via the Imeem audio 
widget.  
 
• ZeeMaps Map — Collaborative ZeeMaps maps can be dropped into editable content areas. 
 
• Meebo Messaging — The MeeboMe chat widget allows users to chat with each other. 
 
• Gabbly Chat — A Gabbly chat window allows real‐time discussion from within the context of 
the content area. 
 
• Other Widgets — Wetpaint supports many other web‐based widgets with embed or Iframe 
output code.  

Example
The following figures illustrate a user adding a Vizu poll to a content page. 

Wetpaint, Inc.   Confidential  34 

 
  
Figure 4.6.1 – The user selects the Vizu Poll widget from the widget gallery. 

Wetpaint, Inc.   Confidential  35 

 
  
Figure 4.6.2 – The user enters the code for the custom poll widget. 

Wetpaint, Inc.   Confidential  36 

 
  
Figure 4.6.3 – Once saved the page renders the widget contents.  

Interaction Flows
The following interaction flows follow the user through the process of adding a widget to the editable 
content area. The process is the same for adding all widgets to the content area with the exception of 
the video search capability unique to the YouTube widget. 

Wetpaint, Inc.   Confidential  37 

 
  

Dialogs
The following dialogs frame the “Add Widget” process, which is accessed via the Widget icon on the 
EasyEdit Toolbar. 

Add Widgets Gallery Dialog: Users can view the available widgets and select the one they would like to 
add.   

Wetpaint, Inc.   Confidential  38 

 
Add YouTube Video (Search YouTube Tab): Video search results display, only available for the YouTube 
widget. 

Wetpaint, Inc.   Confidential  39 

 
Add Widget Dialog:  All other widgets use a similar dialog allowing the user to add the URL or embed 
code of their selected widget. 

Edit Widget Dialog:  After a widget has been added to the area, the corresponding edit dialog appears.  
From this dialog users can align the widget, resize it, and define text‐wrapping. This same dialog is 
engaged if a user wishes to remove a widget from a content area although selecting a widget and hitting 
delete works as well. 

Menu
The following menu is used to edit a widget. 

Widget Controls Menu: Accessible via a click on a widget while in edit mode. Depending on the type of 
widget added, the control will display the appropriate menu election. 

     
 

Wetpaint, Inc.   Confidential  40 

 
4.7 Save Conflicts & Merge
On the rare occasion that two people edit the same version of a page a warning message is issued.  

Examples

Figure4.7.1– While user “A” was in the “edit mode”; user “B” edited the same page and saved the 
content. On save, user “A”  is prompted with a message that informs them of two versions of content 
and is allowed to choose between merging the two version, overriding the previously saved version or 
to not save their changes at all. 

Wetpaint, Inc.   Confidential  41 

 
  

Figure4.7.2– The user selected to merge the changes so both versions on the page appear with their 
version displayed on the bottom which allows the user to copy any content changes they made to the 
correct version. The only version saved is the version displayed above the line so a user must manually 
copy any changes into the editable version. 

Wetpaint, Inc.   Confidential  42 

 
Interaction Flow

User Experience Modules

The following modules are utilized during the save conflict and merge process. 

Save Conflict Dialog:  If another user has edited the content area while this user has edited, they are 
presented this dialog on save.   

Wetpaint, Inc.   Confidential  43 

 
  

Merge Changes Dialog:  If the user selects to merge their changes manually they are presented this 
dialog with instructions before merging.  

Wetpaint, Inc.   Confidential  44 

 
5. Keyword Tags
Users who can edit content areas can also add/remove keyword tags to/from each area. Keyword tags 
aid content discovery and increase search and SEO benefits of the user‐generated content. 

Example
The following figure illustrates the full content area attributes module (for other options see the API 
documentation), which displays beneath each content area. All keyword tags associated with the 
content area are displayed in this module. 

Users can access the tag editing feature in three places: by clicking the “Edit tags” link within the module 
itself, by clicking “edit tags” in the moderation tools menu (see 6.0 Moderation Tools), or via a similar 
link to the right of the EasyEdit button above the content area, as seen below. 

Users can access the keyword tag report lightbox by clicking on the keyword tag in the attributes 
module. 

Permissions
• Users must be a registered/authenticated user to add and edit keyword tags. 
• Anonymous users can click on keyword tags and view the keyword report. 

Interaction Flow

Wetpaint, Inc.   Confidential  45 

 
User Experience Modules
The following modules are utilized for keyword tags. 

Edit Keyword Tags Dialog: Users enter keyword tags by typing in the open field and clicking the Add Tag 
button.  A tag can be removed by selecting it in the Current Tags list and then clicking the Remove Tag 
button. 

 
Keyword Tag Report Lightbox: The following lightbox displays when a user clicks on a keyword tag in 
the attributes module. Clicking on a content title closes the report and links the user to the appropriate 
destination. 

Wetpaint, Inc.   Confidential  46 

 
  

Wetpaint, Inc.   Confidential  47 

 
6. Moderation Tools
All of the moderator tools for managing content areas and user generated pages are available in content 
area attributes box below each content area. 

Clicking on the “Content Tools” link opens the moderation menu as seen here: 

The number of items displayed is based on the role of the user. 

Permissions
Registered users have access to the following options and only those will be displayed: 

• Edit Content 
• Edit Tags 
• Rename title 
 

Wetpaint, Inc.   Confidential  48 

 
Moderators have access to more options and the entire list will be displayed onclick: 

• Edit content 
• Edit Tags 
• Rename title 
• Lock/Unlock content 
• Delete/Restore content 

6.1 Locking/Unlocking Content Areas

Moderators are able to lock a content area from editing by registered users if they wish to protect the 
contents. Only users with sufficient permissions (moderator or above) would be able to edit locked 
content areas.  

Example
Locked content areas are indicated by a padlock icon on the EasyEdit button.   

     

Permissions 

All registered users can see the locked indicator.  The EasyEdit button, when clicked, will also issue a 
notification tooltip explaining that the content area has been locked to prevent editing (shown above).  
A user must be a moderator or up to have access to lock or unlock a content area, but need not unlock 
the area to edit it.  

Wetpaint, Inc.   Confidential  49 

 
Interaction Flow

Dialogs
The following dialogs are utilized in the content area locking process. 

Lock Content Area Note Dialog: Moderators and administrators are asked to note the reason why the 
area is being locked.  This notation, along with the lock event, is stored in the revision history.   

Unlock Content Area Note Dialog: Similarly, they are also asked why an area is being unlocked.   

Wetpaint, Inc.   Confidential  50 

 
  
 

6.2 Rename Title

This section covers the process to rename the display name of any content area including those on 
partner published pages or user created pages.   

Example

Figure 6.2.1 in this figure the user has clicked on the content tools link. 

Wetpaint, Inc.   Confidential  51 

 
  

Figure 6.2.2 the user enters a new name and a reason for renaming it. The reason for renaming is stored 
in the revision history. 

Figure 6.2.3 the display name (title) is renamed and the new name is displayed in the title area and in 
the navigation.  It is recommended that the page title (AKA display name) be displayed as an H1 on the 
page for SEO purposes.  For more information see the technical document on page creation.  The history 
has been updated to indicate that the page was renamed and on what date. See 7.0 Version History for 
more information 

Wetpaint, Inc.   Confidential  52 

 
Permissions
All registered users can rename a title.   

Interaction Flows

Dialogs
The following dialog is used during the rename process. 

Rename dialog:  accessible via the content tools menu. 

6.3 Delete Content

Moderators can delete content areas on publisher created pages or areas on user created pages.  
Deleting the content will remove the content from displaying; preventing it from being spidered by 
search engines in the future.   

Wetpaint, Inc.   Confidential  53 

 
Example

Figure 6.3.1 the above example shows the contents of a deleted area.  The contents of a deleted content 
area are removed from display and edit keyword tags is not an option.  Included in the message are the 
moderator’s user name and the reason why the content was deleted if provided.   

Permissions
Only moderators can delete content. 

Interaction Flows

Impacts on sub‐pages/areas: If a page is deleted the default page contents are no longer displayed (as 
shown above).  Deleted pages are also removed from the parent page’s navigation.  Sub‐pages of a 
deleted page are not impacted by the delete page action.  Sub‐pages can still be reached and read; 
though access to them may be limited as the parent page will be removed from the default navigation.   

Wetpaint, Inc.   Confidential  54 

 
A list of deleted content areas can be found from the deleted content report (see section 11.2)   

Dialogs
The following dialogs are utilized. 

Delete dialog:  accessible via the moderation tool menu. 

Impacts to the content area attributes

The content area attributes for a deleted area is modified slightly in that there is no ability to edit 
keyword tags. 

For moderators:  the only option for moderators is restore a page. All other options do not show in the 
content tools. 

For registered users:  there are no options for a registered user so they receive a custom message 
informing them that the page has been deleted.  

6.4 Restore Content

Moderators can restore a previously deleted content area and make it public once again.  When 
restored content areas are automatically added back to the navigation.   
 

Wetpaint, Inc.   Confidential  55 

 
Permissions
Only moderators can restore previously deleted content areas. 

Interaction Flows

Dialogs
The following dialogs are utilized. 

Restore dialog:  This dialog is accessible via the moderation tool menu and from the deleted content 
area report. 

Wetpaint, Inc.   Confidential  56 

 
7. Revision History
7.1 Viewing Revision History
Users are able to view previously published content as well as the scope of changes, including deletions, 
additions, and formatting changes. 

Example

Figure 7.1.1 – The entire history of a content area is accessible via a lightbox. 

 
 

Wetpaint, Inc.   Confidential  57 

 
  

Figure 7.1.2 – Viewing a previous version of a content area.  Wetpaint To Go uses basic revision styles 
(e.g. strikethrough for deleted contents) and font coloration to note added and deleted content. 

Permissions
Any user (even anonymous users) can read this information.   

Wetpaint, Inc.   Confidential  58 

 
Interaction Flow

Exceptions to Look and Feel Customization

The lightbox surrounding the revision history report is customizable per the options explained in section 
2.0. This grayscale report appears centered over the parent page. 

7.2 Delete/Revert Version

Moderators and up can delete or revert any page version.   

Wetpaint, Inc.   Confidential  59 

 
Example

Figure 7.2.1 – A moderator view of the content area history lightbox. 

Permissions
Users must be a moderator or above to delete versions, make previous versions current, or revert to a 
previous version. 

Wetpaint, Inc.   Confidential  60 

 
Interaction Flow

Dialogs
The following dialogs are utilized in the revision history moderator tools. 

Delete Version Dialog: Moderators and administrators are asked to note the reason why the version is 
being deleted. 

Wetpaint, Inc.   Confidential  61 

 
  
Restore Version Dialog: Moderators and administrators are asked to note the reason why the deleted 
version is being restored. 

 
Revert Version Dialog: Moderators and administrators are asked to note the reason why they are 
reverted to a previous version. 

Exceptions to Look and Feel Customization

The lightbox surrounding the revision history report is customizable per the options explained in section 
2.0. This grayscale report appears centered over the parent page. 

Wetpaint, Inc.   Confidential  62 

 
8. Reporting
Wetpaint To Go provides a number of reports to administer your user‐generated content.  These reports 
include access to recently updated content areas as well as a report that flags questionable language.   

Access to the reports section

The reports are accessible via the content area revision history lightbox discussed in section 7.0. 

Exceptions to Look and Feel Customization

The lightbox surrounding the reports is customizable per the options explained in section 2.0. The 
grayscale report appears centered over the parent page. 

8.1 Recently Updated Content Areas

The recently updated content report provides a handy snapshot of all updated content on your site. This 
includes first‐time edits of content areas on existing pages as well as newly created pages.   The display 
name of the area, its location or parent page, as well as the creation date and last edit date are also 
included.   This report details the most recent updates to all of the content areas embedded throughout 
your website.  Due to the wealth of information in this report, it is displayed in the larger lightbox 
format.   

Wetpaint, Inc.   Confidential  63 

 
Example

Figure 8.1.1 the above example shows the recently updated content areas report updated to include 
newly created pages and renamed content areas. 

Permissions
All registered users can view the Recently Updated Content Areas report. 

Wetpaint, Inc.   Confidential  64 

 
8.2 Deleted Content
The deleted pages report shows the display name, the location/parent, the last update, the most recent 
contributor (often the user who deleted the content), and other useful data.  From this report, content 
areas can be restored.   

Example

Figure 11.2.1 The Report lightbox displaying the deleted content report. 

Wetpaint, Inc.   Confidential  65 

 
Permissions
Only moderators can access the deleted content report. 

8.3 Questionable Language Report

This report details content areas that have been flagged via Wetpaint’s language filter as containing 
questionable language. 

Example

Wetpaint, Inc.   Confidential  66 

 
Permissions
Only moderators and up have access to the Questionable Language report. 

8.4 Content Card

Since content areas may have the same user friendly name, a content card has been created in order to 
provide the user with more information on the content on all reports, including the keyword tag report 
and in the link suggestions menu.  

The card is accessible via clicking on the “Information” Icon    next to the content title as seen in the 
example below. 

Wetpaint, Inc.   Confidential  67 

 
  

Figure 8.4.1 – The user has clicked on the “information” icon for the first item in the report and the 
content card is displayed. 

Wetpaint, Inc.   Confidential  68 

 
9. New Pages 
The following section covers the basic features and dialogs involved in creating user generated pages 
(via a partner provided shell or template) as sub pages from publisher created pages.  

Partner Created Pages vs. User Generated Pages

The Requirements for publisher shell pages will be provided in a separate technical document.   

9.1 Add new pages

Users are able to create new pages with one or many content areas per page.  The number of content 
areas per new page is configurable by you.  Example: 

Wetpaint, Inc.   Confidential  69 

 
  

Figure 9.1.1 – Represents a publisher created page with a link to add a new page. 

Wetpaint, Inc.   Confidential  70 

 
  

Figure 9.1.2 – In the figure above, the user has engaged the “add a page” dialog by clicking on the ‘add a 
page’ link. The location and nomenclature (link text) of the link is completely determined by you. 

Wetpaint, Inc.   Confidential  71 

 
Figure 9.1.3 – Once the new page has been created, the user can interact with it by clicking EasyEdit to 
engage the editing process. 

Permissions
A user must be authenticated in order to add pages to a site. All page edits by individual users are 
thereby tracked. 

Interaction Flow

User Experience Modules

The following modules are utilized during the page creation process. 

Add Page Link: 

The location of the “add page” link is up to you. 

The nomenclature for this link is fully customizable. It can be titled anything that is desired and relevant 
to your specific site, some examples include “add recap”, “add page”, “add summary”, etc.  

Add new page:  The following dialog opens when a user selects to add a new page.   

Wetpaint, Inc.   Confidential  72 

 
  

The title text in the dialog and button title will be customized based on what the link text you provide.   

Customization:  for a list of the customizable CSS elements (via overrides) see the ‘Customized Look and 
Feel’ section in the ‘Content Area Feature Set’ document. 

9.2 Navigation
There are three options for retrieving the navigation for sub‐pages of an editable area on a partner 
published page or on a user created page.   

API call: There are two types of navigation calls.  

The first type will return up to 50 ‘child’ pages per page, but only include one layer down in the 
hierarchy in the initial call.  For a list of deeper pages an additional call should be made. 

The second type of call will return the entire hierarchy tree of ‘child’ pages per page   
(See the example to the left) 

Via the API call, the design, information architecture, and navigation hierarchy 
displayed can be customized entirely by you. See the Technical API document for 
more information.  

Unordered list:  child pages are also available for any sub‐page or content area as an 
unordered HTML list.  Although shown in a simple bulleted list below, the look, feel, 
and placement of this list can be determined by your CSS.  

Wetpaint, Inc.   Confidential  73 

 
  

Subpage list:  child pages are also available as part of the Content Area Attributes box that sits below 
the page content and includes a link to the content card.  This list of pages inherits the look and feel of 
your governing CSS. 

Wetpaint, Inc.   Confidential  74 

 
 Version History
 

Version  Date  By:  Notes: 

0  March 13, 2008  Tracy Tavis  Document created 

1.0  March 23, 2008  Tracy Tavis   

2.0  April 2, 2008  Tracy Tavis  6.0 Content moderation updated to include 

moderation for add a page functionality 

8.0 Reports updated to include Deleted 
Content Areas report 

Example images updated with new attributes 
module 

4.1 Basic Editing updated to include new 
reformatted content dialog. 

Added sections: 

• 3.4 Authentication Requirements 

• 4.7 Save Conflicts & Merge 

• 9.0 Add a Page functionality 

3.0  April 8, 2008  Tracy Tavis  Updated images with updated content 

attributes module. 

Added section 8.4 Content Card 

Updated section 4.3 Page Linking to include 
the auto‐suggest feature. 

Updated section 4.2 Table Formatting to 
include merge cells 

4.0  April 29, 2008  Tracy Tavis  Updated section 5.0 Keyword Tags to include 

the keyword tag report lightbox and 
attributes module to demonstrate linked 

Wetpaint, Inc.   Confidential  75 

 
 keyword tags. 

Updated images to include correct attributes 
module. 

Updates section 9.2 Navigation with final 
subpage navigation 

Updated section 3.2 content area attributes 
to include final attributes module including 
subpages. 

       

Wetpaint, Inc.   Confidential  76 

 
Appendix
Other documents of interest:
1. Wetpaint To Go Introduction 
2. Technical Overview 

Questions and comments? Please contact:

Jeff McDowell 
Program Management, Wetpaint.com, inc. 
jeff@wetpaint.com 

Wetpaint, Inc.   Confidential  77