Hello! I am trying to embed an educational game into my webapp via the HTML component. I have successfully gotten the game embedded with HTML code “iframe src = ‘{URL}’ /iframe” (avoiding the <> since it doesn’t appear in this forum - URL being where the game is hosted). I want to start a workflow “On Click” for the game (essentially when user has started - with a Pass Through Condition attached to variable to avoid workflow operating when user is playing the game). However, before even applying the filter, when clicking into the game’s frame, the workflow does not start (nothing appearing in the log).
Does anyone know why this problem is occurring or might have a suggested solution (ideally want to avoid creating a custom component)? Please let me know, thank you so much!
You’re right, I’m not sure why but click is not triggered on the iframe element
In the meantime I see 2 alternatives
Add a sort of transparent sheet on top of the iframe registering the click, you can even choose to not render the sheet anymore after the first click
Use the HTML element instead, create the iframe yourself and the js code to update your variable or do whatever is needed wwLib.wwVariable.updateValue(<variable-id>, <value>)
I’d prefer the second option since the embedded HTML is already binded to use custom JS code (to make it dynamic) with the iframe. However, the objective of the workflow after the click would be to send POST API (Xano) request - essentially to identify the user as starting the “task”. I am afraid I don’t know how I could do that with just updating a value of a variable. Is there anyway you could provide more guidance? Such as a code template for the Xano POST requests if possible.
But now I’m wondering, maybe you don’t need that at all, maybe try first to attach an on click workflow on a fresh HTML element where you put the iframe inside. (You may have to set a correct height for the iframe to show up)
Can you elaborate on what you mean by a fresh HTML element? I believe this is accomplishing putting the iframe inside as you suggested, but not certain that is what you were thinking. I imagine I would just need to now add the following code (wwLib.executeWorkflow()) into this snippet but please let me know if otherwise!
Lastly, I have not found a way where WeWeb can grab a popup (e.g., when game is successfully completed) from a embedded URL - do you know of any way to do this? I will be attending OH next week to discuss further, my apologies for asking so much!
@Alexis - I had tried adding the following code to the custom JS above but it causes my browser to crash or doesn’t work as expected (workflow is not initiated). Is this where I am supposed to implement wwLib.executeWorkflow() or is it supposed to be in the console as shown in this video (https://www.youtube.com/watch?v=XFqtSvZmx6c)? Really appreciate the help!
let baseHTML = "<iframe src = '{URL}' onload='executeWorkflowFunction()'></iframe> <script> function executeWorkflowFunction() {wwLib.executeWorkflow('03e40739-7ec7-4261-adea-09e0723cb60e');}</script>"
You had suggested the wwLib.executeWorkflow(<your-global-workflow-id>) has to be added as a Custom JS action within the global workflow to be executed. Likely due to my lack of understanding of global functions, but how/why do I add the Custom JS in the workflow in which I want to use to initiate itself? To reiterate the objective, I want to a user to be able to click within an iframe (embedded game) which calls a workflow to send an API (acknowledging the user started the task).
Please let me know your thoughts, thank you very much!
Hey @Alexis! I had tried doing the first option where I have a container with HTML element within it which has the “On Click” workflow, but that is not working either Can you please elaborate on how you would implement this solution and the second option please? Thank you!
For the click to be honest I didn’t figure out how to do it. I think you just can’t with a cross domain embed as a security constraint.
It’s why I had in mind the first solution if it’s just to know if someone clicked once in the iframe area, by positionning a second element in absolute on top of the iframe and listening the click on it but then it will block the click on the iframe so I’m not sure about how to handle this case
Hi Alexis! Thank you very much for looking further into this. No worries there isn’t a solution - please let me know if anything changes in the future from the WeWeb side that would solve this use case. Thank you again for all the help, have a great night!
Can you please elaborate on how you would implement this solution and the second option please? Thank you!