Quick Start: Advanced Integration

Author:: GeoGebra Team

Choose what you want to embed

There are 3 options when it comes to embedding GeoGebra into your website. Which one is right for you depends on what you're planning on doing with it. You can embed:

GeoGebra activities to include dynamic worksheets into your website
GeoGebra activities with use of API to include dynamic worksheets and interact with them on your website
GeoGebra Calculator apps to include GeoGebra Graphing Calculator, Geometry, 3D Calculator or Classic directly into your website

To get an idea about what's possible with embedding have a look at this Collection of Examples.

Embedding Activities with use of API Using the GeoGebra API gives you the power to interact with GeoGebra activities in a more sophisticated way. You can create buttons outside of an activity that show or hide objects, listen and react to events from the activity and much more. Before you can start using the API please follow the steps described in Simple Integration to embed your activity into a div element (if you haven't yet). No matter if you want to embed Activities with or without use of API, the steps of embedding an Activity are always the same. A full description of the API is listed on the GeoGebra Apps API Reference. Usage of the GeoGebra API is included in our Software Licensing Agreement.

Get started with the API

To get an idea about how to use the API, start with this simple example:

Create an activity with a triangle ABC and embed it into your website as described in Simple Integration Examples.
Open the html file with your embedded activity and add the following code to add 2 buttons for setting point A visible and invisible.

          [url=#]Hide point A[/url]
          [url=#]Show point A[/url]

Load your html file in the browser to see if the buttons work as expected.

To continue with more examples have a look at GeoGebra's Collection of Examples. To see the corresponding code select View on GitHub in the top right corner.

Embedding GeoGebra Calculator Apps The recommended way to embed a GeoGebra app into your website is to embed it directly as a div element. Using div embedding enables you to change settings of your app like the size of the app, showing or hiding the menu, disabling CAS and much more. The easiest way to create an html file with a GeoGebra app embedded is to download an html file directly from the app as described below. You can also embed the app manually by following the steps further below.

Download a Calculator app as html

You can create a webpage with a GeoGebra app embedded directly from any GeoGebra online or desktop app. Start the GeoGebra app you want to embed (e.g. GeoGebra Graphing Calculator) and open the

Menu. Select Download as and then choose Activity as Webpage (html). The downloaded html file contains everything you need to start.

Manual Embedding

To embed GeoGebra Apps into your website, you need to add 4 parts: 1. Add the following to the <head> section to make sure scaling and Unicode works correctly:

<meta name=viewport content="width=device-width,initial-scale=1">  
<meta charset="utf-8"/>

2. Include the JavaScript library deployggb.js: <script src="https://www.geogebra.org/apps/deployggb.js"></script> 3. Create a div element where you want the activity to be loaded <div id="ggb-element"></div> 4. Configure and insert the app:

 var params = {
            "appName": "graphing", 
            "width": 800, 
            "height": 600, 
            "showToolBar": true, 
            "showAlgebraInput": true, 
            "showMenuBar": true,
            };
    var ggbApplet = new GGBApplet(params, true);
    window.addEventListener("load", function() { 
        ggbApplet.inject('ggb-element');
    });

If you want to load a different app, you can change the setting in the parameters list. Simply change the "appName" parameter to "graphing", "geometry", "3D" or "classic". Note: If you download an html file directly from the app as described above, the html file will contain these 4 parts. These steps are the same as for embedding a GeoGebra Activity - the only difference being the parameters. Adding "material_id": "RHYH3UQ8" will load an Activity into the app. Setting "showToolBar": false will hide the Toolbar.

Parameters of Calculator apps

Open the html file and have a closer look at the parameters list. You can change settings like the size of the app, showing or hiding the menu and much more. A complete list of settings is documented in the GeoGebra App Parameters Reference. All available paramters are included in our Plus Service Agreement. When embedding a GeoGebra app, make sure to remove the parameter "ggbBase64":"UEsD..." which was created while downloading the html file from the app.

Self-hosted vs. GeoGebra-hosted

We recommend that you self-host the GeoGebra Math Apps Bundle so that you can manage the timing of software updates but you are also welcome to use our global CDN backed by Amazon Web Services (AWS). Please see GeoGebra Apps Embedding Reference for more details.

Support

You have more questions? Contact us at office@geogebra.org We're happy to help!