Hi,
We have embedded charity payment provider into our wix web page but we have a small issues with UX. When user completes first step and clicks NEXT button, content of the iframe changes but user remains on the bottom of the page. On mobile this creates a state when user sees only white screen unless he scrolls top.
I’m looking for an option to trigger scroll to the top when button is pressed or when content of an iframe is changed. Content of an iframe is being loaded in random amount of time, depends on the equipment, is there any way to wait for content to be resolved and hook to what is displayed on the screen? Or is there any way to trigger scroll even when certain API call is made? I would like to note that while content of the iframe feed from src link is changing page itself doesn’t refresh. Thanks in advance for all the answers!
Adding code to an HTML component is not a part of the Corvid product (which is what this forum is about). The basics of an HTML component is to put any HTML code in it. That code can be copied from any source that you want, but you need to know the exact code to put there (which is not related to Corvid ).
Refer to the HtmlComponent API documentation for more information. Look at the article Corvid: Working with the HTML Element for an explanation on how to use.
Here are a couple of examples that demonstrate how to use an HtmlComponent:
Example: Fullscreen with HtmlComponent
Example: Multiple Markers Google Maps
For the script itself, y ou will need to check with the service provider to find out how to get it work.
Also, if possible, a more secure way to handle web service requests is by using backend (server-side) code. Using backend code you can secure your passwords, API keys, and other secret information. The article Accessing 3rd Party Services explains how this is done. I recommend checking with the service provider to see if they provide a REST interface.
Using this method, you will also have more control of the site’s UX.
Hi, thank you for the answer. Let me clarify, I’m using wix option to get the content of an iframe into html element.
<iframe src="Link_goes_here" style="width: 100%;height: 100%;border: 0;"> <p>Your browser does not support iframes.</p> </iframe> and everything works. Content is loaded properly but first page of the form is double the hight of the second page so when user proceeds to second screen page appears to be blank but in fact the content is located on the top of the page. I’m looking for an answer is it possible to scroll the page to the top when user proceeds to next step.
@Vest Rivian
I understand what you are doing.
Refer to the articles that I linked to for how to communicate (message passing) with the code in the HtmlComponent.
You can set an anchor at the top of the page, and w hen you receive the appropriate message from your Html script, you can scrollTo() the anchor.
Again, it is highly recommended to use the REST interface if available.
@yisrael-wix Again, thank you. I will try to implement your suggestion!
Hi again, still some issues here. I ran out of ideas. I have implemented onMessage function to the html element and I receive msg when element is loaded but I have no idea how to trigger messages afterwards.
< script type = “text/javascript” >
function init () {
window . parent . postMessage ( “Loaded” , “*” );
}
</ script >
< iframe onload = " init ();" src = “linkGoesHere” style = “width: 100%;height: 1200px;border: 0;” > < p > Your browser does not support iframes. </ p > </ iframe >
$w.onReady(function () {
$w(“#html1”).onMessage((event) => {
console.log(Message received by page code: ${event.data});
});
});
at this point when access the page, message console log is displayed, content fed from src link is displayed and what now? When I click ‘Continue’ button page is not reloaded, element is untouched only thing that happens is a API call that changes content. init function is not triggered. Moreover this postMessage method nor onReady() do not check if the content of iframe is still loading or not. Is there a way to wait for html fed by the src link to be resolved and access it by something like Document.getElementById()?
