Quick Start: Simple Integration
Integrating GeoGebra activities into your website is easy! This tutorial will guide you through everything you need to get started.
[size=200][color=#018575]Embedding GeoGebra activities [/color][/size][br][br]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.[br][br]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.[br][br]Every GeoGebra app can be used to create a new activity. Find an overview of all apps here: [url=https://www.geogebra.org/download]https://www.geogebra.org/download[br][/url]If you're new to creating GeoGebra activities, have a look at [url=https://www.geogebra.org/m/vd6UC685]Learn GeoGebra Graphing Calculator[/url]. Maybe you're also interested in other [url=https://www.geogebra.org/a/14]GeoGebra Tutorials[/url].
Save your activity online using your GeoGebra login
[list][*]Open the [img]https://wiki.geogebra.org/uploads/thumb/8/8c/Ic_menu_black.svg/16px-Ic_menu_black.svg.png[/img] [i]Menu [/i]and select [i]File[/i], then [i]Save[/i][/*][*]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[/*][/list]
Download an activity as html
You can create a webpage with your activity embedded directly from the app. Open the [img]https://wiki.geogebra.org/uploads/thumb/8/8c/Ic_menu_black.svg/16px-Ic_menu_black.svg.png[/img] [i]Menu [/i]and select [i]Download as[/i] and then choose [i]Activity as Webpage (html)[/i]. 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 [code]"ggbBase64"[/code]. [br]
Change the origin of your activity (optional)
If you prefer saving the activity independently of the html file there are two options:[br][br]Load the activity as .ggb file from your server: [list][*]Save the activity as a .ggb file on your server[/*][*]Replace [code]"ggbBase64":"UEsD..."[/code] with [code]"filename":"myfile.ggb"[/code] [br](put the name of your file instead of "myfile")[/*][/list]Load the activity from [url=https://www.geogebra.org]www.geogebra.org[/url]:[br][list][*]Save the activity online[/*][*]Replace [code][/code][code]"ggbBase64":"UEsD..." [/code]with [code]"material_id":"suvzfavn"[/code] [br](put the ID of your activity instead of "suvzfavn")[/*][/list]
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 [i]a4ve9cxg [/i]as a GeoGebra activity on the GeoGebra website. If you don't know the ID of your activity yet, open the [img]https://wiki.geogebra.org/uploads/thumb/8/8c/Ic_menu_black.svg/16px-Ic_menu_black.svg.png[/img] [i]Menu[/i], select [i]File [/i]and then [i]Share[/i]. 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:[br][br]1. Add the following to the [code]<head>[/code] section to make sure scaling and Unicode works correctly:[br][code]<meta name=viewport content="width=device-width,initial-scale=1"> [br]<meta charset="utf-8"/>[/code][br][br]2. Include the JavaScript library deployggb.js:[br][code]<script src="https://www.geogebra.org/apps/deployggb.js"></script>[/code][br][br]3. Create a div element where you want the activity to be loaded[br][code]<div id="ggb-element"></div>[/code][br][br]4. Configure and insert the activity:[code][br] var params = {[br] "appName": "graphing", [br] "width": 800, [br] "height": 600, [br] "showToolBar": false, [br] "showAlgebraInput": false, [br] "showMenuBar": false,[br] "material_id":"RHYH3UQ8"[br] };[br] var ggbApplet = new GGBApplet(params, true);[br] window.addEventListener("load", function() { [br] ggbApplet.inject('ggb-element');[br] });[br][/code][br][br]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 [i]parameters[/i] list. Simply change the [code]"appName"[/code] parameter to [code]"graphing"[/code], [code]"geometry"[/code], [code]"3D"[/code] or [code]"classic"[/code].[br][br]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 [url=https://wiki.geogebra.org/en/Reference:GeoGebra_App_Parameters]GeoGebra App Parameters[/url].
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 [url=https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding]GeoGebra Apps Embedding Reference[/url] for more details.[br]
[size=200][color=#018575]Iframe embedding[/color][/size][br][br]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
[list][*]Go to [url=https://www.geogebra.org]www.geogebra.org[/url] and sign in[/*][*]Choose [i]Profile [/i]from the menu on the left[/*][*]Find your activity [/*][/list]
Go to the details of your activity
Open the [img width=20,height=20]https://lh5.googleusercontent.com/m4JJV-BBHdJBfdjRUsylYIuAaCroguwoVEWij8b4Y7X7OjDbyt-wRNegS8oERyKiujYH5_DaJikRPCfwmR-9Xkls8F0FsM8ibx6wiUkL0Bd4HnBOjYLWKi0JIDWLj7WblgWGdnuM[/img] [i]More [/i]menu on the right and select [i]Details[/i]
Share your activity to get an embedding code
[list][*]Select [i]Share[/i] on the right to open the Share dialog[/*][/list]
[list][*]Select [img]https://wiki.geogebra.org/uploads/thumb/4/44/Menu-embed.svg/16px-Menu-embed.svg.png[/img] [i]Embed[/i][/*][*]Copy the embedding code (manually or using the [img]https://wiki.geogebra.org/uploads/thumb/7/76/Menu-edit-copy.svg/20px-Menu-edit-copy.svg.png[/img][i]Copy [/i]button next to the code)[/*][*]Paste the embedding code to the desired position on your website[/*][/list]
Additional options
Select [i]Show more[/i] on the bottom of the Share dialog to get additional options where you can[br][list][*]define the size of your activity [/*][*]enable and disable options like [i]Zoom[/i] and [i]Reset Button [/i](Basic)[/*][*]show or hide elements like the[i] Input Bar[/i] or the [i]Toolbar [/i](Plus)[/*][/list]After changing those settings make sure to copy and paste the updated embedding code into your website.[br][br]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 [url=https://wiki.geogebra.org/en/Reference:Material_Embedding_(Iframe)]Iframe Embedding Reference[/url].[br][br]Note: Enabling the following settings is considered part of Plus service:[br][list][*]Input Bar[/*][*]Style Bar[/*][*]Menu[/*][*]Toolbar (incl. Toolbar Help)[/*][*]Enable Right Click and Keyboard Editing[/*][/list]
Advanced Integration
You're curious about what else is possible with GeoGebra?[br][br]With Advanced integration you can additionally embed[br][list][*]GeoGebra activities with use of API to include dynamic worksheets [br]and interact with them on your website[/*][*]GeoGebra Calculator apps to include [br]GeoGebra Graphing Calculator, Geometry, 3D Calculator or [br]Classic directly into your website[/*][/list][br] Continue reading about Advanced Integration on the next page![br][br]Contact us at office@geogebra.org[br]We're happy to help!