Revision as of 01:14, 19 December 2017

This page describes how to embed GeoGebra Apps into your website and interact with them using the GeoGebra API. Have a look at the following demos and their html source code:

In order to embed GeoGebra apps into your page, you need to include the following three parts in your HTML file:

1 The javascript library deployggb.js needs to be included with this tag:

    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

2 Create elements in which the applets should be embedded

    <div id="applet_container1"></div>
    <div id="applet_container2"></div>

3 Configure and insert the applets

<script>  
    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
    var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showToolbar":true}, true);
    window.addEventListener("load", function() {
        applet1.inject('applet_container1');
        applet2.inject('applet_container2');
    });
</script>

The snippet above embeds one applet given by ID and one given by URL and injects them into elements with ids 'applet_container1' and 'applet_container2' respectively (the element ID is passed to the inject method) . For offline use you will need to specify the file using a base64 encoded string (press Ctrl+Shift+B to export ggbBase64 string to clipboard).

When used with the id parameter, the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on the GeoGebra Materials Platform. Optionally you can override these settings by passing them in the parameters. See Reference:Applet_Parameters for the list of all parameters.

In the example the parameter "showToolbar":true overrides the material setting from the file.

Examples

Offline and Self-Hosted Solution

We suggest you use use the GeoGebra Apps from cdn.geogebra.org as shown above, but in case you need to use the materials offline or host all the necessary files yourself you can do so using the GeoGebra Math Apps Bundle. Download GeoGebra Math Apps Bundle The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to

    <script src="GeoGebra/deployggb.js"></script>

and you need to include the following two lines below the definition of applet2

    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');

@@ Line 1: / Line 1: @@
 {{Reference}}
-This page describes how to embed GeoGebra Apps into your website and interact with them using the [https://www.geogebra.org/manual/en/Reference:JavaScript GeoGebra API]. Here is an example web page that shows how to embed applets:
+This page describes how to embed GeoGebra Apps into your website and interact with them using the [https://www.geogebra.org/manual/en/Reference:JavaScript GeoGebra API]. Have a look at the following demos and their html source code:
-* [http://dev.geogebra.org/examples/html/example2.html Live demo]
+* [http://dev.geogebra.org/examples/html/example-graphing.html Graphing Calculator embedded], [http://dev.geogebra.org/examples/html/example-geometry.html Geometry app embedded]
-* [https://github.com/geogebra/math-apps-examples/blob/master/html/example-multiple.html Source code]
+*  [http://dev.geogebra.org/examples/html/example-popup-graphing.html Graphing Calculator popup], [http://dev.geogebra.org/examples/html/example-popup-geometry.html Geometry app popup]
-You need to include the following three parts in your HTML file:
+In order to embed GeoGebra apps into your page, you need to include the following three parts in your HTML file:
 {{Step|num=1}} The javascript library deployggb.js needs to be included with this tag:
@@ Line 25: / Line 25: @@
 The snippet above embeds one applet given by ID and one given by URL and injects them into elements with ids 'applet_container1' and 'applet_container2' respectively (the element ID is passed to the inject method) . For offline use you will need to specify the file using a base64 encoded string (press Ctrl+Shift+B to export ggbBase64 string to clipboard).
-When used with the id parameter, the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on GeoGebra Materials Platform.  Optionally you can override these settings by passing them in the parameters. See [[Reference:Applet_Parameters]] for the list of all parameters.
+When used with the id parameter, the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on the GeoGebra Materials Platform.  Optionally you can override these settings by passing them in the parameters. See [[Reference:Applet_Parameters]] for the list of all parameters.
 In the example the parameter <code>"showToolbar":true</code> overrides the material setting from the file.
 =Examples=
+* [http://dev.geogebra.org/examples/html/example-tools.html Apps with toolbar: Graphing Calculator, Geometry]
+* [http://dev.geogebra.org/examples/html/example-popup.html Apps with toolbar in a popup dialog]
 * [http://dev.geogebra.org/examples/html/example-single.html Single applet]
 * [http://dev.geogebra.org/examples/html/example-3d.html Single applet 3D]
@@ Line 36: / Line 38: @@
 * [http://dev.geogebra.org/examples/html/example-api-multiple.html Two applets + API]
 * [http://dev.geogebra.org/examples/html/example-api-save-state.html Single applet + API for saving]
-* [http://dev.geogebra.org/examples/html/example-tools.html Apps with toolbar]
-* [http://dev.geogebra.org/examples/html/example-popup.html Apps with toolbar in a popup dialog]
 * [http://dev.geogebra.org/examples/html/example-api-listeners.html Event listeners]
 * [http://dev.geogebra.org/examples/html/example-api-sync.html Communication between applets]
@@ Line 43: / Line 43: @@
 =Offline and Self-Hosted Solution=
-We suggest you use use Math Apps from our CDN (cdn.geogebra.org) as shown above, but in case you need to use the materials offline or host all the necessary file yourself you can do so using the ''Math Apps Bundle''.
+We suggest you use use the GeoGebra Apps from cdn.geogebra.org as shown above, but in case you need to use the materials offline or host all the necessary files yourself you can do so using the ''GeoGebra Math Apps Bundle''.
-[https://www.geogebra.org/partner/portal Download Math Apps Bundle]
+[https://www.geogebra.org/partner/portal Download GeoGebra Math Apps Bundle]
 The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to
 <pre>    <script src="GeoGebra/deployggb.js"></script></pre>

Difference between revisions of "Reference:GeoGebra Apps Embedding"

Revision as of 01:14, 19 December 2017

GeoGebra API Documentation

Examples

Offline and Self-Hosted Solution