Difference between revisions of "Reference:GeoGebra Apps Embedding"

From GeoGebra Manual
Jump to: navigation, search
m (Reverted edits by CHIN EM NGUYEN (talk) to last revision by Mathmum)
(Replaced content with "https://geogebra.github.io/docs/reference/en/GeoGebra_Apps_Embedding/")
Tag: Replaced
 
(21 intermediate revisions by 5 users not shown)
Line 1: Line 1:
This page describes how to embed GeoGebra Apps into your website. For more information on how to interact with embedded apps, please see [[Reference:GeoGebra_Apps_API|GeoGebra Apps API]].
+
https://geogebra.github.io/docs/reference/en/GeoGebra_Apps_Embedding/
 
 
=Quick Start=
 
In order to embed GeoGebra apps into your page, you need to add the following three parts:
 
 
 
{{Step|num=1}} The javascript library deployggb.js needs to be included with this tag:
 
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
 
 
 
{{Step|num=2}} Create an element for the GeoGebra app on your page:
 
<pre>    <div id="ggb-element"></div> </pre>
 
 
 
{{Step|num=3}} Configure and insert the app:
 
<pre><script> 
 
    var ggbApp = new GGBApplet({appName: "graphing", width:800, height:600, showToolBar:true, showAlgebraInput:true, showMenuBar:true }, true);
 
    window.addEventListener("load", function() {
 
        ggbApp.inject('ggb-element');
 
    });
 
</script></pre>
 
 
 
Simply change the appName from "graphing" to "geometry" or "3d" to get one of our other apps.  You can customize our apps by using various [[Reference:GeoGebra_App_Parameters|GeoGebra App Parameters]].
 
 
 
=Live Examples=
 
The following examples and their html source code show how to use GeoGebra apps either embedded in your page or in popup dialogs:
 
* [http://dev.geogebra.org/examples/html/example-graphing.html Graphing Calculator embedded]
 
* [http://dev.geogebra.org/examples/html/example-geometry.html Geometry app embedded]
 
* [http://dev.geogebra.org/examples/html/example-popup-graphing.html Graphing Calculator popup]
 
* [http://dev.geogebra.org/examples/html/example-popup-geometry.html Geometry app popup]
 
 
 
=GeoGebra Apps API=
 
The following examples show how you can interact with embedded apps through the [https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API GeoGebra Apps API]:
 
* [http://dev.geogebra.org/examples/html/example-api-multiple.html Showing & hiding objects with buttons]
 
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Saving & loading state]
 
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Listening to update, add, remove events]
 
 
 
=Offline and Self-Hosted Solution=
 
We suggest you to use the GeoGebra Apps from our global and super-fast server network cdn.geogebra.org as shown above, but in case you prefer to host and update the GeoGebra apps yourself, you can [https://www.geogebra.org/partner/portal download our GeoGebra Math Apps Bundle]
 
The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to
 
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
 
and you need to include the following line before the inject() call:
 
<pre>    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
 

Latest revision as of 15:10, 21 May 2024

© 2024 International GeoGebra Institute