Quick Start: Simple Integration

Author:GeoGebra Team

Integrating GeoGebra activities into your website is easy! This tutorial will guide you through everything you need to get started.

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

Create an activity

If you already have an activity which you'd like to embed, you can skip this step. Every GeoGebra app can be used to create a new activity. Find an overview of all apps here: https://www.geogebra.org/download If you're new to creating GeoGebra activities, have a look at Learn GeoGebra Graphing Calculator. Maybe you're also interested in other GeoGebra Tutorials.

Save your activity online using your GeoGebra login

Open the Menu and select File, then Save
The app will ask you to sign in (you can create a new account if you haven't yet)
Enter a title and select SAVE

Download an activity as html

You can create a webpage with your activity embedded directly from the app. Open the

Menu and select Download as and then choose Activity as Webpage (html). The downloaded html file contains everything you need to start. Your activity will be saved within the html file as a base64 string in the parameter "ggbBase64".

Change the origin of your activity (optional)

If you prefer saving the activity independently of the html file there are two options: Load the activity as .ggb file from your server:

Save the activity as a .ggb file on your server
Replace "ggbBase64":"UEsD..." with "filename":"myfile.ggb" (put the name of your file instead of "myfile")

Load the activity from www.geogebra.org:

Save the activity online
Replace "ggbBase64":"UEsD..." with "material_id":"suvzfavn" (put the ID of your activity instead of "suvzfavn")

Get the ID of your activity

Every activity that is saved online has a unique ID that is typically used to reference or share the activity. For example www.geogebra.org/m/a4ve9cxg loads the activity with ID a4ve9cxg as a GeoGebra activity on the GeoGebra website. If you don't know the ID of your activity yet, open the

Menu, select File and then Share. You can get the ID of your activity from the appearing dialog.

Manual Embedding

To embed GeoGebra activities 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 activity:


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

By default the activity will be loaded with the app that was used to create and save the file. If you want to load your activity with 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.

App Parameters

You can customize your activity further by using various GeoGebra App Parameters.

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.

Iframe embedding An easy way to embed an activity into your website is to use iframe embedding. As iframe embedding isn't very flexible and isn't fully supported on iOS, we recommend you use this only if no other option is available. This can be the case e.g. if you want to include an activity into a content management system that accepts only iframe embedding (e.g. Moodle). To use iframe embedding follow the steps below.

Find your activity online

Go to www.geogebra.org and sign in
Choose Profile from the menu on the left
Find your activity

Go to the details of your activity

Open the

More menu on the right and select Details

Share your activity to get an embedding code

Select Share on the right to open the Share dialog

Select Embed
Copy the embedding code (manually or using the Copy button next to the code)
Paste the embedding code to the desired position on your website

Additional options

Select Show more on the bottom of the Share dialog to get additional options where you can

define the size of your activity
enable and disable options like Zoom and Reset Button (Basic)
show or hide elements like the Input Bar or the Toolbar (Plus)

After changing those settings make sure to copy and paste the updated embedding code into your website. If you want the full-screen button to work add "fullscreen" at the end of the iframe tag. For additional information have a look at the Iframe Embedding Reference. Note: Enabling the following settings is considered part of Plus service:

Input Bar
Style Bar
Menu
Toolbar (incl. Toolbar Help)
Enable Right Click and Keyboard Editing

Advanced Integration

You're curious about what else is possible with GeoGebra? With Advanced integration you can additionally embed

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

Continue reading about Advanced Integration on the next page! Contact us at office@geogebra.org We're happy to help!