Embed CODAP in a Website
CODAP can be embedded easily into an iframe (inline frame). The embedded CODAP document is interactive, meaning one can create graphs in it or make other modifications (essentially this is a shared view link, but embedded in an iframe). You can embed your CODAP document in your website or blog by following these steps:
- Edit the CODAP document you want to share.
- Click on the ≡ menu. Select “Share,” then “Get link to shared view.”
- Make sure shared view is enabled. Then click the Embed tab and copy the iframe code.
- Paste the iframe code you want to insert into your HTML file for your webpage or blog. Your iframe should be inserted and the content displayed. Note that you may want to change the embed code to make the embedded iframe a different size by changing the number of pixels for width and height.
Below are two sample CODAP iframes.
The first one below shows a full CODAP document embedded via an iframe, specifically the getting started with CODAP tutorial (part one). Follow the instructions below to drag in the data file, make a graph, etc. directly in the iframe.
One thing that you may wish to do is embed a CODAP component (graph, table, or map) via an iframe to show just that component but not include other features of CODAP. If you have a CODAP file with a component you wish to embed in this way, begin by following steps 1 to 3 above. Then, edit the embed code by inserting the following after “html” and before “#”: ?componentMode=yes (this is case sensitive).
An example of this “componentMode” can be seen below (the full embed code is below the graph, for reference). Note that the graph is interactive, and there are undo and redo buttons added at the top, but you do not have the CODAP toolbar or menu available. This “componentMode” is a URL parameter for CODAP. There are other URL parameters that may also be helpful when embedding CODAP via an iframe that are described here.
Screenshot of embed code used to produce the iframe above (with componentMode highlighted):
