Scoping iframe improvements

[ianchandlercampbell]

Summary

There are three improvements to iframes we could consider to (a) expand its functions for researchers who wish to take advantage of our spam-prevention features (e.g., video consent) for studies that would otherwise be external and (b) improve the family experience using them.

Proposed Feature 1:

Allow researchers to modify the names of the "child" and "response" URL query parameters to allow them to pass this information to sites that accept query strings but are less flexible on the naming of these queries (as opposed to Qualtrics, which allows you to set embedded data parameters for customized query strings-- you can name them whatever you want and Qualtrics can be set to accept them).

Feature 1 Details:

• Youcanbookme: Some researchers have requested this issue for the site youcanbookme: lookit/lookit-api#1405, which they believe would be fixed by having the option to capitalize the parameters. It appears this can be set to a hidden question so the participant doesn't see the information passed along, according to these researchers.

• Calendly: Calendly allows custom information to be "pre-populated" using query strings in a custom scheduling question created in the event named in the following format: a1, a2, a3... [(https://help.calendly.com/hc/en-us/articles/226766767-Pre-populate-invitee-information-on-the-scheduling-page#h_0f5dfae8-723f-4ba2-b96e-26b57b4b51fc)]. This would be visible to the participant when they book (this might be acceptable as these are study specific child ID and response ID, not global IDs?).

Progress update:

This feature has been partially completed by lookit/ember-lookit-frameplayer#376. Specifically, it is now possible to add custom URL query parameter names and values to iframe frame links using the generateProperties frame parameter to generate the iframeSrc. For example, the code below adds a query parameter called 'a1', which is the child ID, and 'a2', which is the response ID, to the end of the iframe Calendly link.

"iframe-calendly": {
  "kind": "exp-lookit-iframe",
  "iframeHeight": "1000px",
  "iframeWidth": "100%",
  "optionalText": "Please schedule a time to participate. When you are finished, click the green 'Next' button to move on.",
  "showPreviousButton": false,
  "generateProperties": "function(expData, sequence, child, pastSessions, conditions) { return { 'iframeSrc': `https://calendly.com/example-link/30min?a1=${pastSessions[0].get('hash_child_id')}&a2=${pastSessions[0].get('id')}` }; }"
}

The reason this feature is only partially complete is because:

1. We still need to add the ability to customize the parameter names to the study's exit URL, and
2. We might want to provide parameters for customizing the child/response ID query parameter names in the iframe frame, so that the researcher could do this:

"iframe-calendly": {
  "kind": "exp-lookit-iframe",
  "iframeSrc": "https://calendly.com/example-link/30min",
  "childParamName": "a1",
  "responseParamName": "a2"
}

Proposed Feature 2:

Assess whether iframes can be modified to host and book appointments via Calendly or another service.

Feature 2 Details:

Currently, it appears that the final step (clicking the button to finalize) in booking a Calendly appointment does not work in an iframe, though the rest of the booking process does.

• See: [(https://childrenhelpingscience.com/exp/studies/3620/)].

• Note: this study does not currently have the link embedded in an iframe and instead uses exp-lookit-text to provide the URL externally, since this was not working).

Progress update:

This feature has been completed by lookit/ember-lookit-frameplayer#376.

Proposed Feature 3:

Add an additional parameter so that optionalText will allow the experimenter to specify whether the text is displayed above or below the iframe.

Feature 3 Details

Some families will accidentally click the big green "Next" button without seeing the warning text when filling out Qualtrics surveys in an iframe, so it is possible putting the warning text at the top will be more readily seen on different screens.

• Another/additional solution would also be making the "Next" button text to be modifiable so the experimenter can specify the string value.

[ianchandlercampbell]

@becky-gilbert One thing to note is that some of these fixes could also be implemented for external studies too-- indeed the youcanbookme people were saying the two URL queries are sent to the link for external studies as well? I assume that's basically the same process as is used in the iframes.

Or it could be that because the external studies don't use EFP, they'd need to do an internal study and an iframe to be able to modify the default URL query strings

[becky-gilbert]

Thanks Ian, these are all great suggestions! I think features 1 and 3 are straightforward. I'll create separate issues for them so that we can scope and prioritize them.

Question about this point in feature 1:

Calendly allows custom information to be "pre-populated" using query strings in a custom scheduling question created in the event named in the following format: a1, a2, a3... [(https://help.calendly.com/hc/en-us/articles/226766767-Pre-populate-invitee-information-on-the-scheduling-page#h_0f5dfae8-723f-4ba2-b96e-26b57b4b51fc)]. This would be visible to the participant when they book (this might be acceptable as these are study specific child ID and response ID, not global IDs?).

Can you explain how you handle calendly bookings now? And do you know how most researchers do this? Do parents enter their name and email when setting up a booking? How do researchers link the calendly booking to the child ID?

We do pass the 'child' and 'response' IDs as query parameters into external study URLs, which means that researchers could pre-populate some custom scheduling questions with those IDs in Calendly. But it sounds like that's not what you (and other researchers) do now?

BTW I've just tested this approach and it works. So if this is what we want researchers to be doing, then we can add it to the docs.

Question about feature 2:

Is it important to continue video recording all the way through to the booking process? If not, we could just redirect the study to the booking page using the study's exit URL. The study's exit URL does automatically add the 'child' and 'response' query parameters. This would mean that you wouldn't have video recording on the booking page, but it might make things less confusing for the participant (i.e. no 'next' button on the page under the iframe that people can accidentally click).

Similarly, you can chain together Qualtrics and the booking site using exit URLs and query parameters:

• Internal CHS study with a Qualtrics link as the exit URL
• Qualtrics study that captures the child/response query parameters, stores them as embedded data, and sets up the exit URL to be the booking link with child/response query parameters

I'm just wondering if there's an advantage for either the iframe or no-iframe approach, or if researchers might want/need to be able to do this with and without the iframe, depending on the situation.

And again, I'm happy to write up some instructions in the docs on this.

[becky-gilbert]

Sorry, I forgot to respond to this:

One thing to note is that some of these fixes could also be implemented for external studies too-- indeed the youcanbookme people were saying the two URL queries are sent to the link for external studies as well? I assume that's basically the same process as is used in the iframes.

The code for adding the child/response query parameters to URLs is in two different places: it's in the lookit-api for external study links, and in the EFP for both the iframe URLs and exit URLs. If we wanted to allow researchers to edit the names of the parameters for any of these URLs, we would need to (1) add text entry fields to the study edit form, (2) add those fields to the study table in the database, and (3) grab the values from those fields when adding the query parameters to the URLs.

So for allowing researchers to edit the parameter names for any of these URLs, we'd have to do steps 1 and 2 no matter what. And for step 3, the changes would differ depending on whether the URL is used inside the EFP (iframe and exit URLs) or directly from the CHS site (external study link). In other words, the solutions are similar but not entirely the same.

I'll write up a new issue for this in the lookit-api repo.

[ianchandlercampbell]

Responses in bold! I wove your second comment in to the second question and answered both.

Thanks Ian, these are all great suggestions! I think features 1 and 3 are straightforward. I'll create separate issues for them so that we can scope and prioritize them.

Question about this point in feature 1:

Calendly allows custom information to be "pre-populated" using query strings in a custom scheduling question created in the event named in the following format: a1, a2, a3... [(https://help.calendly.com/hc/en-us/articles/226766767-Pre-populate-invitee-information-on-the-scheduling-page#h_0f5dfae8-723f-4ba2-b96e-26b57b4b51fc)]. This would be visible to the participant when they book (this might be acceptable as these are study specific child ID and response ID, not global IDs?).

Can you explain how you handle calendly bookings now? And do you know how most researchers do this? Do parents enter their name and email when setting up a booking? How do researchers link the calendly booking to the child ID?

ICC reply: Currently, labs handle Calendly or other appointments by guessing which Lookit participant signed up for the study based on timestamps and/or information entered that is also viewable on Lookit (in this case, just the name I think). There currently isn't a way to link the booking directly to a child ID or response ID!

We do pass the 'child' and 'response' IDs as query parameters into external study URLs, which means that researchers could pre-populate some custom scheduling questions with those IDs in Calendly. But it sounds like that's not what you (and other researchers) do now?

ICC reply: I think researchers are not able to to do this because booking platforms are not as flexible as Qualtrics in that regard!

BTW I've just tested this approach and it works. So if this is what we want researchers to be doing, then we can add it to the docs.

ICC reply: Excellent idea! I think there are multiple places where we can provide more information on query parameters in the docs, including for Qualtrics functionality! I can put this on my docket as we work on these issues in tandem.

Question about feature 2:

Is it important to continue video recording all the way through to the booking process? If not, we could just redirect the study to the booking page using the study's exit URL. The study's exit URL does automatically add the 'child' and 'response' query parameters. This would mean that you wouldn't have video recording on the booking page, but it might make things less confusing for the participant (i.e. no 'next' button on the page under the iframe that people can accidentally click).

Similarly, you can chain together Qualtrics and the booking site using exit URLs and query parameters:

• Internal CHS study with a Qualtrics link as the exit URL
• Qualtrics study that captures the child/response query parameters, stores them as embedded data, and sets up the exit URL to be the booking link with child/response query parameters

I'm just wondering if there's an advantage for either the iframe or no-iframe approach, or if researchers might want/need to be able to do this with and without the iframe, depending on the situation.

Sorry, I forgot to respond to this:

One thing to note is that some of these fixes could also be implemented for external studies too-- indeed the youcanbookme people were saying the two URL queries are sent to the link for external studies as well? I assume that's basically the same process as is used in the iframes.

The code for adding the child/response query parameters to URLs is in two different places: it's in the lookit-api for external study links, and in the EFP for both the iframe URLs and exit URLs. If we wanted to allow researchers to edit the names of the parameters for any of these URLs, we would need to (1) add text entry fields to the study edit form, (2) add those fields to the study table in the database, and (3) grab the values from those fields when adding the query parameters to the URLs.

So for allowing researchers to edit the parameter names for any of these URLs, we'd have to do steps 1 and 2 no matter what. And for step 3, the changes would differ depending on whether the URL is used inside the EFP (iframe and exit URLs) or directly from the CHS site (external study link). In other words, the solutions are similar but not entirely the same.

ICC reply: I did not know that the exit URLs are set to provide these query parameters as well! Do you know if we have this documented anywhere (I was not able to find in a 10 minute search, but that doesn't mean it isn't somewhere)? If not, I think this can also be a docs update. It sounds like my initial thought that only iframes would be able to have editable parameters might be mistaken, which opens up possibilities for a no-iframe option as you say! It could be that there are just a few extra parameters for external studies in this way.

And again, I'm happy to write up some instructions in the docs on this.

ICC reply: I can take the lead on writing up some instructions in the docs for your review!

[becky-gilbert]

ICC reply: Currently, labs handle Calendly or other appointments by guessing which Lookit participant signed up for the study based on timestamps and/or information entered that is also viewable on Lookit (in this case, just the name I think). There currently isn't a way to link the booking directly to a child ID or response ID!

Yikes. I think we can do better.

ICC reply: I did not know that the exit URLs are set to provide these query parameters as well! Do you know if we have this documented anywhere (I was not able to find in a 10 minute search, but that doesn't mean it isn't somewhere)? If not, I think this can also be a docs update.

Yep, I couldn't find this in the docs either. I had to check the lookit-api code to be sure 😬 I think this should be a docs update. Do you mind creating a docs issue to add this? And the PR too, if you want?

The information about query parameters should probably go in the Exit URL section of the study fields docs here: https://lookit.readthedocs.io/en/develop/researchers-set-study-fields.html#exit-url And we could also add a very quick explanation here for how to use the exit URL to send participants on to a Qualtrics study that captures their participant/response IDs, with links to the relevant Qualtrics docs.

[becky-gilbert]

@okaycj for iframe improvements - we're discussing the 3rd item in the description here.