cancel
Showing results for 
Search instead for 
Did you mean: 
Community Member

LTI launch data in an iframe?

Jump to solution

Hi everybody,

 

Is it possible to embed an iframe into canvas wiki pages so that the iframe gets the LTI launch data of the current user/course section?

I know that I can add an external tool link, but I would really like the data from the external tool to show up embedded into an existing canvas page.

 

Thank you for any help!

Tags (2)
1 Solution

Accepted Solutions
Navigator

philip,  benjamr 

You can do this. I'm going to take what toby@ksu.edu wrote in June 2016 in Launching LTI from content in Pages? and expand on it.

LTI launch data is specific to an external tool so you would have to set up an external tool for this. This is where you control what information gets sent to the LTI.

Once you have created the external tool, then you can embed it in an iframe within a page.

What you need use for the source is not the destination of the iframe, but a page within Canvas that launches the external tool for you. If your course ID is 1234, then the source for the iframe will start off /courses/1234/external_tools/retrieve

Then include a query parameter of display=borderless and url=launch_url_of_LTI

It looks like you can also include query parameters of content_item_id or secure_params that will get passed on to the launch as well.

Note that your content will need to be delivered with a secure (https) connection or you'll get a "You are trying to launch insecure content from within a secure site (canvas). Some web browsers may prevent this content from loading." message.

Here's an example. I chose an external tool that I had in my sandbox, which has a Canvas course ID of 896851. The external tool I picked was the Graph Builder from the Edu Apps site. This isn't an endorsement of that one, but the first one I tried was delivered over http not https, so it wouldn't work.

I went into my Course Settings page and chose Apps, and then View App Configurations to get the list of apps. I then clicked Edit next to Graph Builder.

What you need off this is the Launch URL

293274_pastedImage_5.png

In my course, I created a page, went into the HTML editor and clicked on the Insert/edit media button. Note that you can can also edit the HTML directly.

293275_pastedImage_6.png

I went to the Embed code and pasted in my iframe code.

293281_pastedImage_16.png

You can use the full URL of the Canvas instance that includes the https and the site name, but it's not necessary. I'm primarily not doing that here so that Jive (the Community software) doesn't convert it to a link.

Now when I save the page, I get this:

293279_pastedImage_11.png

Here's the code that I pasted. Note that I broke the wrapping on the src line just so it would display without scrolling)

<iframe width="800" height="600" 
src="/courses/896851/external_tools/retrieve
  ?display=borderless
  &url=https://www.edu-apps.org/tool_redirect?id=graph_builder"

>
</iframe>‍‍‍

Without a lot of investigation, url parameter should probably be encoded to avoid special characters, but what I gave worked in Chrome on Windows. If you encoded the parameter, it would look like this:

<iframe width="800" height="600" 
src="/courses/896851/external_tools/retrieve
  ?display=borderless
  &url=https%3A%2F%2Fwww.edu-apps.org%2Ftool_redirect%3Fid%3Dgraph_builder"

>
</iframe>‍‍‍‍‍‍‍‍

View solution in original post

4 Replies
Community Coach
Community Coach

philip, greetings! Due to the technical nature of this question, I’m going to share it with the Canvas Developers‌ group in the Community. You might also consider joining this group so you get access to their resources and information. 

Hope this helps! Kona

Community Member

Hi kona@richland.edu,

I also have the question from the original poster. Should I re-ask this in the Canvas Developers questions area or did you already make a post there? If so, could you link to the discussion that is happening on the Developers group?

Thank you!

Best regards,

Ben

benjamr‌, since kona@richland.edu‌ has shared this question with the Canvas Developers group, it's not necessary to re-post it, as long as you follow it. Their replies will appear right here. 

Navigator

philip,  benjamr 

You can do this. I'm going to take what toby@ksu.edu wrote in June 2016 in Launching LTI from content in Pages? and expand on it.

LTI launch data is specific to an external tool so you would have to set up an external tool for this. This is where you control what information gets sent to the LTI.

Once you have created the external tool, then you can embed it in an iframe within a page.

What you need use for the source is not the destination of the iframe, but a page within Canvas that launches the external tool for you. If your course ID is 1234, then the source for the iframe will start off /courses/1234/external_tools/retrieve

Then include a query parameter of display=borderless and url=launch_url_of_LTI

It looks like you can also include query parameters of content_item_id or secure_params that will get passed on to the launch as well.

Note that your content will need to be delivered with a secure (https) connection or you'll get a "You are trying to launch insecure content from within a secure site (canvas). Some web browsers may prevent this content from loading." message.

Here's an example. I chose an external tool that I had in my sandbox, which has a Canvas course ID of 896851. The external tool I picked was the Graph Builder from the Edu Apps site. This isn't an endorsement of that one, but the first one I tried was delivered over http not https, so it wouldn't work.

I went into my Course Settings page and chose Apps, and then View App Configurations to get the list of apps. I then clicked Edit next to Graph Builder.

What you need off this is the Launch URL

293274_pastedImage_5.png

In my course, I created a page, went into the HTML editor and clicked on the Insert/edit media button. Note that you can can also edit the HTML directly.

293275_pastedImage_6.png

I went to the Embed code and pasted in my iframe code.

293281_pastedImage_16.png

You can use the full URL of the Canvas instance that includes the https and the site name, but it's not necessary. I'm primarily not doing that here so that Jive (the Community software) doesn't convert it to a link.

Now when I save the page, I get this:

293279_pastedImage_11.png

Here's the code that I pasted. Note that I broke the wrapping on the src line just so it would display without scrolling)

<iframe width="800" height="600" 
src="/courses/896851/external_tools/retrieve
  ?display=borderless
  &url=https://www.edu-apps.org/tool_redirect?id=graph_builder"

>
</iframe>‍‍‍

Without a lot of investigation, url parameter should probably be encoded to avoid special characters, but what I gave worked in Chrome on Windows. If you encoded the parameter, it would look like this:

<iframe width="800" height="600" 
src="/courses/896851/external_tools/retrieve
  ?display=borderless
  &url=https%3A%2F%2Fwww.edu-apps.org%2Ftool_redirect%3Fid%3Dgraph_builder"

>
</iframe>‍‍‍‍‍‍‍‍

View solution in original post