Integrate GeoGebra into a Hugo website as a shortcode

To integrate GeoGebra into a Hugo website as a shortcode, you can create a custom shortcode that embeds the GeoGebra applet using either the JavaScript method or an iframe. Here’s a step-by-step guide for both options:-

May 17, 2025·

Aryan

1. Create a Custom GeoGebra Shortcode

A. Using iframe Embed (Simplest Method)

Create the shortcode file:
- In your Hugo project, go to layouts/shortcodes/geogebra.html (or layouts/shortcodes/geogebra-iframe.html if you want to distinguish methods).
Add the following code:

{{ $materialID := .Get "id" | default "" }}
{{ $width := .Get "width" | default "800" }}
{{ $height := .Get "height" | default "600" }}
<iframe
  src="https://www.geogebra.org/material/iframe/id/{{ $materialID }}/width/{{ $width }}/height/{{ $height }}/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/sdz/false/sfbl/false"
  width="{{ $width }}"
  height="{{ $height }}"
  style="border:0;"
  allowfullscreen>
</iframe>

Use the shortcode in your content:

B. Using the JavaScript Method (More Flexible, Requires Script)

Create the shortcode file:
- Go to layouts/shortcodes/geogebra-js.html.
Add the following code:

{{ $materialID := .Get "id" | default "" }}
{{ $width := .Get "width" | default "800" }}
{{ $height := .Get "height" | default "600" }}
<div id="ggb-element-{{ $materialID }}"></div>
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
<script>
  var params = {
    "appName": "graphing",
    "width": {{ $width }},
    "height": {{ $height }},
    "showToolBar": true,
    "showAlgebraInput": true,
    "showMenuBar": true,
    "material_id": "{{ $materialID }}"
  };
  var applet = new GGBApplet(params, true);
  window.addEventListener("load", function() {
    applet.inject('ggb-element-{{ $materialID }}');
  });
</script>

Use the shortcode in your content:

<!-- 








  
  


 -->

GeoGebra-JS Graph

Math/GeoGebra

i-frame

2. How Hugo Shortcodes Work

Shortcodes are templates that allow you to insert dynamic content into your Markdown files¹²³.
Custom shortcodes are placed in the layouts/shortcodes directory and can accept both named and positional arguments²³.
Usage is straightforward: just call the shortcode name in your content, optionally passing parameters¹².

3. Additional Notes

Security: If you use inline shortcodes, ensure you trust your content authors and enable enableInlineShortcodes in your Hugo config if needed¹.
Naming: You can name your shortcode anything you like (e.g., geogebra, geogebra-iframe, geogebra-js)²³.
Parameters: Use named parameters (like id, width, height) for clarity and flexibility².

This approach allows you to easily embed GeoGebra applets in your Hugo site using shortcodes, making your content more interactive and visually engaging.

⁂