Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Jul 30, 2020

New Feature Alert: Html iFrame

You can now embed Html code or any website address into the site page.


Please share your feedback with us.


29 comments
Jul 30, 2020

Awesome! Waiting for the slideshows update. Hope it will come soon.

Jul 30, 2020

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.

Jul 30, 2020

Yep. Saw that site you referenced in your comment. It was beautiful!

@Trav It's out! Snap to anchor scroll released today.

Load more replies
Jul 30, 2020

Nice. Any chance of connecting to a dynamic page's dataset?

Aug 04, 2020

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!

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

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:


<iframe src="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" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>


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('#maps').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! :)

Jul 30, 2020Edited: Jul 30, 2020

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?


Aug 02, 2020

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?

Aug 02, 2020

Hi

I have an other question: where could we learn more about HTML coding to improve a site but on Editor X?

Aug 04, 2020Edited: Aug 04, 2020

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...

Oct 03, 2020

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

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

Oct 06, 2020

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 Krista

This function used to be there for me. But right now it has a problem so it looks like this instead of having the field for pasting code.


@Lasse Wind I'm seeing the same issue. Were you able to find a solution? Thanks.

Is there an update on the HTML iframe working? I've tried adding code and there no longer is a box to add code to.

I've opened a critical bug two days ago, I hope it will be fixed soon. However, maybe more people need to do the same in order to push it...

I made a support ticket yesterday (waited to see if it fixed itself). How do you make this critical bug thing?

@Lasse Wind

I do this only when it is really critical, like I had to fix something and I couldn't...

Help->report a Bug and then:


Thanks. Good call. Yes, I’ll open a case as well.

I'm happy to report that we are back in business! I just checked and it is now back working.

Amazing! Thats true. Thank you to whoever fixed this.

Nice to see that bugs are being handled

Editor X

Design your boldest creations.