---
schema_version: "1"
id: 07b3dbdf787d7ba57eea476ff0a370a56e3e4df7c911d0b3df6e045dc9f5f581
title: Reconfigure iframe Components
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/lex_prepare_vf_iframe.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.lex_prepare_vf_iframe.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 23b42ae9ce4183ac8e3646401a37194f3d6de5189fd48c1650dc328a28342e5c
description: When a URL is displayed in an inline frame (iframe) on a Visualforce page, it can cause errors in Lightning Experience. Sometimes your URL looks different than you want, or maybe the whole page doesn't load in Lightning Experience. Most iframes are compatible with Visualforce in Lightning Experience. However, if you preview your Visualforce page in Lightning Experience and don't like what you see, you can usually fix it.
products:
  - Salesforce Platform
  - Cross Cloud
release: "264"
---
# Reconfigure iframe Components

When a URL is displayed in an inline frame (iframe) on a Visualforce page, it can cause errors in Lightning Experience. Sometimes your URL looks different than you want, or maybe the whole page doesn't load in Lightning Experience. Most iframes are compatible with Visualforce in Lightning Experience. However, if you preview your Visualforce page in Lightning Experience and don't like what you see, you can usually fix it.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Group</strong>, <strong>Professional</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d191025e70">User Permissions
              Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d191025e70 ">To create, edit, or delete Visualforce pages:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d191025e70 ">Customize Application</td>

          </tr>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d191025e70 ">To create and save Lightning pages in the Lightning App Builder:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d191025e70 ">Customize Application</td>

          </tr>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d191025e70 ">To create and edit custom tabs:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d191025e70 ">Customize Application</td>

          </tr>
        </tbody>
      </table>

1. Locate the iframe in the Visualforce code.
    
    1. From Setup, enter Visualforce in the **Quick Find** box, then select **Visualforce Pages**.
    2. Click **Edit** next to the Visualforce page.
    3. Search the Visualforce markup for each of the following: apex:iframe, iframe, and apex:canvasApp.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-setup-264-0-0-production-enus/6f21df35-9ea0-4f53-ac94-45c3b5dfd5bc/images/icon_note.png)
    
    Note Address each instance that you find separately.
2. If you find any instances of apex:canvasApp, explore these [other options](https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_apps_where_they_appear.htm) to make it available in the UI.
3. If you find any instances of apex:iframe or iframe, find the source of the iframe.
    
    1. The source can be found after the src=. If you see $Page, the iframe is referencing another Visualforce page. Otherwise, the source is a URL.
    
    ```markup
    <apex:iframe src="{!$Page.AccountListView}"/>
    
    <iframe src="https://salesforce.com"/>
    ```
4. If the source of the iframe is a URL, use a custom web tab instead of the iframe.
    1. Identify the URL. View the Visualforce markup, and find the URL that follows src=.
    2. Remove the reference to the iframe from the markup. Be sure to copy the source URL.
        
        ```markup
        <apex:iframe src="https://www.salesforce.com"/>
        ```
    3. Save your changes.
    4. Follow [these](https://help.salesforce.com/articleView?id=creating_web_tabs.htm&type=5&language=en_US) instructions, using the same URL that you copied from the iframe in the Visualforce page.
5. If the source of the iframe is another Visualforce page, create a Lightning record page to display both Visualforce pages separately.
    1. Identify the Visualforce page. View the Visualforce markup, and find the page name that follows src=”$Page.
    2. Remove the reference to the iframe from the markup. Be sure to make note of the Visualforce page in the iframe.
        
        ```markup
        <apex:iframe src="{!$Page.AccountListView}"/>
        ```
    3. Go into the properties of each Visualforce page by clicking Edit. Select the **Available for Lightning Experience, Experience Builder sites, and the mobile app** checkbox. Check the checkbox for both Visualforce pages—the original page and the page embedded in the iframe.
        
        ![Screenshot of the "Available for Lightning Experience, Lightning Communities, and the mobile app" checkbox](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-setup-264-0-0-production-enus/6f21df35-9ea0-4f53-ac94-45c3b5dfd5bc/setup/images/VF_Available_Lightning.png)
    4. Use the Lightning App Builder to drag two Visualforce components onto the canvas.
    5. Save and activate your record page.