Wix Harmony Editor: Embedding a Link or HTML Code
Show content from other platforms right on your site by embedding a code snippet or URL. Use it to bring in helpful widgets like a countdown timer or a weather forecast, or display content from another site directly on your page — so everything your visitors need is in one place.
Embedding code or a site
Head over to the Add Elements panel to add a new embed to your site. Choose whether you want to embed a code snippet or display content from an external URL, then set it up as needed.
Important:
Make sure to read our guidelines before embedding your code or link.
To add an embed:
Click + Add at the top left of the editor.
Select Elements.
Hover over the More Options icon
, then scroll down and click Embed
.
Drag the Embed code or Embed a site element onto the page.
Click the Settings icon
on the action bar.
Set up the link or code you'd like to embed:
Embed code
Embed code for a social media button, a weather widget or any other custom element that comes to mind. For example, you can embed a YouTube subscribe button so visitors can subscribe to your channel directly from your site.
Set up the code you want to embed using the available settings:
Enter HTML embed code: Paste your HTML code into the text box.
Accessible name: Add a short and unique description for the code you're embedding so it's accessible to visitors using assistive technology. It won’t be visible on your site.
Cookies and similar technologies set by your code: Select the correct category for the code you're embedding (e.g. essential, third-party data, advertising etc.)
Note: We cannot provide support for external codes that were not created or tested with Wix. If you are experiencing an issue with your code snippet, please contact the provider directly.
Embed a site
Display an external page from another site by embedding it directly on your site. Use this to add live feeds, online tools, or display web pages alongside your own content.
Set up the link you want to embed using the available settings:
Link: Enter the URL you'd like to show on your site. Make sure the address starts with HTTPS (HTTP sites won't be displayed).
Accessible name: Add a short and unique description for the link you're embedding so it's accessible to visitors using assistive technology. It won’t be visible on your site.
Cookies and similar technologies set by your code: Select the correct category for the link you're embedding (e.g. essential, third-party data, advertising etc.)
Note: Some sites have security policies that forbid them from being embedded on external platforms. These sites might not appear in the editor or your live site.
Adjusting the sizing of the displayed content
When you add embed code from another service, it often includes fixed width and height values in pixels, just like in the example below.
<iframe width="560" height="315"
src="https://www.wix.com"
frameborder="0">
</iframe>If your iFrame container is smaller than those values, part of your content may get cut off on the page. For a smoother fit, replace the pixel values with percentages set to 100%. This way, your embedded content automatically resizes to match the space you give it.
<iframe width="100%" height="100%"
src="https://www.wix.com"
frameborder="0">
</iframe>Guidelines
Before embedding your code or link into the iFrame, we recommend reading the following guidelines.
Code
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.
Link
If you are not sure how to use the target attribute, read about it here or contact the code creator.
Make sure that your link contains HTTPS, not HTTP, or it will not be displayed on your live site.
Troubleshooting your embed
Encountered issues while embedding your code or link? Click an issue below to learn more about it and get troubleshooting steps.
Important:
We cannot provide support for external code that was not created or tested by Wix. If the below steps do not resolve the issue with your code snippet, please contact the provider directly.
The content in my embed looks cropped
This might happen when your iFrame is too small for the content.
If a different height and width are defined in the widget's code, it affects the way your content looks in the iFrame.
When the iFrame is too small, a scrollbar is automatically added so visitors can see the rest of the widget; Scrollbars tend to overlap other elements, so make sure your iFrame is big enough to display all the content without scrollbars.
To solve this issue, adjust the size of the iFrame by dragging the handles around the element.
Elements don't look / function as they should
HTML code contains the core elements of a 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.
The links in my iFrame are not working
In most cases, links don't work if they're set to open in a new tab or window. Check the code you entered to see if that's the issue.
If unsure, contact the third-party provider who wrote the code.
The content in my iFrame is not responsive to different screen sizes
The iFrame itself is not responsive. This might make your widget not responsive to different screen sizes, even if it's defined in the code.
My iFrame isn't displaying the website
Some sites have security policies that forbid them from being embedded on external platforms (such as Wix). These sites might not appear in the Editor and / or your live site after you paste the link into the HTML element.
Need A Professional Website?
Contact Us Today!
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected