CC Creator - Iframe

The iframe component is designed to allow external content from other web pages

Each edit mode allows you to perform different actions with iframes

Easy Mode:

• Configure iframe properties

Professional Mode:

• Add an iframe inside rows
• Move position
  
• Duplicate or delete
• Modify the visibility of an iframe
  

Configure iframe properties

Clicking on the iframe activates the side menu with its properties.

The properties you can set up are:

• Its title. It will be useful to customize it to recognize the content box from the breadcrumb path.
• Its identifier. This is a self-generated data by the system, but you can customize it. If you customize it, you will help make the trace that sends the unit to the platform clearer. Remember that the Identifiers must be different, you cannot repeat any identifier of any element within the unit, so you must be careful when modifying them and not repeat them.
• URL of the web page you want to display in the iframe. Remember that not all web pages allow them to be displayed within iframes.
  
• Alternative text of the web. The relevant add it to ensure accessibility.

Add a new iframe

With Professional editing mode you can add new iframes

To do this, you have the button located in the lower left area.

Remember that any component you add will always be inside a row, so you have two ways to add a new iframe.

- Select an existing element on the screen (a row, a text, an image...). Then, simply add the desired component by clicking on it. It will be added below the chosen item (or as the last item in the row).

- Drag the component to the screen. By moving the mouse pointer over the elements of the screen you can decide where to place the component. To help you, color-coded bars will be displayed:

Move an iframe in position

With Professional editing mode you can move a component to a different position

All you have to do is select it by clicking on its label and use the initial icon to drag the element.

Remember that to help you choose the desired position, a color-coded bar will be displayed:

- Blue: will move creating a new section.

- Orange: will move creating a new row.

- Green: will move creating a new column.

- Grey: will move under another existing element.

Duplicate or delete iframe

Select the component and, from its label, you can duplicate or delete it.

Modifying the visibility of an iframe

You can decide whether or not an iframe is visible based on the condition you decide. Click on "Add Condition". Here you can decide which object/component to use as a reference and then you can decide the trigger that will make the text visible. Depending on the object you choose, you will have different triggers. For example, you could make an iframe visible when the student passes an activity, or after tapping view a previous video or audio...