Reference:GeoGebra Apps Embedding

GeoGebra API Documentation

• Material Embedding
• Math Apps Embedding
• Applet Parameters
• Javascript API

Note: In case you want to embed your materials in a webpage without any programming, you can just tap the Share button on the material page and select Embed from the dialog that appears. The method described on this page provides better performance, more flexibility and allows deeper integration.

Embed using JavaScript

You can use JavaScript to easily embed GeoGebra Math Apps into your website and interact with them using the JavaScript API. Here is an example web page that shows how to embed applets:

• Live demo
• Source code

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 snipet 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 alement 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.

In the example the parameter 'showtoolbar:true' overrides the material setting from the file.

Examples

• Single applet
• Single applet 3D
• Two applets
• Single applet + API
• Two applets + API
• Single applet + API for saving
• Apps with toolbar
• Apps with toolbar in a popup dialog
• Event listeners
• Communication between applets
• Exercise (beta)

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. Download 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/');