|
|
(27 intermediate revisions by 7 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 use 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 below the definition of ggb
| |
− | <pre> ggb.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
| |