this is the url:
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)
your embedcode is not valid. try this:
<div
class="typeform-widget"
data-url="https://cp-pmna.typeform.com/to/PBpUwy"
data-transparency="100"
data-hide-headers=true
data-hide-footer=true
style="width: 600px; height: 1000px;">
</div>
<script>
(function() {
var qs,js,q,s,d=document,
gi=d.getElementById,
ce=d.createElement,
gt=d.getElementsByTagName,
id="typef_orm",
b="https://embed.typeform.com/";
if(!gi.call(d,id)) {
js=ce.call(d,"script");
js.id=id;
js.src=b+"embed.js";
q=gt.call(d,"script")[0];
q.parentNode.insertBefore(js,q)
}
})()
</script>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 ...
1 Like
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!!
1 Like
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.
Stop loading of HTML widget.zip (105.9 KB)
Thanks!
Hyper
You could add the HTML by JS later. The portion in the body that is declared to be copied and pasted in the regular HTML file Hype produces.
As a feature request a document loader that doesn’t fire immediately would be A nice addition to Hype.
1 Like
Thanks Max. That is a great suggestion. I imagine that if I can do that, I can trigger the Javascript using any number of “Run Javascript” commands!
I would need to do this for 3 separate Widgets on the page and 1 Widget on the next scene (to help it preload).
Can you suggest how I might do that? Regrettably, I am not a JS coder even as much as after starting to use Tumult, I wish I were 
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 …
1 Like
Thank you Hans - works as suggested.
Here is the JS code for future users:
var widElem = document.getElementById(“widget”);
widElem.getElementsByTagName(“iframe”)[0].setAttribute(“src”, “https://www.website.com”)
3 Likes
Related question – how can one load an HTML Widget on Scene 2 while you are still on Scene 1?
Thank you,
Hyper
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:)
1 Like
display:none might not work as it tells the browser that it can potentially dismiss the object as it is not in the render list. Use rather something like visibility instead.
2 Likes
The persistent symbol placed on the next scene did not preload the HTML widget on the next scene. See this doc. On scene 1 you can see the website is loaded, but when you click the Next Scene button, it still takes a few seconds to load (its not already loaded) -- which for my usecase takes even longer as it is heavier.
Preloading on different scene.zip (30.5 KB)
There are quite a few posts on preloading the next scene but I could not find any that solves the problem.
- I tried using this one but all it does is immediately load the next scene on the current scene, as far as I can tell.
hypeDocument.showNextScene();
nextScene = $(".HYPE_scene").filter(":visible");
nextScene.toggle();
hypeDocument.showPreviousScene();
- I am curious what Hans meant here:
Any specific guidance would be most appreciated.
Thanks
Hyper
in your example you ran ‘loadcreatewidget’ on the second scene again. which means reassigning the src for the iFrame … so it’ll load again. this makes no sense …
edit: it seems in most cases moving an iFrame around from node to node results in reloading. this behaviour is not hype-related. so regarding preloading it might not be a good idea to do so. a first googlesearch prompted the use of ‘adoptNode’, but it does not seem be a reliable hack …
1 Like
Yes – no need to run ‘loadcreatewidget’ again. My bad.
Got it – interesting behavior of iFrame visavis change of nodes.
Thanks for giving it a shot and finding out some more info.