header-logo
Getting started with WixBuild your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.
Creating a websiteRead how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.
Account & billingReview your account settings, manage your subscriptions and plans and understand your invoices.
Using the Wix mobile appsUse our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch.
Connecting a domainFollow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.
Managing your businessGet tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.
Promoting your siteLearn to make your site more visible promoting it on search engines, sending emails and running paid ads. Improve your online presence with practical tips.
Studio, Partners & EnterpriseGet the most out of your Studio or Enterprise account with advanced features that'll help you work more efficiently.
Need more help?Find solutions for site performance and technical issues, learn about issues we’re working to fix or contact us for help.
placeholder-preview-image
Wix LearnImprove your skills with our courses and tutorials.
Wix BlogGet tips for web design, marketing and more.
SEO Learning HubLearn to increase organic site traffic from search engines.
Website developmentBuild a custom site using our full-stack platform.
Hire a ProfessionalGet matched with a specialist to help you reach your goals.
placeholder-preview-image
In this article
  • Embedding code or a site
  • Adjusting the sizing of the displayed content
  • Guidelines and limitations
  • Guidelines
  • Limitations
  1. Home
  2. Studio, Partners & Enterprise
  3. Wix Studio
  4. Using the Wix Studio Editor
  5. Adding elements in the Studio Editor
  6. Studio Editor: Adding an HTML iFrame Element

Studio Editor: Adding an HTML iFrame Element

In this article
  • Embedding code or a site
  • Adjusting the sizing of the displayed content
  • Guidelines and limitations
  • Guidelines
  • Limitations
Display visual content from external servers and other sources in an HTML iFrame. Create a weather widget, a stock widget, a calendar or any other custom element that comes to mind. You can either embed a code snippet or an external URL. 
Example of a weather widget on a Studio Editor site, embedded using the HTML iFrame

Embedding code or a site

Add an iFrame to your client's site directly from the Add Elements panel. Choose whether you want to embed code or a site, then paste your code / the web address so it appears in the iFrame.
Important:
Make sure to read our guidelines and limitations before embedding your code. 

To add an HTML iFrame:

  1. Click Add Elements  on the left side of the editor.
  2. Click Embed & Social.
  3. Select an element to add it to the page, then follow the relevant steps below:
Screenshot showing the Studio Editor, embedding a website address in the iFrame element.

Adjusting the sizing of the displayed content

Embedded elements often include pre-defined width and height in pixels, defined by the service they were acquired from, as in the example below:  
1<iframe width="560" height="315" 
2       src="https://www.wix.com/studio/academy" 
3        frameborder="0">
4</iframe>
These settings could potentially crop the content if the iFrame container (on the canvas) is smaller than 560 px * 315 px. To ensure the content does not get cropped, replace the px values with percentage units and set them to 100% as shown below:  
1<iframe width="100%" height="100%" 
2       src="https://www.wix.com/studio/academy" 
3        frameborder="0">
4</iframe>
Editing embedded code in the Studio Editor, changing the width and height in the code to 100%

Guidelines and limitations

Read the following guidelines and limitations to learn how to properly embed code into the HTML iFrame, whether it's a website address or custom code. 

Guidelines

  • Make sure that your code contains HTTPS, not HTTP, or it will not be displayed on your live site.
  • Always make sure the code you are embedding is up to date and HTML5 compatible. Most browsers don't display pages and scripts properly if they were written using older versions of HTML.
  • HTML code contains the core elements of the page, but the design settings and other complex functionalities are usually stored separately. Therefore, some elements may not function or look the same if the relevant elements aren’t included as a reference within the HTML code, for example the CSS and JS files.
  • If you are not sure how to use the target attribute, read about it here or contact the code creator.

Limitations

Code within the HTML element is displayed on your client's site within a sandboxed iFrame. Using a sandbox protects visitors from potential side effects of custom code.
Usually, a sandboxed iFrame blocks the following:
  • Using Browser APIs 
  • Content using plugins (via <embed>, <object>, <applet>, or other) 
  • Automatically triggered features (such as automatically playing a video or automatically focusing a form control)
However, we have re-enabled the following abilities for your custom code according to the W3C specifications : 
SandboxDescription
allow-same-origin
Re-enables third-party site scripts/content
allow-forms
Re-enables form submission
allow-popups
Re-enables popups
allow-scripts 
Re-enables custom JavaScript code
allow-pointer-lock
Re-enables grabbing the cursor

Did this help?

|
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
Start Now

Helpmate

Hello

Need a bit more guidance?
Unlock personalized helpLog in to get the most out of Helpmate.