Difference between revisions of "Reference:GeoGebra Apps Embedding"
(For technical reasons, you need to use <code>5.2</code> not <code>5.0</code> after version 804) |
|||
(27 intermediate revisions by 8 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 | + | 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]]. |
=Quick Start= | =Quick Start= | ||
− | In order to embed GeoGebra apps into your page, you need to | + | In order to embed GeoGebra apps into your page, you need to add the following three parts: |
− | {{Step|num=1}} | + | {{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> | + | <pre><meta name=viewport content="width=device-width,initial-scale=1"> |
+ | <meta charset="utf-8"/></pre> | ||
− | {{Step|num=2}} | + | {{Step|num=2}} The javascript library deployggb.js needs to be included with this tag: |
− | <pre> | + | <pre><script src="https://www.geogebra.org/apps/deployggb.js"></script></pre> |
− | {{Step|num=3}} Configure and insert the app: | + | {{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> | <pre><script> | ||
− | var | + | var params = {"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true }; |
+ | var applet = new GGBApplet(params, true); | ||
window.addEventListener("load", function() { | window.addEventListener("load", function() { | ||
− | + | applet.inject('ggb-element'); | |
}); | }); | ||
</script></pre> | </script></pre> | ||
− | Simply change the appName from | + | 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= | =Live Examples= | ||
− | The following examples and their html source code show how to use GeoGebra apps | + | 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-graphing.html Graphing Calculator embedded] | ||
* [http://dev.geogebra.org/examples/html/example-geometry.html Geometry app embedded] | * [http://dev.geogebra.org/examples/html/example-geometry.html Geometry app embedded] | ||
Line 34: | Line 44: | ||
=Offline and Self-Hosted Solution= | =Offline and Self-Hosted Solution= | ||
− | We suggest you | + | 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 | 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> | <pre> <script src="GeoGebra/deployggb.js"></script></pre> | ||
− | and you need to include the following line | + | and you need to include the following line before the inject() call: |
− | <pre> | + | <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. |
Latest revision as of 13:12, 27 September 2023
This page describes how to embed GeoGebra Apps into your website. For more information on how to interact with embedded apps, please see GeoGebra Apps API.
Quick Start
In order to embed GeoGebra apps into your page, you need to add the following three parts:
1 Make sure you have this in the <head>
section to make sure scaling works correctly (eg on mobile browsers) and that Unicode works
<meta name=viewport content="width=device-width,initial-scale=1"> <meta charset="utf-8"/>
2 The javascript library deployggb.js needs to be included with this tag:
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
3 Create an element for the GeoGebra app on your page:
<div id="ggb-element"></div>
4 Configure and insert the app:
<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>
Simply change the appName
parameter from graphing
to geometry
or 3d
to get one of our other apps. To load an activity you can use eg "material_id":"RHYH3UQ8"
or "filename":"myFile.ggb"
and you can customize our apps further by using various 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:
GeoGebra Apps API
The following examples show how you can interact with embedded apps through the GeoGebra Apps API:
- Showing & hiding objects with buttons
- Saving & loading state
- 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 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
<script src="GeoGebra/deployggb.js"></script>
and you need to include the following line before the inject() call:
applet.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
Alternatively if you just need to fix to a specific version then you can still use the CDN like this (don't change the 5.0.
just the 498
)
applet.setHTML5Codebase("https://www.geogebra.org/apps/5.0.498.0/web3d");
For technical reasons, you need to use 5.2
not 5.0
after version 804 eg
applet.setHTML5Codebase("https://www.geogebra.org/apps/5.2.804.0/web3d");
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
<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>
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 setHTML5Codebase()
.
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.