RCSB Protein Data Bank

This browser is either not Javascript enabled or has it turned off.
This site will not function correctly without Javascript.

Facebook Twitter LinkedIn Email

Link this Page

RCSB PDB Widgets

A resource for web developers

The RCSB PDB provides web widgets, small bits of code, which provide PDB functionality that you can embed in your own website. All of the widgets that we provide on our site are 100% self contained JavaScript files which we maintain. When using any of these widgets, please make sure to remote link to our libraries instead of downloading and hosting them yourself. This will insure that any updates or changes we make to our site are automatically reflected in your usage.

3rd Party Widgets

PSI SBKB Widget
Mac-OSX Dashboard Widget

RCSB PDB Comparison Tool Widget

The comparison tool allows to perform pairwise sequence and structure alignments between protein chains.

Example:

Usage:

<script type="text/javascript">
	var wb_width = '250px';
	var wb_headerColor = '#6493c2';  
	var wb_bodyColor = '#eaf2f8';
</script>
<script type="text/javascript" src="http://www.rcsb.org/pdb/widgets/workbench.js">
</script>
			

Options:

The RCSB PDB Workbench Widget is highly customizable to best fit within your site. There are a number of options you specify to customize the widget and use can see how they are used below. You can omit any of these options, and the widget will use default values.

