---
updatedAt: 2026-04-08T10:22:23.000Z
agentTools:
projectIndex: https://developer.goacoustic.com/acoustic-content/llms.txt
---
# Create an Iframe component
[block:html]
{
"html": "\n\n"
}
[/block]
A configurable component can be added to a page just like any content. Adding the new components to your site is fast, simple, and easy. A script command added to the package.json file automatically generates the templates for your site. The following tutorial shows the instructions to create an Iframe component and add it to your site.
## Before you begin
To get started, you need:
* Your Acoustic Content trial or standard edition. Get a [free trial](https://acoustic.com/content-free-trial/) version or upgrade to the standard edition from [Acoustic Content](https://acoustic.com/products/content/).
* Install a [Node](https://docs.npmjs.com/getting-started/installing-node) environment with a recent stable version greater than [Node >= 8](https://nodejs.org/en/?cm_mc_uid=63160199585115051461052\&cm_mc_sid_50200000=).
* Access to the site application code. To access the code download [Acoustic Content Sites single page application](https://github.com/acoustic-content-samples/wch-site-application). For more information about working with the source files, see [wch-site-application/README.md](https://github.com/acoustic-content-samples/wch-site-application/blob/master/README.md).
* For more information about setting up your development environment, see [Setting up your development environment](https://developer.goacoustic.com/acoustic-content/docs/setting-up-your-development-environment). For more information about developing sites with Content, see[Acoustic Content Sites Customization Programming Model](https://github.com/acoustic-content-samples/wch-site-application/blob/master/doc/README-programming-model.md).
## Create a content type
Create the Iframe content type in the Content UI and add it to your site. The Iframe content type has the following elements and settings:
* Name: Iframe
* Elements:
* source: link (required)
* width: number (required, a minimum value of 0)
* height: number (required, a minimum value of 0)
## Generate template files for the new component
After you create the content type, run the npm script in the SPA project to generate the template files for the new component:
`npm run create-layout -- --type Iframe`
The template file that is generated *src/app/components/iframe/abstractIframeComponent.ts* has the following three bounded elements:
[block:code]
{
"codes": [
{
"code": " @RenderingContextBinding() \n readonly source: Link;\n \n @RenderingContextBinding() \n readonly width: number;\n \n @RenderingContextBinding() \n readonly height: number;\n ",
"language": "text",
"name": ""
}
]
}
[/block]
Use these variables to access the content type data.
## Create a layout
Define the layout by referencing the variables from the template in the *src/app/layouts/iframe/iframeLayout.html* file with the angular notation.
For example:
[block:code]
{
"codes": [
{
"code": " \n \n \n \n
",
"language": "text",
"name": "Angular"
}
]
}
[/block]
## Add styling to the component
Add style elements to the *src/app/layouts/iframe/iframeLayout.scss* file. For example:
[block:code]
{
"codes": [
{
"code": ".wch-iframe { \n \n resize: both; \n \n max-width: 100%; \n \n }",
"language": "css"
}
]
}
[/block]
## Publish the code changes to your site
* Run the following command to build your code.
`npm run build`
* Run the following command to deploy your code.\
`npm run deploy`
[block:callout]
{
"type": "info",
"title": "Note:",
"body": "You must re-enter your Acoustic Content password for you to successfully run the commands."
}
[/block]
## Add the component to a page
The new component can now be added to a page in the Content UI. You must create a new content item from the new Iframe content type, complete the elements with data, and add that content item to a page of the site.
## Expected outcome
A set of active sample site components are provided to help you get started. The samples include a YouTube video integration, a charting sample with Chart.js, and an Iframe app. Download the sample components from [sample-active-site-components](https://github.com/acoustic-content-samples/sample-active-site-components) GitHub repository.