How to edit Iframes in the visual editor

This guide will walk you through the process of editing iframe elements using the visual editor. Iframes are HTML elements that allow you to embed content from another web page within your current page. With the latest updates, our visual editor supports editing these elements, enhancing your ability to manage and customize embedded content.

Prerequisites

Before you begin, ensure that:

• You have access to the visual editor with iframe editing capabilities enabled.

• You are familiar with the basic navigation and functionality of the visual editor.

Step-by-Step Guide

Step 1: Access the visual editor

• Open the Visual Editor: Navigate to your project and launch the visual editor. Ensure you are working on a campaign that supports iframe editing.

Step 2: Edit Iframe elements

• Add Widgets: You can add specific predefined widgets to iframes. Note that custom widgets are not supported.

  • Use the Element Picker: The Element Picker has been updated to support iframes. It allows you to select iframe elements for editing.

    • Select the Iframe: Use the input field to select the iframe container you wish to edit.

• Modify Styles: Use the CSS Variation Modal to apply styles specifically to iframe elements.

  • Declare a container for the iframe

• CSS Overwrite or Merge: Choose whether to overwrite existing styles or merge new styles with existing ones.

Step 3: Apply JavaScript

JavaScript Support: The editor supports JavaScript functionality for elements within iframes. Use the modal to specify selectors for both the container and the element.

Step 4: Save and review changes

• Save Changes: After making your edits, ensure you save your changes within the editor.

• Review Modifications: Use the Active Changes panel to review all modifications made to iframe elements.

Remember that you cannot edit the content of an iframe if it is not on the same domain due to security restrictions.