I have an html widget where I want the user to tap on an answer. Again this is all part of the embed. My problem is that I want this to trigger an action of a hype inserted shape rectangle to come into view. I don’t know how to implement this. If I put the shape on top of the interactive portion of the widget the interactive portion can’t be triggered. But at the same time I have no way of getting the shape to appear. I tried removing the opacity of the shape but that doesn’t solve it because it is still on top of the widget blocking the interaction. I thought about creating a tap action on the entire widget itself to create a trigger but I can’t get it to work because the entire widget functions on its own. How do I solve this? I want both the rectangle to appear and the html widget to react. How do I get both to work? See attached link. convo test.hype.zip (10.4 KB)
Hi Mark!
Use the “Display” property instead for your rectangle. Unlike a change in opacity “Display” removes the rectangle from interaction.
Thanks for your response. So yes, I’m aware of display feature of “Hidden” and I tried this method already but it doesn’t solve the issue. I need the html widget to trigger the rounded rectangle to activate. Again, when someone clicks on the html widget’s little answer box I then want the rectangle to activate. I intend to use the rectangle to indicate if the person chose the right/wrong answer after they selected the answer from the html widget embed. But I need both to activate at the same time. How do I do this? I don’t want the user to have to tap twice on the screen for both to react. I need both to react at the same time. How do I do this?
Hmm… there are a variety of techniques but I’m not sure how well they will work with your setup. They all require code.
- Have the iframe communicate to the parent’s HYPE object. Child iframes can talk to a parent, so you would use a call like
parent.window.HYPE.documents["mydocumentname"].startTimelineNamed('timelineName'). However there are many issues with this approach:
a. I assume you don’t have enough access in typeform to trigger javascript when things happen
b. Since typeform is from a different domain I don’t think you can use parent.window due to CORS - Use
postMessage()to communicate either from the child to parent or vice versa. The issue with this approach is:
a. You need to be able to run javascript on the child iframe that can either accept or respond to events and perform something in typeform. If there’s a typeform API then this might be possible, but you may also run into 1a if you are going from child to parent. - Have the mouse event hit both elements at once. I’m not sure there’s a particular way to do this with propagation passthrough, given they are in entirely different view trees. You might be able to have the parent handle the event, and then fake an event going to the iframe. However as the iframe itself is on a different domain you might hit CORS issues trying to dispatch fake events as well… I’ve never tried this.
In short, I don’t know a good way to do this 
, though it is conceivable one of those three methods might be a workable solution.
Thanks for your very detailed answer. In the interim I seemed to have found an alternative solution to typeform chatbot, that might work. However, I can’t figure out to expand the html widget’s embed to fill the page without zooming in on it. I’m not good with coding or even working with iframes in general. Do you know how to fix this? I changed the width and height in the iframe code which centered it, but the embed is still small, relative to the size of the scene. Do you know how to expand it without increasing the scale? See attached link. Animal Quiz.hype.zip (10.3 KB)
It depends what you’re trying to do, but a few things to note about your HTML Widget that has its inner html set to:
<iframe src="https://chat-forms.com/forms/1589969900063-l0w/index.html?embedded=true" width="1536" height="2048
" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
- You probably want to get rid of the newline character after the 2048
- You can set the iframe’s width/height to
100%instead of a static number, otherwise it will always be that - HTML Widgets themselves are iframes, so for a simple case like this you can just instead set the HTML Widget to use a “Specified URL” in the element inspector so you don’t embed an iframe inside an iframe.
Finally once those are setup, you should be able to make use of Flexible Layout. I see currently in the Scene Inspector it is only set to be width sizable. I also see for the element you do not have any of the sizing/pins setup.
Thanks so much!