You can now embed Html code or any website address into the site page.
Please share your feedback with us.
Please share your feedback with us.
13 Likes
Awesome! Waiting for the slideshows update. Hope it will come soon.
Nice.
Any chance of connecting to a dynamic page’s dataset?
Hi, I need to insert two script code, one in page (and I use Iframe) and one in tag HEAD. How can insert HTML code in tag HEAD?
Cannot wait for slideshows & header animations! I also want a “anchor to scroll” feature where you can scroll or swipe once and go to the next section. mostly used for 100% VH sections.
Yep. Saw that site you referenced in your comment. It was beautiful!
Hi Ricky,
You can add HTML code to the within the Tracking & Analytics Tools on the dashboard.
Hope that helps you out!
Hi,
Any chance to ad Thumbnails an a better zoom with the new HTML coding?
I am still in love with this https://www.ajax-zoom.com which would be a plug in for Editor X?
Hi
I have an other question: where could we learn more about HTML coding to improve a site but on Editor X?
Sweet!! Thanks @naamar !!!
I’m so glad to have this feature for Editor X, however I presume you’d have to do some kind of coding (if it is even currently possible at all?) to make it usable across any of the smaller breakpoints when your embedded widget is almost guaranteed to be wider than the smaller breakpoints in the first place?
For example, a normal wix video container element will automatically shrink to be the correct size to fit on screen across all the different breakpoints, but if you use the html element to insert a video playlist element the same size as that wix video container it will remain at that initial size across all views, meaning most of the html playlist element will be off screen and look terrible ruining the site design on any breakpoints with a smaller width than the widget size.
This will be a problem for the vast majority of widgets since they’re likely to be wider than the smallest breakpoint to start with (like the map in the example at the top of the page in fact, I can’t imagine that would look good at all in smaller mobile views hanging off the side of the page?).
Does anyone have any ideas on how to get around this, it’ll likely be a different problem depending on the proportions and complexity of any given widget so I can see that being a nightmare to get a simple catch-all coding fix?
The only real way around it I can think of right now is to add multiple copies of your html element and change the code of each to match a different screen size and then hide all but the right size copy on each different view… which would be REALLY time consuming and complicated, as well as the fact certain widgets might not allow you to change the proportions so easily? I’m stumped…
You can do this with a little bit of code. I’m pretty sure I got this idea from this forum ages ago to use on the classic editor, so you may already know this workaround and it won’t be helpful for what you want to do, but just in case:
For my example I’m embedding video playlsits from YouTube on my dynamic pages. So each dynamic page would show a different YouTube playlist. This is the only code I’m using:
$w.onReady( () => {
$w( “#dynamicDataset” ).onReady( () => {
const itemUrl = $w( ‘#dynamicDataset’ ).getCurrentItem().playlist;
$w( ‘#embed’ ).src = itemUrl;
} );
} );
the .playlist relates to a text field in my dataset called playlist which contains the different playlist urls like this random one I just found as an example:
https://www.youtube.com/embed/videoseries?list=PL4o29bINVT4EG_y-k5jGoOu3-Am8Nvi10
and the #embed part of the code is just the name I gave the html playlist element that I want to connect to dynamically, I think iFrame elements are called “html” by default. And that is all there is to it really.
I’ve also done the same thing with music players embedded from Bandcamp so that each different album or EP has it’s own dynamic page containing it’s own individual embedded music player so you can listen to that specific music on that specific page. I’m sure it’d work for Soundcloud or Spotify too if they have embedded widgets. It’s exactly the same code as I used above in the video playlist example though.
I don’t know specifically what the content is that you want to dynamically embed in your own situation, but it is probably similar enough to those 2 examples that we could easily figure it out if this is any use to you! 
I would love to be able to connect dynamically without using code in the future though, it would be much less work than this workaround for sure, but it works for now!
@travislbateman It’s out!
Snap to anchor scroll released today.
Hi,
waited for this as well but having issues with it…
I’m adding html iframe code which has a script element that includes:
< script src = “https://mozilla.github.io/pdf.js/build/pdf.js” ></ script >
I have the same code on Wix editor page and it works perfectly, however, on editor X when looking at the network activity I see that it does not access the javascript on “https://mozilla.github.io/pdf.js/build/…” i.e the function which located in this library does being invoked at all.
Have any clue what is the reason for that? is there a limitation for iframe for non-premium sites?
Can I download the library to wix site and refer to it in the html code instead?
Without having this work correctly, I will have to remain with the legacy wix editor 
thanks,
Guy
@christopher-derrell Thats only for repeaters or layouters, right!? I don’t think you can snap to scroll for sections.
Hi Guy,
I’m Naama from EditorX Product team. Could you please provide the full code which works ok in the Wix Editor but doesn’t work as planned in Editor X so we can further investigate.
Thanks
Hi,
the was solved after I’ve upgrade the plan to premium plan. Does this makes sense to you?
Still, is it possible to host the JS library in wix pubic folder or in other folder it will be possible to refer to this JS library in the html iframe?
Hi Kazraine,
Thanks for informative response above and I am glad there is a workaround for this. I am trying to display separate maps generated from code in a third party program for on each of my dynamic pages from a dataset. I have added the respective code in as an element into each of my list items (countries in my case) and setup a section of the correct dimensions to match the map generated by the third party app code. When I use your example script above it just displays the text so obviously I am making a mistake somewhere?
Please would you mind letting me know how I can achieve this.
Thanks and regards
Nick
great what about adding the code option also?
I’m not sure really depending on what the third party code is like/used for specifically. I just made up this quick example site for you to see using google maps to demonstrate how I’d use the code I put before to display maps in editor x:
https://themusingsofmaars.editorx.io/mysite-1/maps
So that first page shows your list of maps, but you won’t be able to actually show them here as embedded maps. If I was making this website for real I’d probably take a screenshot image of each map or a photo of the place and use that image as a thumbnail and link it to the dynamic pages instead of a simple button link as I’ve used here.
Then on the dynamic pages are the actual maps.
Codewise I literally just took the embed code from Google Maps to make a stock iframe element on the dynamic page such as:
Then in the page code for the dynamic (Title) page I used this:
$w.onReady( () => {
$w( " #dynamicDataset " ).onReady( () => {
const itemUrl = $w( ’ #dynamicDataset ’ ).getCurrentItem().embed;
$w( ’ #m aps’ ).src = itemUrl;
} );
} );
And this time
maps = the google maps iframe element
embed = the title of my text field in the database
In that database I used the map codes generated from Google Maps except you only include the part from inside the “”. So in the example map above I’d enter just this part:
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3036.9587739884755!2d116.56818621556353!3d40.43191176263967!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35f121d7687f2ccf%3A0xd040259b950522df!2sGreat%20Wall%20of%20China!5e0!3m2!1sen!2suk!4v1613572188817!5m2!1sen!2suk
So that’s how I made my quick demonstration map site, but depending on what third party stuff you are using for your maps I’m not sure how that would translate for your purposes? But perhaps it’ll help us figure out what you need to do next in your situation and we can go from there!