Important notes

  • When embedding links in this component, we recommend using https:// instead of http://
  • Code added through the embed component is not supported by PBS and may impact the troubleshooting process for any issues that may arise.


The Embed component provides a way to add code to your site to achieve specific functionality that is not otherwise offered by one of the available Bento components. Embed accepts html and javascript and can be used to embed items such as non-PBS TV Schedule modules, donation forms, and newsletter sign-ups. Use the text component to link files such as PDFs and PPTs.


This is an example of an embedded donation form.

How to implement the Embed component


  • In any section of your page (header, page content, footer), add a block (Figure 1.1) or click the plus sign within an existing block (Figure 1.2).

Figure 1

  • Click embed (Figure 2).

Figure 2

  • Click anywhere in the grey box to open the Embed component and add your code (Figure 3).

Figure 3

  • In the textbox, type or paste your embed code (Figure 4.1). When adding links, please try to include https:// instead of http://.
  • On the left side of the page, in the Label textbox, type a label for your embed component that provides an idea of what the component contains or its purpose (Figure 4.2). If you are adding more than one Embed component on your page, this allows you to easily distinguish between each one.
  • The ENABLED button activates and deactivates this embed component on your page. (Figure 4.3) When ENABLED is highlighted in blue with white text, it is active on your page. Click the button to disable the component. When the button is disabled, it displays in grey with white text and does not display on your page. This feature is useful for debugging your site. For instance, if a page is displaying an error and several embed components are present on the page, you can disable each to find which is responsible for the error.  
  • If you do not see the options on the left side of the page, hover over your Embed component and click the settings icon (Figure 4.4).
  • When finished, click Save (Figure 4.5).

Figure 4

  • The label of your embed component displays on the page (Figure 5.1). Click the component or settings icon again to change the label.
  • Click Preview to view your page in a browser (Figure 5.2).

Figure 5

  • The page renders your embed code (Figure 6).

Figure 6