Due to the transition from COVE/Merlin to Media Manager, Bento users must request a Media Manager API key in order to access new video content. 

Sites that do not obtain new keys will continue to function as they do today, however, after the transition they will not be able to access new video content. Bento3 users who have already obtained Media Manager keys can continue to use them and won’t need new ones.

To obtain a Media Manager API key and secret, please submit a ticket here: http://digitalsupport.pbs.org/support/tickets/new

What are components?

Components are pieces of code that render as content on your webpage. They can be simple functional modules such as text, RSS feeds, and the Media Manager video player or customized components that allow you to include variables and produce unique results. Placement of components on your Bento pages is determined by your page template.

All components dynamically adjust to display properly on various devices such as tablets and smartphones. Since most users view web content on mobile devices, all Bento sites should be built in a responsive design.  Learn more about responsive design

 Learn how to create variables for your custom components

How to create variables

 View the tutorial

A variable is a holder for a value that, when executed, renders as content on your webpage. A variable can contain an unknown value that can be customized by a user for an individual instance; an identifier that can be bound to a value.  The value can be changed multiple times but use the same variable name.      

  • Variables look like this: {{ variable }}. When a template engine encounters a variable, it evaluates that variable and replaces it with the result.
  • Variable names consist of any combination of alphanumeric characters and the underscore ("_").

You cannot have spaces or punctuation characters in variable names.

Example:

  • Let's use the Footer Copyright component to demonstrate how a variable works (Figure 1).   
  • In the component code below, the variables are located within the double brackets {{ }}.
  • Text typed in between those brackets are the variable name and render as text on your webpage.
Footer Copyright Smart Snippet code
<p>{{ before_copyright }} &copy; Copyright {% now "Y" %} {{ after_copyright }}</p>

Available components

Click each link below to see available components by category or see the full list of components.

 

 404 and 500 Pages
ComponentDescriptionAvailable toShould be used in
Explorer 404 Related PagesProvides links to related Merlin objects in the event a page on your website has been removed or is experiencing difficulties.  This prevents users from ever reaching a dead end on your website.   Producer/Station Page Content 
Explorer 404 SuggestionsProvides links to other pages on your website when the page a user was looking for has been removed or is experiencing difficulties.Producer/Station  Page Content  
Explorer 500 Error Page

Provides a message to users when the server has encountered an error or is otherwise incapable of performing a request.  Also provides links to other pages on your website so users never encounter a dead end on your website.

Producer/Station  Page Content  
 Headers and Footers
ComponentDescriptionAvailable toShould be used in
Explorer BreadcrumbsLets users know which page of your website they are currently viewing and how they arrived at that page.  Displays a path of page names leading back to the root page.  Each page name is clickable allowing the user to go directly to an individual page. Pages included in the breadcrumbs are determined by the In navigation checkbox on each page.Producer/Station Header 
Explorer Header LogoAdds a logo and logo alt text to the header area of your website pages.  This component is intended for stations only and should be implemented on the master page.Station   Middle Header
Explorer Header Mini LogosPlaces clickable partner logos in the header section of your website.  This component is intended to be implemented on the master page only.Station   Middle Header 
Producer Header BannerAdds a logo and branding to the header area of your website pages.  This component is intended for producers only and should be implemented on the master pageImage must be 960 pixels wide by 75 pixels high.Producer  Middle Header 
Explorer Station Action Bar 

Places a secondary set of navigation menu items across the top of your website.  These links can call attention to other offerings within your organization or external websites that may be of interest to your users. 

Station  Action Bar
Producer Global ChromeProvides a common, standalone header containing links back to PBS content. ProducerExtra Head
Explorer Flexible FooterPlaces a customizable footer at the bottom of your website.  Footer can hold copyright information, attributions, and up to nine custom links to other pages on your site or external sites. Maximum character limit: 12.Producer/Station   Footer 
Explorer Flexible Footer LongPlaces a customizable footer at the bottom of your website.  Footer can hold copyright information, attributions, and up to nine custom links to other pages on your site or external sites. Maximum character limit: 19. Producer/Station   Footer 
Explorer Footer Links

Repeats all header navigation links in the footer of your website.  This component is one of the core elements included when creating the master page.

