# 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](/web-experimentation-and-personalization/editors-and-widget/visual-editor/shadow-doms-and-iframes/understanding-iframes.md) 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 <a href="#h_01jk7zs2jr34cn2dfdgyeb9vah" id="h_01jk7zs2jr34cn2dfdgyeb9vah"></a>

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 <a href="#h_01jk7zs2jr408jp28tkbccktdc" id="h_01jk7zs2jr408jp28tkbccktdc"></a>

### Step 1: Access the visual editor <a href="#h_01jk7zs2jr1s3p87tnqkd9jqa6" id="h_01jk7zs2jr1s3p87tnqkd9jqa6"></a>

* 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 <a href="#h_01jk7zs2jr6pv9bw61pgyqmdeh" id="h_01jk7zs2jr6pv9bw61pgyqmdeh"></a>

* Add Widgets: You can add specific predefined widgets to iframes. Note that [custom widgets](/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/custom-widget/custom-widgets-global-usage-and-information.md) 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.

<img src="/files/bw9UhVMM6vGqTfIG045n" alt="" width="563">

* Modify Styles: Use the CSS Variation Modal to apply styles specifically to iframe elements.
  * Declare a container for the iframe

<img src="/files/TIBUrqlESJhyJhq9D2kK" alt="" width="375">

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

<figure><img src="/files/t7DCJJYltVb7q9xBQTjR" alt="" width="375"><figcaption></figcaption></figure>

<img src="/files/MhIndUZs4XeHTWu09gsp" alt="" width="356">

<img src="/files/5YxqHH2u88BT9vgeC4vK" alt="" width="375">

### Step 3: Apply JavaScript <a href="#h_01jk7zs2js8y562v39vv141ery" id="h_01jk7zs2js8y562v39vv141ery"></a>

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

<img src="/files/KnfMlwNpXTbzGPEa4dyG" alt="" width="563">

### Step 4: Save and review changes <a href="#h_01jk7zs2jsyv1k6v83zwc0y0cq" id="h_01jk7zs2jsyv1k6v83zwc0y0cq"></a>

* 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.

<img src="/files/1zqdnFCXg7c9ZFLZ7GVx" alt="" width="375">

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

<img src="/files/IlwV92A9IUIw7Jp1zBVS" alt="" width="375">


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/visual-editor/shadow-doms-and-iframes/how-to-edit-iframes-in-the-visual-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.