Receiving a variable through a custom event

Question

Hi all,
I am quite a newbie in programming and am stuck. Maybe one of you very kind people could help me.
I am trying to integrate Guidedtrack in a website builder tool (wix) via an iframe and would also like the website to be able to exchange data with Guidedtrack. I already managed to send data from the website to the html element that the iframe is embedded in.
However, I am not sure how to passe the data on to Guidedtrack. I was looking at the custom *events function in the manual but don't really understand how to implement it. https://docs.google.com/document/d/1RKblBEwG7BrMMeTXFITSNDJQsszHotqaE_q-E9q0QHA/view#heading=h.6ne8k44qlu4

Can someone show me in an example how that works? I don't have any knowledge of Javascript and am trying to figure out everything while doing. Thanks a lot!

Answer 1

Hi,

If you are embedding the GuidedTrack program with an iframe, you would not be using custom events. Instead, what you can do is to reload the program running in the iframe passing whatever information you need via url parameters.

This is a program that captures the name and last name of a person and greets them: https://www.guidedtrack.com/programs/16334/edit

Now, let's say that in your site there is another place where the person can enter their name and you want to pass it to your GuidedTrack program when they click a button. This is what the html code could look like:

<button onclick="myFunction()">Send name to GuidedTrack</button>
<iframe id='iframeid' src="http://www.guidedtrack.com/programs/ur9vkak/run" width="100%" height="600px"></iframe>

And this is the myFunction() code, which reloads the same program but assigning a value to the program variables userName and userLastName:

    <script>
function myFunction() {
    document.getElementById('iframeid').src = "http://www.guidedtrack.com/programs/ur9vkak/run?userName=Peter&userLastName=Jackson" ;
}
</script>

In the code of the GuidedTrack program, you can see that at the very beginning there is a *startup event:

*events
*startup
	*if: userName
		*goto: greeting
			*reset

When you initially load the program but have not yet clicked the button, userName has not been defined so this block of code does nothing and the program goes on to asking the questions. Anytime that you click the external button, the program will reload and it will take the userName and userLastName that have been passed as url parameters (with values "Peter" and "Jackson"). When you do that, the code under *startup gets executed immediately so in this case, the program flow will go to the final greeting page.

Comments

Thanks for the answer, belen! Very helpful!

---

So I ended up integration GuidedTrack as an embedded HTML code instead of an iFrame and used custom events to receive data because I don't want the data passed on be openly readable and it worked! Thanks

My follow up question now is: Is there any method to pass some data back to the website the GuidedTrack is embedded in? Thank you very much

---

Yes, you should be able to pass data back to the page that the program is embedded in using *trigger. This would be the GT code:

*trigger: updateName
   *send: { "name" -> userName, "lastName" -> userLastName }

And the javascript code could be something like this (or whatever you choose to do with the received data):

        $(window).on('updateName', function(event, data) {alert(data.userName); alert(data.lastName)});

---

I tried it with trigger and it works, thank you!