Producer/Station   Footer
Explorer Footer Sponsor Box

Places up to 12 sponsor logos and links in the footer of your website.  

 
Producer/Station   Footer 
Passport Station Flexible Footer

Places your station logo, address and copyright information, and up to 28 links to other pages at the bottom of your Bento pages.  Useful for providing information about your organization's physical location, any pages that may be of interest but do not belong in your main navigation, and copyright information. This component is designed to be responsive.

Station  Footer
 Menus
ComponentDescriptionAvailable toShould be used in
Explorer Menu

Places a navigation bar at the top of your webpages.  Links that appear in the Explorer Menu are determined by the In Navigation checkbox on each webpage.  Explorer menu links are repeated in the footer links component on your Bento page. 

Producer/Station   Main Menu
Explorer Menu Split ButtonPlaces a navigation bar at the top of your webpages.  Links that appear in the Explorer Menu are determined by the In Navigation checkbox on each webpage.  Explorer Menu Split Button links are repeated in the footer links component on your Bento page.  When in mobile phone view, provides a separate button for easy access to second level pages.Producer/Station Main Menu 
Passport Station HeaderPlaces your station logo and a branding image in the header section of your website. Include a desktop and mobile version of your station logo to display correctly on different devices.  The station logo appears on the left side of the page while the branding logo appears on the right. Station  Header
 Content
ComponentDescriptionAvailable toShould be used in
BentomaticAllows editors to package and distribute content to responsive Bento sites.Producer/StationPage Content
Custom Enhanced PromoThe Custom Enhanced Promo component displays a large feature image with supporting text and two additional thumbnail images with title text. Clicking the large image and each of the thumbnail images and supporting text leads the user to a page with more information.Producer/Station Page Content 
Explorer Carousel

Places three clickable Merlin objects on your webpage.  Each object scrolls automatically or users can manually advance each object by clicking the left and right arrows located on either side of the carousel or by clicking the three squares centered at the bottom of each Merlin object.

Producer/Station  Page Content  
Explorer Custom Promo 
  • Displays Merlin and Public Media Platform (PMP) content in 28 different possible ways
  • Displays up to 5 Merlin or PMP objects at one time
  • Displays in a vertical or horizontal layout
  • Displays the Content Channel (series name) for a program
  • Places a play icon on video objects
  • Displays images
  • Displays call to action links 
Producer/StationPage Content   
Explorer Video Collection Featured Presents a series of thumbnails with a full size feature video.  Each thumbnail represents a video file and when clicked, features the full size video file at the top. Producer/Station   Page Content  
Explorer Video Collection List Presents a series of thumbnail images representing a video object.  When clicked, the video opens and plays. Producer/Station   Page Content / Right Rail
BlogsDisplays blog entries in a rolling list.  Each blog entry can include a thumbnail image and links that click through to the content of each individual blog entry.Producer/StationPage Content
Pulls Media Manager objects from the Media Manager API and provides the correct ID, Title, and Caption. The title and caption can be modified.Producer/StationPage Content
FileAllows the placement of any file type on a webpage.  The file is accessed by the user by clicking on a file icon.  A title for this component can be added to the page for more clarification.Producer/StationAny
FolderPlaces the contents of an entire folder on your website in either a list or slideshow format.  Producer/StationAny
LinkAdds a link to another Bento site or an external website.  Can also link to an email address.  Producer/Station Any

Surfaces an RSS or Atom feed populated from a third party site, such as Facebook.  Can include images and text or just text.  Each entry links to full article.  Intended to be placed in the right rail section of a webpage.

Producer/Station Right Rail 
Text Adds text, images and other file types to a page using a rich text editor. Producer/Station Any
Event CalendarDelivers a Google calendar object that displays a mini calendar featuring an unlimited number of events each day.Producer/StationRight Rail
 Images and Photos
ComponentDescriptionAvailable toShould be used in
ImageAdds .jpg, .gif, .eps, .tif, .raw, .png, .bmp, and .ai files your website pages.  Images can be resized and linked to any webpage.Producer/Station Any

Presents a series of images.  There are two versions of this component:

  1. an image gallery with descriptions
  2. images only. 

Images can be selected from an image directory in "filer" or from a feed from a image service. 

