Add html to a wix page without the embed iframe


Why The Wix Iframe doesn't do the job

Wix has made creating a website simpler for many people but it has also taken away the control that HTML gives an author to format a website and to make it interact with other resources on the internet. They attempt to bridge the gap by facilitating the installation of apps like the one they have for Adsense, but this still limits users to only mainstream applications. Full control can only be really achieved by writing your own HTML and the Wix company has decided to limit the writing of your own code to an embedded iframe. Their explanation for this is that it has something to do with security, but it is obviously more about forcing users to do all their layout through the Wix UI which makes support more simple, and even more importantly makes it impossible to take your website to another ISP (Internet Service Provider), because it cannot be exported and is not written in HTML. There are 2 main problems with this arrangement.

  • View Port Scope Is Lost - An iframe does not have access to the outside view port environment. Therefore, any layout that is wider than a phone screen will not be responsive when viewed on a telephone. The iframe will revert to showing scrollbars making your website look quite terrible. This also, makes it difficult to pull in old pages from your previous website as HTML. Most likely they have done this by design.

  • Javascript Will Not Run In The Iframe - Services like Google Adsense cannot be run in the Wix Iframe and work correctly. There is no real DOM access. As previously mentioned Wix has an application for Adsense in particular to cover this gap, but if you desire to use any smaller companies tools you are out of luck (but not really see below). Our AdsP2p script is obviously an example of this kind of script.


For those with a sense of humor, you might find the following support thread on the Wix website entertaining, because it says "Problem Resolved", when the resolution was actually "No, you can't do this". I suppose that is a type of resolution ha ha.
Embed HTML Code Directly Without Iframe

Here is a another sad cry in the wilderness that no one every answered. Over six months old at the creating of this article and not a single response. You can almost hear the wolves howling in the background and the cold wind blowing. Can I write javascript in the wix iframe


How To Embed HTML Code Directly Into Wix Without An Iframe

Fortunately there is a back door into Wix, which the company was forced to create to support Google Analytics, and no it is not done through their developer mode. They actually still go through great pains to keep developers our of the main DOM (Document Object Model) by limiting the developer to a script language that looks like Jquery but doesn't have real DOM access (annotation is $W).

This back door is created by following the Wix instructions to create an HTML embed Wix HMTL Embed Iframe and putting an empty div in the code text, like so:



Putting the div there will make the iframe invisible, but satisfy the requirement to have code there. Publish this change. We now have a location in which to really write HTML to the DOM, and we will blow away the iframe shortly.

How To Embed HTML Code Directly Into Wix Without An Iframe Next go to the "Settings" screen in the Home UI. This is the UI before you actually go into your website to edit the layout. A photo is provided on the right.

  1. Go to settings and then click on custom code.

  2. Click on the big "Add Custom Code Button"

  3. Go to "Code Type" tab and click on "Essential"

  4. Go back to "Code Settings" tab and type in the name for your code

  5. Go to "Add Code to Pages" and choose your specific page where you dropped in your iframe

  6. Go to "Place Code in" and choose "Body-End"

  7. Go to "Paste the code snippet here" and paste in your own modified version of the code given below. The script tags are required in the paste.

  8. Push apply and you are done. Go do a forced refresh of your page and declare "ahoy mate" because you have boarded Wix.

An explanation of the code below

The code below is run when the timeout function fires 1 second after the page is loaded. The reason a timeout is used is because Wix is a React application so it gives no clear indication like a body onload or a body ready event to let a developer know when a page is finished being manipulated. The developer might need to modify this time depending on if the page is taking a long time to render, but 1 second generally works pretty well.

This code works by finding the desired iframe, destroying it and injecting either a script or html in its place.

The code demos 2 situations, with 2 iframes in one page, one frame is where a script is being loaded from another website, in this case AdsP2p, and the other frame is where HTML is added to the page. You can even put HTML in that specifies a deeper iframe, as in the case of an Adsense script, and it will work. These sections can be deleted or added as desired. The tricky part is that unfortunately there is no way in Wix to put an id on the iframe so it has to be found by position. Notice that the first section that ads the script destroys the iframe so when the iframes are queried again the second iframe is now the first iframe in the array. The index of the desired iframe will depend on how many iframes are in your page. Maybe not all iframes will be destroyed so the index is a parameter to allow for maximum flexibility in the subroutine.

I found that Wix does something strange to the injected script and that it was very stubborn to refresh if it changed on the remote server. Therefore I added a timestamp parameter to it to ensure it updates at least once a day. To test changes in real time you can relaunch an incognito window.

Keep in mind that you can debug all this using the regular browser developer tools.