Difference between revisions of "Reference:GeoGebra Apps Embedding"

From GeoGebra Manual
Jump to: navigation, search
m (correct variable name)
((eg on mobile browsers))
(10 intermediate revisions by 4 users not shown)
Line 4: Line 4:
 
In order to embed GeoGebra apps into your page, you need to add the following three parts:
 
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:
+
{{Step|num=1}} Make sure you have this in the <code>&lt;head></code> section to make sure scaling works correctly (eg on mobile browsers)
 +
<pre>    <meta name=viewport content="width=device-width,initial-scale=1"></pre>
 +
 
 +
{{Step|num=2}} The javascript library deployggb.js needs to be included with this tag:
 
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
 
<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:
+
{{Step|num=3}} Create an element for the GeoGebra app on your page:
 
<pre>    <div id="ggb-element"></div> </pre>
 
<pre>    <div id="ggb-element"></div> </pre>
  
{{Step|num=3}} Configure and insert the app:
+
{{Step|num=4}} Configure and insert the app:
 
<pre><script>   
 
<pre><script>   
     var ggbApp= new GGBApplet({appName: "graphing", width:800, height:600, showToolBar:true, showAlgebraInput:true, showMenuBar:true }, true);
+
     var ggbApp = new GGBApplet({"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true }, true);
 
     window.addEventListener("load", function() {  
 
     window.addEventListener("load", function() {  
 
         ggbApp.inject('ggb-element');
 
         ggbApp.inject('ggb-element');
Line 18: Line 21:
 
</script></pre>
 
</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]].
+
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]].
  
 
=Live Examples=
 
=Live Examples=
Line 34: Line 37:
  
 
=Offline and Self-Hosted Solution=
 
=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]
+
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://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 below the definition of ggb
+
and you need to include the following line before the inject() call:
 
<pre>    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
 
<pre>    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>

Revision as of 07:49, 3 October 2018

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)

    <meta name=viewport content="width=device-width,initial-scale=1">

2 The javascript library deployggb.js needs to be included with this tag:

    <script src="https://cdn.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 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>

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.

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:

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 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:

    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
© 2024 International GeoGebra Institute