How to embed GeoGebra apps and activities into websites
- 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 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
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.
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
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
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
"filename":"myfile.ggb"(put the name of your file instead of "myfile")
- Save the activity online
"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.
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
"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.
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.
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
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