diff --git a/layouts/partials/bergamotparseinputmodes.js b/layouts/partials/bergamotparseinputmodes.js
new file mode 100644
index 0000000..b43263e
--- /dev/null
+++ b/layouts/partials/bergamotparseinputmodes.js
@@ -0,0 +1,17 @@
+{
+{{ if . }}
+{{ range $name := split . ";" }}
+{{ if eq $name "query" }}
+    "Query": "query",
+{{ else }}
+    {{ $pieces := split $name ":" }}
+    {{ $name := index $pieces 0 }}
+    {{ $modestring := index $pieces 1 }}
+    "{{ $name }}": { "custom": "{{ $modestring }}" },
+{{ end }}
+{{ end }}
+{{ else }}
+    "Languge Term": { "custom": "Bergamot Object Language" },
+    "Query": "query",
+{{ end }}
+}
diff --git a/layouts/shortcodes/bergamot_exercise.html b/layouts/shortcodes/bergamot_exercise.html
new file mode 100644
index 0000000..444406d
--- /dev/null
+++ b/layouts/shortcodes/bergamot_exercise.html
@@ -0,0 +1,21 @@
+<div class="bergamot-exercise">
+    <details open>
+        <summary>
+            <span class="bergamot-exercise-label">
+                <span class="bergamot-exercise-number"></span>
+                {{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}:
+            </span>
+        </summary>
+        {{ transform.Markdownify .Inner }}
+
+        <div class="bergamot-button-group">
+            {{ if or (eq (.Get "preset") "") (eq (.Get "preset") nil) }}
+            {{ else }}
+            <button class="bergamot-button bergamot-play" onclick='window.Bergamot.runPreset(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}", "{{ .Get "preset" }}")'>{{ partial "icon.html" "play" }}Start Bergamot</button>
+            <button class="bergamot-button bergamot-close bergamot-hidden" onclick='window.Bergamot.close(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}")'>{{ partial "icon.html" "x" }}Close Bergamot</button>
+            {{ end }}
+        </div>
+
+        <div id="bergamot-widget-container-{{ .Get "id" }}"></div>
+    </details>
+</div>
diff --git a/layouts/shortcodes/bergamot_widget.html b/layouts/shortcodes/bergamot_widget.html
new file mode 100644
index 0000000..8d3f2a9
--- /dev/null
+++ b/layouts/shortcodes/bergamot_widget.html
@@ -0,0 +1,8 @@
+<div id="{{ .Get "id" }}"></div>
+<script>
+    window.addEventListener('load', function() {
+        window.Bergamot.run(null, '{{ .Get "id" }}',
+            {{ partial "bergamotparseinputmodes.js" (.Get "modes") | safeJS }},
+            '{{ .Get "prompt" }}', '{{ .Inner }}', '{{ default "default" (.Get "rendering") }}', '{{ .Get "query" }}');
+    });
+</script>