Producer/Station Page Content / Right Rail
Photo Gallery PromotionPresents a series of thumbnail images that represent a larger photo gallery. This component can be presented in a vertical format or a horizontal format. Images are populated from a photo gallery file.Producer/StationRight Rail
 Social Media
ComponentDescriptionAvailable toShould be used in
Explorer Facebook Activity

Displays an activity feed when users interact with content on your site, such as like, watch, read, play, share content from your site, or comment on a page on your site. 

Producer/Station   Right Rail 
Explorer Facebook Like Box 

Displays the most interesting recent activity taking place on your site.  The activity feed displays stories when users interact with content on your site, such as like, watch, read, play or any custom action. Activity is also displayed when users share content from your site in Facebook or if they comment on a page on your site in the Comments box.

Station   Right Rail  
Explorer Social Media Icons Adds social media icons to your website allowing users to follow your station or program activity on various social media sites. Producer/Station   Right Rail  
Explorer Social Media Image ToolAssigns a representative image for pages that can be shared on social media sites.Producer/Station  Page Content
Explorer Station Disqus CommentingUsing Disqus (http://www.disqus.com), provides PBS and member stations with a unified commenting user-experience and common functionality across multiple sites.   Station Page Content 
Explorer Twitter Follow ButtonAdds a Twitter button to your webpage, along with the option to include a follower count, allowing users to follow your activity on Twitter. Producer/StationRight Rail / Page Content
 Analytics
ComponentDescriptionAvailable toShould be used in
Explorer GA for BentomaticUses Google Analytics to track the events of an invidual Bentomatic page no matter on which site it is implemented.   
Explorer Google AnalyticsCode that is never seen by the user and is used expressly for tracking events on website pages.  Results are stored in the Google database and are accessible via a Google account.  Metrics can include how many visitors your pages have had, where users originated, which device they used and much more.  This component is one of the core elements included when creating the master page.Producer/Station   Extra Head 
 Search
ComponentDescriptionAvailable toShould be used in
Explorer Google Search ResultsA service offered by Google that displays results when a search is executed on a Bento site that contains this component.  This component is one of the core elements when creating the master page.StationPage Content
Explorer Search Form Provides typical internet search functionality.  Places a searchbox in the upper right side of the website header so when a user searches on a term, results are generated and surfaced on a page which includes the PBS Search Results component.  This component is intended for stations only and should be implemented on the master page.  Producer/Station   Middle Header 
Prevent Search EnginesPrevents search engines, such as Google, from searching your site. Producer/Station  Extra Head
Geo-BlockerRestricts end users in specified counties and states from viewing content.Station First_In_Head 
 Schedules
ComponentDescriptionAvailable toShould be used in
AirdatesSurfaces all programs on any given PBS station.  Producers can display upcoming episodes of a particular series on a particular station. Producer/StationPage Content / Right Rail
Explorer Station TV Schedule Uses programming information from PBS data provider Gracenote to present local television scheduling information to users in a clean grid format complete with search and sorting functionality. Station   Page Content / Right Rail 
Explorer Station What's OnDisplays your station's television schedule in a condensed, easy to read format. Viewers can easily see what is showing on your station making your website the go-to place for quick broadcast information.StationRight Rail
Explorer What's On Kids Provides users with your station's local television programming.filtered specifically for kids programs only.  Station   Right Rail
 Advertisements
ComponentDescriptionAvailable toShould be used in

Custom Sponsorship Module

The Custom Sponsorship Module provides a place to display pertinent information about your program. You can display the date your program is airing or has aired, a brief description of your program, and the sponsors who helped make your program happen. This module is designed to be displayed beneath a hero image. Producer/Station Page Content 
Explorer Producer DoubleClickConnects you to a free hosted ad serving solution called DoubleClick for Publishers Small Business (DFP) and enables direct access to the world's largest pool of advertisers. ProducerRight Rail
Explorer Station DoubleClickConnects you to a free hosted ad serving solution called DoubleClick for Publishers Small Business (DFP) and enables direct access to the world's largest pool of advertisers. StationRight Rail
    
 Site Design
ComponentDescriptionAvailable toShould be used in
Explorer Producer ThemeApplies a theme (color and formatting) to your website.  Learn more about ThemesProducer  Theme 
Explorer Station Theme Applies a theme (color and formatting) to your website.  Learn more about ThemesStation   Theme
Explorer FaviconDisplays your station or program logo icon in a browser tab, address bar, and bookmark.Producer/Station  First in Head
Explorer Right Rail ArrowProvides a flexible solution for including actionable items on the right rail of your website. Producer/Station Right Rail 
Explorer Section Divider Visually divides sections of a webpage with a colored bar and text.  The color of the bar and the text format can be customized. Producer/Station   Page Content / Right Rail 
Explorer Station Call To Action Provides an opportunity to highlight a special event or offering in the form of a graphic banner at the top of your website.  The banner links through to a website or page supporting the banner content.  Image must be 960 pixels wide by 75 pixels high.Station  Extra Page Content 
PBS.org Explorer Producer DonateLocalizes users so they can donate directly to their station.ProducerRight Rail
 Themes
ComponentDescriptionAvailable toShould be used in
Explorer Producer ThemeApplies a theme (color and formatting) to your website.  Learn more about ThemesProducer  Theme 
Explorer Station Theme Applies a theme (color and formatting) to your website.  Learn more about ThemesStation   Theme

 

Full list of available components

The following is a complete list of available Bento components. 

Component Name

Description
Available to
Should be used in
AirdatesSurfaces all programs on any given PBS station. Producers can display upcoming episodes of a particular series on a particular station. Producer/StationPage Content / Right Rail
BentomaticAllows editors to package and distribute content to responsive Bento sites.Producer/StationPage Content
BlogsDisplays blog entries in a rolling list. Each blog entry can include a thumbnail image and links that click through to the content of each individual blog entry.Producer/StationPage Content
Event CalendarDelivers a Google calendar object that displays a mini calendar featuring an unlimited number of events each day.Producer/StationRight Rail
FileAllows the placement of any file type on a webpage. The file is accessed by the user by clicking on a file icon. A title can be added to the page for more clarification.Producer/StationAny
FolderPlaces the contents of an entire folder on your website in either a list or slideshow format.  Producer/StationAny
Geo-BlockerRestricts end users in specified counties and states from viewing content.Station First_In_Head 
ImageAdds .jpg, .gif, .eps, .tif, .raw, .png, .bmp, and .ai files your website pages. Images can be resized and linked to any webpage.Producer/Station Any
LinkAdds a link to another Bento site or an external website. Can also link to an email address.  Producer/Station Any

Media Manager Video Player

Pulls Media Manager objects from the Media Manager API and provides the correct ID, Title, and Caption. The title and caption can be modified.Producer/StationPage Content
Presents a series of images. There are two versions of this component: an image gallery with descriptions and images only. Images can be selected from your filer folders or a feed from an image service. Producer/Station Page Content / Right Rail
Photo Gallery PromotionPresents a series of thumbnail images that represent a larger photo gallery. This component can be presented in a vertical or horizontal format.  Images are populated from a photo gallery file.Producer/StationRight Rail

Surfaces an RSS or Atom feed populated from a third party site, such as Facebook. Can include images and text or just text. Each entry links to the associated full article.

Producer/Station Right Rail 
TextAdds text, images and other file types to a page using a rich text editor. Producer/Station Any
Custom Components - components can be customized using variables
Component NameDescriptionAvailable toShould be used in
Custom Enhanced PromoThe Custom Enhanced Promo custom component displays a large feature image with supporting text and two additional thumbnail images with title text. Clicking the large image and each of the thumbnail images and supporting text leads the user to a page with more information.Producer/Station Page Content 

Custom Sponsorship Module

The Custom Sponsorship Module provides a place to display pertinent information about your program. You can display the date your program is airing or has aired, a brief description of your program, and the sponsors who helped make your program happen. This custom component is designed to be displayed beneath a hero image. Producer/Station Page Content 
Explorer 404 Related PagesProvides links to related Media Manager objects in the event a page on your website has been removed or is experiencing difficulties thus preventing users from ever reaching a dead end on your website.   Producer/Station Page Content 
Explorer 404 SuggestionsProvides links to other pages on your website when the page a user was looking for has been removed or is experiencing difficulties.Producer/Station  Page Content  
Explorer 500 Error Page

Provides a message to users when the server has encountered an error or is otherwise incapable of performing a request. Also provides links to other pages on your website so users never encounter a dead end on your website.

Producer/Station  Page Content  
Explorer BreadcrumbsLets users know which page of your website they are currently viewing and how they arrived at that page. Displays a path of page names leading back to the root page. Each page name is clickable, allowing the user to go directly to an individual page. Pages included in the breadcrumbs are determined by the In navigation checkbox on each page.Producer/Station Header 
Explorer Carousel

Places three clickable Media Manager objects on your webpage. Each object scrolls automatically or users can manually advance each object by clicking the left and right arrows located on either side of the carousel or by clicking the three squares centered at the bottom of each Media Manager object.

Producer/Station  Page Content  
Explorer Custom Promo 
  • Displays Merlin and Public Media Platform (PMP) content in 28 different possible ways
  • Displays up to 5 Merlin or PMP objects at one time
  • Displays in a vertical or horizontal layout
  • Displays the Content Channel (series name) for a program
  • Places a play icon on video objects
  • Displays images
  • Displays call to action links 
Producer/StationPage Content   
Explorer Facebook Activity

Displays an activity feed when users interact with content on your site, such as likewatchreadplayshare content from your site, or comment on a page on your site. 

Producer/Station   Right Rail 
Explorer Facebook Like Box 

Displays the most interesting recent activity taking place on your site. The activity feed displays stories when users interact with content on your site, such as like, watch, read, play or any custom action. Activity is also displayed when users share content from your site in Facebook or if they comment on a page on your site in the Comments box.

Station   Right Rail  
Explorer FaviconDisplays your station or program logo icon in a browser tab, address bar, and bookmark.Producer/Station  First in Head
Explorer Flexible FooterPlaces a customizable footer at the bottom of your website. The footer can hold copyright information, attributions, and up to nine custom links to other pages on your site or external sites. Maximum character limit: 12.Producer/Station   Footer 
Explorer Flexible Footer LongPlaces a customizable footer at the bottom of your website. The footer can hold copyright information, attributions, and up to nine custom links to other pages on your site or external sites. Maximum character limit: 19. Producer/Station   Footer 
Explorer Footer Links

Repeats all header navigation links in the footer of your website. This custom component is one of the core elements included when creating your master page.

Producer/Station   Footer
Explorer Footer Sponsor Box

Places up to 12 sponsor logos and links in the footer of your website.  

 
Producer/Station   Footer 
Explorer GA for BentomaticUses Google Analytics to track the events of an individual Bentomatic page. Results are tracked on whichever site the Bentomatic is placed.Producer/Station Extra Head 
Explorer Google AnalyticsCode that is never seen by the user and is used expressly for tracking events on website pages. Results are stored in the Google database and are accessible via a Google account. Metrics can include how many visitors your pages have had, where users originated, which device they used and much more. This custom component is one of the core elements included when creating your master page.Producer/Station   Extra Head 
Explorer Google Search ResultsA service offered by Google that displays results when a search is executed on a Bento site that contains this custom component. This custom component is one of the core elements when creating your master page.StationPage Content
Explorer Header LogoAdds a logo and logo alt text to the header area of your website pages. This custom component is intended for stations only and should be implemented on your master page.Station   Middle Header
Explorer Header Mini LogosPlaces clickable partner logos in the header section of your website. This custom component is intended to be implemented on your master page only.Station   Middle Header 
Explorer Menu

Places a navigation bar at the top of your webpages. Links that appear in the Explorer Menu are determined by the In Navigation checkbox on each page of your Bento site. Explorer Menu links are repeated in the footer links custom component on your Bento page. 

Producer/Station   Main Menu
Explorer Menu Split ButtonPlaces a navigation bar at the top of your webpages. Links that appear in the Explorer Menu are determined by the In Navigation checkbox on each page of your Bento site. Explorer Menu Split Button links are repeated in the footer links custom component on your Bento page. When in mobile phone view, provides a separate button for easy access to second level pages.Producer/Station Main Menu 
Explorer Producer DoubleClickConnects you to a free hosted ad serving solution called DoubleClick for Publishers Small Business (DFP) and enables direct access to the world's largest pool of advertisers. ProducerRight Rail
Hero CarouselDisplays up to five hero images.Producer/StationHero-Image
Producer Global ChromeProvides a common, standalone header containing links back to PBS.org content. ProducerExtra Head
Explorer Producer Header BannerAdds a logo and branding to the header area of your website pages. This custom component is intended for producers only and should be implemented on your master pageImage must be 960 pixels wide by 75 pixels high.Producer  Middle Header 
Explorer Producer ThemeApplies a theme (color and formatting) to your website. Learn more about ThemesProducer  Theme 
Explorer Right Rail ArrowProvides a flexible solution for including actionable items on the right rail of your website. Producer/Station Right Rail 
Explorer Search Form Provides typical internet search functionality. Places a search box in the upper right side of the website header so when a user searches enters search criteria, results are generated and surfaced on a page which includes the PBS Search Results custom component. The Explorer Search Form custom component is intended for stations only and should be implemented on your master page.  Producer/Station   Middle Header 
Explorer Section Divider Visually divides sections of a webpage with a colored bar and text, both of which can be customized. Producer/Station   Page Content / Right Rail 
Explorer Social Media Icons Adds social media icons to your website allowing users to follow your station or program on various social media sites. Producer/Station   Right Rail  
Explorer Social Media Image ToolAssigns a representative image for pages that can be shared on social media sites.Producer/Station  Page Content
Explorer Station Action Bar 

Places a secondary set of navigation menu items across the top of your website. These links can call attention to other offerings within your organization or external websites that may be of interest to your users. 

Station  Action Bar
Explorer Station Call To Action Provides an opportunity to highlight a special event or offering in the form of a graphic banner at the top of your website. The banner links through to a website or page supporting the banner content. Image must be 960 pixels wide by 75 pixels high.Station  Extra Page Content 
Explorer Station Disqus CommentingUsing the Disqus (http://www.disqus.com) commenting tool, provides PBS and member stations with a unified commenting user-experience and common functionality across multiple sites.   Station Page Content 
Explorer Station DoubleClickConnects you to a free hosted ad serving solution called DoubleClick for Publishers Small Business (DFP) and enables direct access to the world's largest pool of advertisers. StationRight Rail
Explorer Station Theme Applies a theme (color and formatting) to your website. Learn more about ThemesStation   Theme
Explorer Station TV Schedule Uses programming information from PBS data provider Gracenote to present local television scheduling information to users in a clean grid format complete with search and sorting functionality. Station   Page Content / Right Rail 
Explorer Station What's OnDisplays your station's television schedule in a condensed, easy to read format. Viewers can easily see what is showing on your station, making your website the go-to place for quick broadcast information.StationRight Rail
Explorer Twitter Follow ButtonAdds a Twitter button to your webpage, allowing users to follow your station or program activity on Twitter. Comes with the option to include a follower count.Producer/StationRight Rail / Page Content
Explorer Video Collection Featured Presents a series of thumbnails with a full size feature video. Each thumbnail represents a video file and, when clicked, features the full size video file at the top. Producer/Station   Page Content  
Explorer Video Collection List Presents a series of thumbnail images representing a video object. When clicked, the video opens and plays. Producer/Station   Page Content / Right Rail
Explorer What's On Kids Provides users with your station's local television programming filtered specifically for kids programs only.  Station   Right Rail
Passport Station HeaderPlaces your station logo and a branding image in the header section of your website. Include a desktop and mobile version of your station logo to display correctly on different devices. The station logo appears on the left side of the page while the branding logo appears on the right. Station  Header
Passport Station Flexible Footer

Places your station logo, address and copyright information, and up to 28 links to other pages at the bottom of your Bento pages. Useful for providing information about your organization's physical location, any pages that may be of interest but do not belong in your main navigation, and copyright information. 

Station  Footer
PBS.org Explorer Producer DonateLocalizes users so they can donate directly to their station.ProducerRight Rail
PBS.org Programs NewsletterProvides a way for users to receive information on a weekly basis via email about upcoming PBS programs, sneak peeks, tune-in reminders and web extras.ProducerStationRight Rail
Prevent Search EnginesPrevents search engines, such as Google, from searching your site. Producer/Station  Extra Head

 

 

Related pages