wb_width - Specify the width of the widget (ex. 200px). The default width is 250px.
wb_headerColor - Specify the color of the header and borders in html hex form (ex. #ff6600). This should be a dark color. The default is #6493c2.
wb_bodyColor - Specify the color of the body in html hex form (ex. #ff6600). This should be a light color. The default is #eaf2f8.

RCSB PDB Molecule of the Month Widget

The Molecule of the Month widget embeds a Molecule of the Month image on your website and links to that feature. The widget can be customized to specify width, colors, amount of text show, and which feature to display. If you do not specify a particular issue, the widget will automatically use the current structure.

The widget comes in two versions, Full and Simple, both of which are shown below.

Examples

Full Widget:

Simple Widget:

RCSB PDB Molecule of the Month
July 2002

p53 Tumor Suppressor

Usage (Full Widget Example):

<div style="float:left; margin-right: 10px;">
	<script type="text/javascript">
	rcsb_mom_width = '250px';
	rcsb_mom_headerColor = '#ff6600';
	rcsb_mom_bodyColor = '#ffffcc';
	rcsb_mom_type = 'full';
</script>
<script type="text/javascript" src="http://www.rcsb.org/pdb/widgets/rcsbPdbMotm.js">
</script>
			

Options:

The RCSB PDB Molecule of the Month Widget is highly customizable to best fit within your site. There are a number of options you specify to customize the widget and use can see how they are used below. You can omit any of these options, and the widget will use default values.

rcsb_mom_width - Specify the width of the widget (ex. 200px). The default width is 250px.
rcsb_mom_headerColor - Specify the color of the header and borders in html hex form (ex. #ff6600). This should be a dark color. The default is #6493c2.
rcsb_mom_bodyColor - Specify the color of the body in html hex form (ex. #ff6600). This should be a light color. The default is #eaf2f8.
rcsb_mom_type - This property can be either 'full' or 'simple'. The example of each is listed on the left. Full display is set by default.
rcsb_mom_month - Specify a month for a specific RCSB PDB Molecule of the Month in numeric format (ex. 6). This property must be used with the rcsb_mom_year property. If both fields are omitted, the widget automatically defaults to using the latest available feature.
rcsb_mom_year - Specify year for a specific RCSB PDB Molecule of the Month (ex. 2006). This property must be used with the rcsb_mom_month property. If both fields are omitted, the widget automatically defaults to using the latest available feature.

RCSB PDB Tag Library

Version 2.0

The RCSB PDB Tag Library is a rich markup widget that allows you to easily tag PDB ID's and keywords on your own site and automatically provide enhanced functionality that links back to us. Check out the example below by rolling over any of the underlined words. We currently provide 4 different tags: ID tag that provides an image and link to the structure explorer page, menu tag that provides a menu with useful links, author tag that provides a link to an exact author query and keyword tag that provides a link to a keyword query results page. Note that the author tag searches both primary and citation authors.

Important: When including widgets in your own site, make sure you have a doctype defined. Without a doctype, certain features that the widgets provide will not display properly. Here is an example doctype we use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note: Version 2 is backward compatible with the old version of markup, but we do recommend you use the new format in order to be more W3 compliant.

Example:

Following example text has been marked up using this library.

Text from doi: 10.2210/rcsb_pdb/mom_2009_1

In a Nobel-prize-winning study, Wendell Stanley coaxed the virus to form crystals, and discovered that it was composed primarily of protein. Others quickly discovered that there was also RNA in the virus. Then, many prominent structural researchers (including J. D. Bernal, Rosalind Franklin, Ken Holmes, Aaron Klug, Don Caspar, and Gerald Stubbs) used X-ray diffraction and electron microscopy to probe the structure of the virus.
Several structures of the whole tobacco mosaic virus are available in the PDB, including the ground-breaking one solved by X-ray fiber diffraction (shown here from PDB entry 2tmv), and a recent structure solved by analysis of many electron micrographs (PDB entry 2om3). The virus is composed of one strand of RNA (shown in red) wrapped inside a sheath of protein (shown in blue). The protein coat is composed of about 2130 copies of a small protein, which stack like bricks in a cylindrical chimney. The RNA strand encodes four proteins, which together orchestrate the life cycle of the virus. These include two proteins that replicate the viral RNA, a protein that transports the RNA from cell to cell, spreading the infection, and the capsid protein seen in the PDB structures.

Usage:

<script type="text/javascript" src="http://www.rcsb.org/pdb/widgets/rcsbPdbTagLib.js"> </script>

...study, <span class="rcsb_tag" title="author|Stanley, W.A.">Wendell Stanley</span>...
...PDB entry <span class="rcsb_tag" title="menu|2tmv">2tmv</span>), and...
...entry <span class="rcsb_tag" title="id|2om3|Tobacco Mosaic Virus">2om3</span>...
...chimney. The <span class="rcsb_tag" title="keyword|RNA">RNA</span> strand...
...and the <span class="rcsb_tag" title="id|3BWQ|">capsid protein</span> seen...

			

Options:

All options are now passed via the title tag to conform with W3 standards.

General Format: TEXT

ID Tag:

The simple ID Tag is used when you wish to provide some extra information for a structure you are writing about. For any tags used that specify the id type, the library will display a rollover picture with a link to the structures explorer page.

Format: title="id|PDB ID|CUSTOM TITLE"

Example: 2om3
PDB ID - 4 character ID of the structure you want to use.

CUSTOM TITLE - "Any String" - You can add your own title which will show in the mouseover view. Note: You can leave it blank, but still include the vertical pipe (ex. "id|1ott|")

Menu Tag:

The Menu tag is an alternative way to mark up a desired PDB ID. Instead of an image, the menu tag provides a drop down list of useful links. These include a link to viewing the structure in a Jmol viewer, its structure explorer page, sequance page, similarity information and links to view and download the PDB file. Unlike the ID tag, the menu tag does not take a CUSTOM TITLE parameter.

Format: title="menu|PDB ID"

Example: 2tmv
PDB ID - 4 character ID of the structure you want to use.

Author Tag:

The author tag provides a quick link to an exact author search of the RCSB PDB database. Clicking on this type of tag will take you to a query result browser page for an exact author query which queries both primary and citation authors. Like the previous tags, you can either encase an authors name in a tag, or override it using the rel tag.

Format: title="author|AUTHOR NAME"

Example: Wendell Stanley
AUTHOR NAME - The author whose structures you wish to search for. This is an exact author search and you have to use the name provided in the CIF fields in order to get a propper result. (ex. "Lawson, C.")

Keyword Tag:

The keyword tag creates a link to a keyword query for the specified text.

Format: title="keyword|KEYWORD"

Example: RNA
KEYWORD - Any text you want to use as a search parameter of the RCSB PDB Keyword Query

CSS Styling

By default, the latest version of the widget automatically links the stylesheet from our server. If you would rather host the style yourself, you can disable the cross loading by modifying the usage as so:

<link rel="stylesheet" type="text/css" href="http://www.rcsb.org/pdb/widgets/rcsbPdbWidgets.css" media="screen" />
<script type="text/javascript" src="http://www.rcsb.org/pdb/widgets/rcsbPdbImageLib.js" > </script>

<script type="text/javascript" >
	rcsbPdbImageLib.isLocalCSS = true;
</script>
			

You can download the stylesheet here.

RCSB PDB Image Library

Version 2.0

The RCSB PDB Image Library widget embeds an image of a structure based on PDB ID. The image size and type of assembly (asymmetric or biological) can be customized. This library also links to all the RCSB PDB static images for your specified ID. Using this widget means that the images don't have to be downloaded on your server, and links never have to be checked or updated - the library maintains this automatically.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note: Version 2 is backward compatible with the old version of markup, but we do recommend you use the new format in order to be more W3 compliant.

Examples

Usage:

// Full Version
<script type="text/javascript" src="http://www.rcsb.org/pdb/widgets/rcsbPdbImageLib.js"> </script>

// or Compressed Version
<script type="text/javascript" src="http://www.rcsb.org/pdb/widgets/rcsbPdbImageLib.min.js"> </script> 

<span class="rcsb_image" title="4hhb|bio_1|medium|This is awesome!" ></span> <br />
<span class="rcsb_image" title="1ksr|asr|small|This is more awesome!" ></span> 
<span class="rcsb_image" title="1ott|bio|80|This is awesomest!"></span>

Options:

All options are now passed via the title tag to conform with W3 standards.

Format: title="PDB ID|Molecule Type|Size|Title"

Example: title="1ott|bio|80|This is awesomest!"
PDB ID - 4 character ID of the structure you want to use.

Molecule Type - "asr" for Asymmetric Unit, "bio" for Biological Assembly or "bio_#" where # is the number of the biological assembly e.x. "bio_2".

Size - You can pass the image size in 2 ways: by simple string or by pizel size. Simple string sizes include xsmall(65px), small(80px), medium(250px), large(500px). You can also pass in a pixel size e.x. "200". Our maximum image size is 500px.

Title - "Any String" - You can add your own title which will show in the shadowbox view.

Shadow Box:

When using the RCSB PDB Image library, by default every image loaded will also include shadow box feature that lets you click on the generate image and view a larger version. This can be disabled if you wish to provide your own linking or just have plain embedded images.

<script type="text/javascript" >
	rcsbPdbImageLib.useShadowBox = false;
</script>

CSS Styling

<link rel="stylesheet" type="text/css" href="http://www.rcsb.org/pdb/widgets/rcsbPdbWidgets.css" media="screen" />
<script type="text/javascript" src="http://www.rcsb.org/pdb/widgets/rcsbPdbImageLib.js" > </script>

<script type="text/javascript" >
	rcsbPdbImageLib.isLocalCSS = true;
</script>

You can download the stylesheet here.

Widgets provided by 3rd Parties

PSI SBKB Widget

The PSI SBKB Widget provides a dynamic display of the current content of the SBKB site and will automatically detect new articles, structures and features.

Example:

Usage:

<!------------------ optional start ------------------>
<script type="text/javascript">
var SBKB_width='200px';// or default is 250px
var SBKB_color='grey'; // or default is RED
</script>
<!------------------ optional end   ------------------>
<!------------------ default          ---------------->
<script type="text/javascript" src="http://sbkb.org/Widget/Widget.js"></script>

Mac-OSX Dashboard Widget

Brian Weitzner and Roland Dunbrack (Fox Chase Cancer Center) are providing an OSX Dashboard widget. It provides easy downloads of PDB files and allows quick access to the Structure Explorer web page for any given PDB ID. This Mac-OSX widget will not work on Linux or Windows computers.

Availability

In order to download and install this widget, please go to the Dunbrack's lab web site .