Create an Iframe component

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:

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:

@RenderingContextBinding()  
    readonly source: Link;
    
    @RenderingContextBinding()  
    readonly width: number;
    
    @RenderingContextBinding()  
    readonly height: number;

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:

<div [id]="(onRenderingContext | async).id">  
      
            <iframe class="wch-iframe" [src]="source.linkURL | formattedText:'resourceUrl'" [width]="width" [height]="height">  
      
                   Sorry, your browser does not support inline frames.  
      
            </iframe>  
      
    </div>

Add styling to the component

Add style elements to the src/app/layouts/iframe/iframeLayout.scss file. For example:

.wch-iframe {  
      
            resize: both;  
      
            max-width: 100%;  
      
    }

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

📘

Note:

You must re-enter your Acoustic Content password for you to successfully run the commands.

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 GitHub repository.