|
|
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}} Make sure you have this in the <code><head></code> section to make sure scaling works correctly (eg on mobile browsers) and that Unicode works
| |
− | <pre><meta name=viewport content="width=device-width,initial-scale=1">
| |
− | <meta charset="utf-8"/></pre>
| |
− | | |
− | {{Step|num=2}} The javascript library deployggb.js needs to be included with this tag:
| |
− | <pre><script src="https://www.geogebra.org/apps/deployggb.js"></script></pre>
| |
− | | |
− | {{Step|num=3}} Create an element for the GeoGebra app on your page:
| |
− | <pre><div id="ggb-element"></div> </pre>
| |
− | | |
− | {{Step|num=4}} Configure and insert the app:
| |
− | <pre><script>
| |
− | var params = {"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true };
| |
− | var applet = new GGBApplet(params, true);
| |
− | window.addEventListener("load", function() {
| |
− | applet.inject('ggb-element');
| |
− | });
| |
− | </script></pre>
| |
− | | |
− | Simply change the <code>appName</code> parameter from <code>graphing</code> to <code>geometry</code> or <code>3d</code> to get one of our other apps. To load an activity you can use eg <code>"material_id":"RHYH3UQ8"</code> or <code>"filename":"myFile.ggb"</code> and you can customize our apps further by using various [[Reference:GeoGebra_App_Parameters|GeoGebra App Parameters]].
| |
− | | |
− | =Tutorial=
| |
− | | |
− | Please see here for a longer tutorial which explains the different embedding options:
| |
− | https://www.geogebra.org/m/sehv2qc9 | |
− | | |
− | =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 www.geogebra.org as shown above, but in case you prefer to host and update the GeoGebra apps yourself, you can [https://download.geogebra.org/package/geogebra-math-apps-bundle 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> applet.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
| |
− | Alternatively if you just need to fix to a specific version then you can still use the CDN like this (don't change the <code>5.0.</code> just the <code>498</code>)
| |
− | <pre> applet.setHTML5Codebase("https://www.geogebra.org/apps/5.0.498.0/web3d");</pre>
| |
− | For technical reasons, you need to use <code>5.2</code> not <code>5.0</code> after version 804 eg
| |
− | <pre> applet.setHTML5Codebase("https://www.geogebra.org/apps/5.2.804.0/web3d");</pre>
| |
− | | |
− | =Adjusting embedded apps appearance=
| |
− | This feature is currently available only for GeoGebra Notes. To change the colors of the UI elements, you can set some CSS variables
| |
− | <pre>
| |
− | <style>
| |
− | body {
| |
− | --ggb-primary-color: #ee0290; /* used for most UI elements, including the toolbar header and buttons */
| |
− | --ggb-primary-variant-color: #880061; /* used for floating buttons on hover */
| |
− | --ggb-dark-color: #880061; /* used for highlighted text in dialogs */
| |
− | --ggb-light-color: #f186c0; /* used for progress bar */
| |
− | }
| |
− | </style>
| |
− | </pre>
| |
− | | |
− | =Speed up loading time with a service worker=
| |
− | You can speed up loading of the GeoGebra library by using a service worker.
| |
− | To use a service worker you should set a specific version of GeoGebra using <code>setHTML5Codebase()</code>.
| |
− | | |
− | To install the service worker, first you have to include the ''sworker-locked.js''
| |
− | file under your domain (e.g. ''www.example.com/path/sworker-locked.js'').
| |
− | The service worker file can be found under the ''GeoGebra/HTML5/5.0/web3d/'' folder
| |
− | in the ''GeoGebra Math Apps Bundle''.
| |
− | | |
− | Next, include the following snippet on the page where GeoGebra is loaded.
| |
− | Please change the path to the service worker. You can also set the appletLocation
| |
− | variable to enable the worker only in a specific folder (or leave it as '/' to use it on all pages of your domain):
| |
− | | |
− | var serviceWorkerPath = '/sworker-locked.js'
| |
− | var appletLocation = '/'
| |
− |
| |
− | function isServiceWorkerSupported() {
| |
− | return 'serviceWorker' in navigator && location.protocol === "https:";
| |
− | }
| |
− |
| |
− | function installServiceWorker() {
| |
− | if (navigator.serviceWorker.controller) {
| |
− | console.log("Service worker is already controlling the page.");
| |
− | } else {
| |
− | navigator.serviceWorker.register(serviceWorkerPath, {
| |
− | scope: appletLocation
| |
− | });
| |
− | }
| |
− | }
| |
− |
| |
− | if (isServiceWorkerSupported()) {
| |
− | window.addEventListener('load', function() {
| |
− | installServiceWorker()
| |
− | });
| |
− | } else {
| |
− | console.log("Service workers are not supported.");
| |
− | }
| |
− | | |
− | With this installed, when a user opens the page where the service worker is enabled,
| |
− | the application scripts get downloaded and cached by the service worker. This way,
| |
− | the next time that same user visits the page, the scripts are loaded from the
| |
− | cache instead of downloading them again from the servers.
| |