Custom Gallery Overview

(Formerly known as our Remote Gallery product)

Create a widget gallery for your website and let your users find and get widgets on your website with Widgetbox’s Custom Gallery!

It’s quick and easy to set up and your users will love having access to Widgetbox’s widgets, without ever having to leave your site.

 

Build your Custom Gallery from the largest selection of web widgets

Widgetbox has the largest and most diverse selection of widgets. Our tools make it easy to quickly select the widgets you want to display, and manage how you’d like to display them.

 

Pick individual widgets or use search criteria to pull in thousands of widgets. Customizable categories and sort orders allow you to control how widgets are merchandised in your Gallery.

 

Customize the appearance of your Gallery

 

Add your brand to your Custom Gallery and make it match the look and feel of your site with a custom header and footer. You can choose to embed your Custom Gallery as an IFrame on your site, link to a new pop-up window, or use our widget feeds to grab widgets and build your own UI.

 

See below for examples and a working prototype.

 

Track performance and easily manage your Custom Gallery from your Gallery Dashboard

 

Track overall performance of your Gallery and popularity of individual widgets and easily optimize your Gallery all from one dashboard.

 

Example of a basic Custom Gallery



Example of a Custom Gallery with custom header and footer.

Custom Gallery Content Guide

The Custom Gallery Dashboard is your centralized place to manage the appearance and widget content of your Custom Gallery. It also provides metrics to track your Gallery’s performance. The following guide describes the functionality available to you in your Dashboard..

Accessing Your Dashboard

1. Login to your Widgetbox account.
2. Click the "My Widgetbox" tab at the top of the page.
3. Click the "My Gallery" link on the left hand side of the page.

Managing your widget content

The “Edit Content” button allows you to manage what widgets are displayed in your Custom Gallery.

Adding Widgets

Widgets in a Custom Gallery are organized into categories. A Custom Gallery must have at least one (1) category and can have a maximum of twenty (20) categories.

1. To create a new category, click “Add new category”

 

2. Create a name for the category. This is the name your users will see when they browse your Gallery’s categories. (You can edit the name at any point in time.)

3. There are two (2) types of categories you can create: Custom and Smart.

Custom Category is defined by a set of tag criteria you create.

a. Select up to three (3) tags. Widgets with these tags will be included in your category.

 

b. Define whether you want the widgets in the category to contain any one of the tags you selected, or all the tags you selected, by choosing “any” or “all” from the drop down.

c. Define how you would like the widgets in the category to be sorted by selecting one of the sort orders from the drop down menu.

Smart Category automatically adds all the widgets from Widgetbox that match a given set of criteria. There are six (6) smart categories to choose from:

a. Hottest
b. Hidden Gems
c. New & Notable
d. Top Rated
e. All time favorites
f. Featured

4. When you have finished selecting the criteria for a category. Click “Save”.

Spotlighting Widgets

You can feature up to 25 individual widgets in any category, or hand-pick every widget in a given category, by using the Spotlight feature.

1. When creating of editing a category, click the “select widgets” link in the Spotlight section on the right.

 

2. This pulls up a new screen that allows you to search for widgets in Widgetbox’s gallery.

3. Select widgets by clicking the green add button. Widgets you’ve selected will appear in the “My Spotlight Widgets” section.

4. You can define the order of your spotlight widgets by changing the number associated with each one.

5. When finished, click “Done”

Ordering Categories

You can control what order your users see categories in by changing the number next to their name. Click “Update” when done.

Blocking Widgets

There are three (3) different types of filters you can use to block widgets from being displayed in your Custom Gallery. Filters are applied on a gallery-wide basis, across all widget categories.

1. Widgetbox filters: Use Widgetbox’s pre-defined filters to automatically block inappropriate or adult content from your gallery

 

2. Custom filters:

a. Define custom filters to block widgets that contain certain tags.
b. Individually select widgets to block from your gallery

3. Widget type filters:

a. Only include flash widgets
b. Don’t include Blidgets

Editing your Gallery’s Appearance

Add your brand and customize the look and feel of your gallery to match the rest of your site by clicking on the “Edit Appearance” button in your Gallery Dashboard. This will take you to a page where you can add header and footer HTML and CSS to customize the appearance of your Gallery.

Previewing Changes to your Custom Gallery

At any point in time, you can click the “Preview Gallery” button in the upper right corner to preview changes to your Custom Gallery.

Publishing Changes to your Custom Gallery

When you are ready to publish changes to your Gallery, click the “Publish Changes” button in the upper right corner. It is recommended you preview any changes before you publish.

 

Custom Gallery Integration Guide

 

Overview: Building and Integrating Your Custom Gallery

Step 1. Define the widget categories you want to include in your Custom Gallery and select the widgets that will be included in each category using the Edit Content page in your Custom Gallery Dashboard.

Step 2. Select one of the following options to integrate your Custom Gallery and present widgets on your website.

Option 1 (easiest): Use Widgetbox's Pre-Built, Customizable Interface.

Option 2 (more advanced): Create your own interface using Widgetbox's XML, RSS, ATOM, or JSON feeds.

Step 3. (Optional) Create a technical integration that allows users to install widgets to your site. You will need to create a page that can accept data sent via an HTTP(S) POST operation.

Detail: Building and Integrating Your Custom Gallery

Step 1. Define the widget categories you want to include in your Custom Gallery and select the widgets that will be included in each category using the Edit Content page in your Custom Gallery Dashboard.

Steps to do this are outlined in the Custom Gallery Content Guide.

