> For the complete documentation index, see [llms.txt](https://docs.abtasty.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.