---
title: "Embed"
canonical: "https://docs.pbs.org/space/B3/4751472/Embed"
format: markdown
---
> Macro (toc)

> 📝 **Interested in embedding the PBS livestream on your Bento site? ****[Learn how](https://docs.pbs.org/space/LLS/3571720/Local+Livestreaming#Implementing-the-livestream-feed)**

## Overview

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](https://docs.pbs.org/display/B3/Text#Text-Howtolinktofiles) to link files such as PDFs and PPTs.

## Important notes

- <span style="color: #003366">When embedding links in this component, we recommend using https:// instead of http://</span>
- <span style="color: #003366">Code that is added through the embed component is the responsibility of the person adding it. Embed code is not supported by PBS and may impact the troubleshooting process for any issues that may arise.</span>

## Example

*This is an example of an embedded donation form.*

![image](media://3eb35308-9a33-4676-8ed4-959f4877fee4)

## How to implement the Embed component

<details>
<summary>View the tutorial</summary>

![embed.mp4](media://b082e587-0928-48b3-8d88-fce84ab68816)
</details>

- In any section of your page (header, page content, footer), **[add a block](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751596)** (Figure 1.1) or click the** plus sign** within an existing block (Figure 1.2).

Figure 1

![embed-component1.jpg](media://2b7ef022-1cc8-49d7-9f26-99c2e0b760c6)

- Click **embed **(Figure 2).

Figure 2

![embed-component2.jpg](media://574d3fd8-3c4f-487a-89e1-754f98733d74)

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

Figure 3

![embed-component3.jpg](media://216680c1-a610-4a5d-bc0c-04a1809be8d4)

- In the textbox, type or paste your **embed code** (Figure 4.1). <span style="color: #ff0000">**When adding links, please try to use https:// instead of **</span><span style="color: #ff0000">**[http://.](#)**</span>
- 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 <span style="color: #1d1c1d">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.  </span>
- 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

![embed4.jpg](media://755183ad-a735-41fb-9aec-f0e4f1be39fe)

- 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

![image](media://f7a34929-c94c-4c06-99c3-42277f7136fd)

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

Figure 6

![image](media://f1f64b11-40d0-4962-8bc3-a466bd0090e6)

## How to create an anchor link

[Learn how to create an anchor link using embed](https://docs.pbs.org/space/B3/4751557/Using+Anchor+Links#How-to-create-an-anchor-link-with-the-embed-component)