Step 2. Select one of the following options to integrate your Custom Gallery and present widgets on your website.

Option 1 (easiest): Use Widgetbox's pre-built, customizable interface

The pre-built interface can be embed as an IFrame directly on your site or placed in a pop-up window invoked by your site. You can customize the HTML used in the header and footer as well as its related CSS to ensure it matches the look and feel of your site.

To embed the Custom Gallery into your site, simply create an IFrame with the "SRC" property set to:

http://www.widgetbox.com/cgallery/[Gallery-code]/home

Where, [Gallery-code] is an identifier we use to represent your custom galleries in our system. This will load the home page of your Custom Gallery in the IFrame.

To load the IFrame with a specific category already pre-selected, you can use:

/cgallery/[Gallery-code]/category/[category-code]

You can customize the appearance of Widgetbox's pre-built interface by adding your own header and footer HTML and CSS on the Edit Appearance page in your Gallery Dashboard. Access your Gallery Dashboard by logging into Widgetbox, clicking the My Widgetbox tab, and then clicking My Gallery.

 

Option 2 (more advanced): Create your own interface using Widgetbox's XML, RSS, ATOM, or JSON feeds.

Widgetbox's XML, RSS, ATOM, and JSON feeds allow you to create your own user interface. Use this option if you want to retain complete control over your UI or integrate Widgetbox widgets onto your site's existing pages.

Below is a list of the available feeds. These feeds display the widget metadata based on the categories you created (in Step 1) and provide an endpoint that allows you to search across all the widgets in your gallery. (Note: XML feeds are given by default.)

* /cgalleryfeed/[Gallery-code] —> Metadata about your Gallery
* /cgalleryfeed/[Gallery-code]/categories —> All categories in your gallery
* /cgalleryfeed/[Gallery-code]/category/[category-code] —> Widgets in [category-code]
* /cgalleryfeed/[Gallery-code]/search/[search-term]—> Widgets matching [search-term]

You can view all available feeds and make changes to them by visiting the Integration Detailspage in your Gallery Dashboard.

Since the number of results can be large, the feeds are intrinsically paginated. In order to page through the results, you can change the value of certain parameters via the query string. These parameters are:

* p = current page, if not present, default = first page
* s = sort by (enum), default = TOP_RATED
* m = page size (or Max page size), default = 50

This metadata is added such that one can see the current “state” of the feed. pageSize is the current number of items shown in a given feed, by default this is 15. page, means the current page you are viewing in the feed. pages is how many total pages there are given the total number of records divided by the pageSize. sortBy is the current sorting of the items. sortBy is an enumeration whose valid values are: SUBSCRIPTIONS (Most Popular), HOTNESS_QUOTIENT (Hot Right Now), PUBLISHED_ON (Newest), TOP_RATED (Top Rated).

Thus a paginated URL could look like,

http://www.widgetbox.com/cgalleryfeed/[Gallery-code]/category/media...

This would make a page size of 10 items, page 3 of N, sorted by the newest in descending order. To paginate, you would change the value of p, keeping all other parameters the same.

The UI should link to the details page of the widget in either a popup or an IFrame. The widget details page allows the user to customize a widget and for us to capture the unique subscription ID.

Here's an example of the link to the details page for a widget:

http://www.widgetbox.com/cgallery/{gallery-code}/widget/{widget-id}

where {widget-id} is the value "id" provided for each widget in the feeds.

To customize the appearance of the details page, click on the Edit Appearance button in yourGallery Dashboard. Access your Gallery Dashboard by logging into Widgetbox, clicking theMy Widgetbox tab, and then clicking My Gallery. Here you will be able to add custom html header and footer and custom css to your details page. For more information on editing the appearance of your gallery, please read Custom Gallery Content Guide.

Step 3. (Optional) Create a technical integration that allows users to install widgets to your site. You will need to create a page that can accept data sent via an HTTP(S) POST operation.

For your site to receive a user’s widget installation request, you must have an PHP/JSP/ASP page, servlet, or similar service that does the following:

1. Ensures the request is being made by an authenticated user of your site. This is how you know whose page to install it on.
2. Generates/inserts the Widgetbox JavaScript tag into the user’s page. (More on this in a second)
3. (Optional) Some way to move or delete widgets from the user’s page. This is normally accomplished by your system treating the Widgetbox JavaScript tag as a standard component of your site (such as a sidebar element, profile item or blog post). Note that if you allow users to install Widgetbox panels, Widgetbox can manage the arrangement of widgets from inside Widgetbox without re-installing any snippets on your site.

Enter the target URL for that page on the Integration Details page in your Gallery Dashboard. To get to this page, log in to Widgetbox, click on the My Widgetbox tab, then click on the My Gallery link on the left of the page.

There are two (2) options for how you receive the widget installation request from Widgetbox:

1. Widgetbox sends the widget ID to your target URL.

 

Most Widgetbox Custom Gallery partners prefer this option because it is lighter weight and more secure. To implement, keep a template of the widget snippet (it's the same snippet for every widget in the gallery) and insert into it the ID sent by Widgetbox when the user requests the widget. The snippet templates are shown below with ${} around where the id should be swapped in.

The snippet for a standalone widget:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script>if (WIDGETBOX) WIDGETBOX.renderWidget('{widget-id-from-request}');</script>

2. Widgetbox sends the entire widget code snippet to your target URL.

This option is easier to implement, however, if you don't already accept unrestricted JavaScript, you may prefer option 1 due to security.

We are in the process of making this step self-service, but in the meantime, a friendly Widgetbox employee will assist you with this step.