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.

Example of a Custom Gallery home page

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 Details page 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?m=10&p=3&s=PUBLISHED_ON

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 your Gallery Dashboard. Access your Gallery Dashboard by logging into Widgetbox, clicking the My 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.

The Viral Installer consists of code that allows users to customize and grab your widget from a non-Widgetbox site.

The code contains two key sections:

1. A hidden form that includes all of the configurable widget values you defined when registering your widget on Widgetbox.
2. Javascript that displays a Get Widget link. When a user clicks Get Widget, the same Javascript starts the widget installation process using any values you may have provided to the hidden form.

A Step-by-Step Example

How do you get the Viral Installer code for your widget? Let’s walk through a simple example.

1. Create a page on a non-Widgetbox website that will allow users to customize and grab your widget. Note the page’s URL. For our example, let’s assume the URL is "http://www.your-site.com/viral-installer-example.html".
2. On Widgetbox.com, create a new hosted widget with a single configuration parameter called RemoteParam1. Of course, you can have multiple config parameters (i.e. RemoteParam2 … RemoteParamN) as necessary. We’ll just keep it simple for now.



3. On the Parameters screen:
• a) Ensure the Display Name and Name for your parameter are called RemoteParam1. Change the parameter type to "Hidden".
• b) Click the wrench icon associated with RemoteParam1. Provide a Default Value of "Text to Support Widget Preview". This value will be used to support the widget preview users see in the Widgetbox Gallery.
• c) Check the "Use remote configuration" checkbox and enter the URL to the page you identified in step 1.



Note: You could click the Get the Viral Installer link to get the Viral Installer at this point. But don’t for now – we’ll come back to it later.

4. Accept the default settings on the Preview screen.
5. Finish registering your widget on the Gallery Entry screen and make sure you assign a Permalink ID. For now, don’t submit the widget for consideration to the Widgetbox Gallery. We’ve got a little more work to do



6. Visit My Widgets > Developed Widgets and click your widgets name. You’ll notice your widget’s home page is a little different.
• a) Instead of seeing the Widget Settings panel, users are instructed to visit your site to customize and get your widget.
• b) The Get Widget button is purple instead of green. This lets users that the process of customizing and grabbing the widget will occur on your site.



7. Go back to My Widgets > Developed Widgets. Click the link called Get Installer associated with your widget.



8. Copy the Viral Installer code that appears. It’ll look something like this:
<!-- Developer: you can configure your widget's values via Javascript.
Learn more at http://docs.widgetbox.com/developers/viral-installer/ -->
<form id="viral_installer_example_GetWidgetForm" style="display:none;">
<input type="hidden" name="appInstance.instanceName" value=""/>
<input type="hidden" name="appInstance.width" value=""/>
<input type="hidden" name="appInstance.height" value=""/>
<input type="hidden" name="RemoteParam1" value=""/>
</form>
<script src='http://www.widgetbox.com/get_widget_btn.jsp?sourceId=<Unique ID Value>&ns=viral_installer_example'></script>

9. Let’s explain the values the hidden field values.

appInstance.instanceName – The "friendly name" a user can assign to a widget.

appInstance.width – The width of the widget.

appInstance.height – The height of the widget.

Note: If no values are provided for these three fields, the widget will be created using values associated with the widget’s preview settings.

RemoteParam1 – The value that maps to ${config.RemoteParam1}

Note: If no value is provided for this field, the default value (if it exists) will be used.

10. Put the Viral Installer code onto the page you identified in steps 1 and 3c.
11. Test the Viral Installer. We’ll do this by temporarily adding values to each of the hidden form fields.
<!-- Developer: you can configure your widget's values via Javascript. Learn more at http://docs.widgetbox.com/developers/viral-installer/ -->
<form id="viral_installer_example_GetWidgetForm" style="display:none;">
<input type="hidden" name="appInstance.instanceName" value="My Customized Viral Installer Widget"/>
<input type="hidden" name="appInstance.width" value="200"/>
<input type="hidden" name="appInstance.height" value="200"/>
<input type="hidden" name="RemoteParam1" value="Viral Installer Test"/>
</form>
<script src='http://www.widgetbox.com/get_widget_btn.jsp?sourceId=<Unique ID Value>&ns=viral_installer_example'></script>
12. Save your page. Load it in your browser.
13. Click the Get Widget link. The same menu that appears on the Widgetbox.com site when a user clicks Get Widget will appear. Pick a site to install your widget or just grab the widget code.
14. Take a look at your installed widget. The text "Viral Installer Test" should appear within.
15. Remove the temporary changes to the widget code made in step 10. Save the changes. Reload the page in your browser.
16. What’s next? Build an interface to feed values into the hidden form. What does does the interface need to look like? That’s up to you! If you want a quick solution, you can un-hide the Viral Installer form and each of the form input fields.
17. Don’t forget to come back to Widgetbox and submit your widget for consideration in our Gallery.

Get the Viral Installer

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.

Active customer service discussions in Widgetbox about Custom Gallery

Loading…

Get Satisfaction support network

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.

• See It in Action!

Xanga’s Custom Gallery

Create your own Custom Gallery today!