How to embed GeoGebra apps and activities into websites

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 Calculator apps to include GeoGebra Graphing Calculator, Geometry, 3D Calculator or Classic directly into your website
  • 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
To get an idea about what's possible with embedding have a look at this Collection of Examples.

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 described in the GeoGebra Apps Embedding Reference.

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.
Image

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. When embedding a GeoGebra app, make sure to remove the parameter "ggbBase64":"UEsD..." which was created while downloading the html file from the app.

Embedding GeoGebra activities

If you want to embed a dynamic worksheet (activity) into your website, the steps to follow are similar to embedding a Calculator app. If you don't have an activity ready yet, start by creating one as described below. If you already have an activity ready to use and embedded an app into your website, you can load the activity within your embedded app by adding one of
  • "filename":"myfile.ggb" (if you saved your activity locally)
  • "material_id":"suvzfavn" (if you saved your activity online)

Create an activity

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
Image

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/suvzfavn loads the activity with ID suvzfavn 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.
Image

Change the app used to display your activity (optional)

By default the activity will be loaded with the app that was used to download the html 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". To find out more about which parameters you can add or change have a look at the GeoGebra App Parameters Reference.

Using the GeoGebra 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. To get an idea about how powerful the API is, have a look at this great example created by our friends from Kikora: Check-as-you-go GeoGebra Tutorials. Before you can start using the API please follow the steps described above to embed your activity into a div element (if you haven't yet). A full description of the API is listed on the GeoGebra Apps API Reference.

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 above.
  • Open the html file with your embedded activity and add the following code to add 2 buttons for setting point A visible and invisible.
  • 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.

Self-hosted vs. GeoGebra-hosted

Embedding apps and activities as described above includes having your apps and activities hosted on the global GeoGebra CDN, which we recommend. The biggest advantages are receiving regular updates and bug fixes automatically as well as guaranteed 99.5% uptime. If you prefer hosting and updating GeoGebra apps yourself please follow the instructions in the GeoGebra Apps Embedding Reference.

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
Image

Go to the details of your activity

Open the More menu on the right and select Details
Image

Share your activity to get an embedding code

  • Select Share on the right to open the Share dialog
Image
  • 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
Image

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
  • show or hide elements like the Input Bar or the Toolbar
  • enable and disable options like Zoom and Keyboard Editing
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.
Image