I have inserted an html widget close to the bottom of my page. This is causing the page to jump down the page to the widget immediately after opening the page. I want the user to spend some time enjoying the content at the top of the page before jumping down to the widget. Is there a way to delay loading of the widget?
I tried various methods. ie. putting it on it’s own paused timeline at about the 15 second mark and doing an “on viewport” jump to the 15 second mark. I also tried making it a symbol and moving it to the 15 second mark. Nothing seems to work. The widget still loads on the main timeline even though it should be delayed. I also tried pausing the main timeline and putting the symbol after that. Still doesn’t work! Any suggestions?
I tried putting the widget on it’s own timeline.
If the element is set at opacity 0% at 15 sec mark and 100% opacity at the 1.15 . Why does it show on the first frame at all? And it still loads on the main timeline.
I also tried putting it on its own paused timeline with it hidden on the first frame.
It still jumps to that spot in the page when the page is loaded even though you can’t see it. IntroPageV2.hype.zip (21.4 KB)
It looks like the widget is kind of taking everything over, even if it is embedded simply as the URL of the typeform widget. It is a bit aggressive in how it takes over a page once loaded.
I think you should structure this in such a way that you have your onboarding/messaging then devote an entire scene to the embedded Typeform widget so it has room to breathe. This will also likely improve how this works on mobile devices.
You are correct Hans. Your embed code sort of worked but now there are double scroll bars which I think may be coming from the actual embedded site. The client’s objective however was to have animations that would play throughout the entire page so that the embedded quiz item would look like it was integrated into the entire scene. Is there a way to make a quiz scene load on top of an an existing scene? I was originally hoping to do the actual quiz in hype as well and have it run inside the widget. I was close to success but I ran into the obstacle at the end in performing javascript to deliver score results. Seems not being fluent in javascript is making things a challenge!
use a regular rectangle (div) with 'overflow visible' to embed the form.
sure ... i'd think the easiest approach is to follow @Daniel's advice though
hype is a great dooropener, but next steps almost always require further knowledge: the www offers endless possibilities to look things up and learn ...
You and Daniel are so patient!
Thank you so much for your information and help, both of you.
I believe I have this working now with your code Hans.
Daniel’s code I got to work but the box that displayed the embedded item was super small!
On estimate it looked to be around 200x200 px wide. No matter what settings I put in for the width and height it was the same.
With the result of yours Hans. I was able to hide the second set of scroll bars by following another suggestion on this forum to group the item, make it a bit small then make “hidden”. After all this i am still not happy with the look of the end result (the embedded quiz is super ugly). I may go back to the drawing board and try to continue making my own quiz in hype and use that. It is way more customizable and will be a nicer looking end product if I can get it to function properly. Will just have to keep learning!!
I am posting here because it is related to delaying the “actual” loading of an HTML Widget.
Is there a way to stop the actual loading (i.e. fetching of data, images from server) of a Hidden HTML widget (reason is that that loading is slowing down the loading of the page and the HTML widget is not needed immediately on the page) and for loading to be triggered:
Either based on passing of X seconds
Preferably, a timeline action.
On Enter Viewport within a certain section (like an invisible object that triggers loading in a section below the top)
Here is the e.g. file.
In this doc, the user will scroll down and click the “HTML Widgets” button to make them Visible.
you can let the url of the widget blank.
give an id or class to that widget.
set a data-attribute to the widget holding the url.
whenever you want:
query the widget.
get the data-attribute-url
assign the src -> url to the first iFrame-element that the widget (it’s a div -wrapper) includes …
you’ll need some kind of shadowdom. this may work without custom scripting. place your widget within a persistent symbol. place the symbol on the scene you like to use as preloader and set display to none (or hide it with any other strategy).
on the targetscene the placed widget should display:)