Tech Tip: Using HTML Embed Code in EC Learn

This title sounds very technical, but in reality all you’ll be doing is clicking, cutting, and pasting. Before we get started though, it will help to know a little bit of background information.

EC Learn provides the backbone of a course, as well as some basic teaching tools. It gives you discussions, quizzes, and informational pages. It doesn’t however, give you mapping tools, or news feeds, or interactive presentations. We can use HTML code to add these additional features and tools.

HTML (Hypertext Markup Language) is the main language that web sites are coded in. It tells your web browser where to put pictures on a web page, how large to make them, how to format the text, and whether you want your multiple exclamation points in pink or fuchsia. You don’t need to know how to code in HTML to use Canvas but the software is capable of recognizing HTML.

Embed code is HTML code that is created and personalized by a website, so that you don’t have to learn how to program. You can just copy and paste. Say that I’ve made a Google Map with a few interesting eateries in Boston. I could just paste a link into the text of the site, but it would be more convenient (and tidier) to embed the map directly in my page. Then I not only could have an interactive map, I could have the text instructing students what to do with the map right there as well. Luckily, I can achieve this because Google Maps provides embed code for your custom maps. Let’s go through this process step-by-step.


  1. In Google Maps, click on the link icon.
  2. In the box that opens, you’ll see “Paste HTML to embed in website”. Copy this HTML code.
  3. In EC Learn, navigate to the page where you want to put your map, and click on the button to edit the page just as you would to enter new text.
  4. Rather than immediately beginning to edit in the Rich Content Editor (RCE), click on  above and to the right of the RCE. This allows you to view and edit the HTML of your page.
  5. If you’ve already added content to your page, you’ll see that there is code in the box already. HTML contains the text that you’ve written, along with formatting tags and attributes which are encased in angle brackets. You can figure out where you are in the page by looking through your text.
  6. Make a new line by hitting <enter>, then paste your embed code into the RCE.
  7. Click the “Save Changes” button when you’re done editing. You may need to reload the page in order for your embedded map to appear.
  8. Feel accomplished and technologically savvy.

A Non-Comprehensive List of Sites you can Embed in Canvas

The location of embed code varies from site to site. Generally, you can find instructions online for how to find the embed code on a specific site. Sadly, not all sites produce embed code, but here are a few that do.

  • Google Maps – Map editing, exploring, and marking.
  • Google Forms – A tool for making surveys and online forms.
  • Twitter – A social networking tool.
  • Prezi – A tool for making interactive presentations.
  • Slideshare – A tool for sharing PowerPoints, documents, and videos.
  • Scribd – Online library of documents, books, presentations, and spreadsheets.
  • Vimeo – A cleaner and more curated version of YouTube.

— Guthrie

This entry was posted in EC Learn, Tech Tips and tagged , , , , , , , , , . Bookmark the permalink.

One Response to Tech Tip: Using HTML Embed Code in EC Learn

  1. Before we get started though, it will help to know a little bit of background information.

Leave a Reply

Your email address will not be published. Required fields are marked *