Configuring Integration Mode in Detail

Standalone or embedded — understand both modes step by step, provide URLs correctly, and preview the result visually

On this page

01Standalone Mode Step by Step 02Embedded Mode Step by Step 03Providing URLs Correctly 04How Header and Footer Look 05Frequently Asked Questions

01

Standalone Mode Step by Step

In standalone mode, the generated HTML files are completely self-contained. No server, no build tool, no framework. You open a file in your browser — and the course runs. This makes standalone mode ideal for quick sharing, offline use, and hassle-free distribution.

How to use the files:

📥

Download

→

📂

Unzip

→

🌐

Open in Browser

→

🧭

Navigate

What does this mean in practice?

✅

No Footer

Standalone files have no footer. No legal notice, no privacy link, no copyright text. The page ends after the last content module.

✅

No External Links

No GitHub icon, no docs link, no references to external pages. All links are relative and only point to other files in the same folder.

✅

Relative Paths

All internal links use relative paths (../l1/file.html). Navigation works regardless of where the folder is located.

✅

Fully Offline

Google Fonts are loaded via a link, but all content and navigation work without an internet connection. Fonts fall back to system fonts when offline.

Ideal for: Sharing via email or Slack, storing on a USB stick, offline training sessions, internal workshops without Wi-Fi, quick reviews on a plane. Whenever the files need to stand on their own.

✏️ Quick Check

You want to put the course on your company's GitHub Pages site. Which mode do you choose?

Standalone — GitHub Pages doesn't need external links

Embedded — the files become part of a website

Both — the skill automatically creates two versions

02

Embedded Mode Step by Step

In embedded mode, the HTML files become part of a website. The skill adds a header with external links and a footer with legal information. All external links open in a new tab using target="_blank" rel="noopener".

What embedded mode adds:

1

Header Gets External Links

The navigation bar displays links to the GitHub repository and optionally to documentation. A GitHub icon links directly to the repo.

2

Footer Is Generated

At the bottom of every page, a footer appears with a legal notice link (required), an optional privacy policy link, and an optional copyright notice.

3

External Links Open in New Tab

All references to external pages (GitHub, legal notice, privacy) use target="_blank" rel="noopener", so the course is never navigated away from.

4

Internal Navigation Stays Relative

Links between course pages still use relative paths. Only the additional external links are absolute.

What is this for? GitHub Pages, Netlify, Vercel, company documentation portals, internal wikis — anywhere the course files are embedded in a larger website context and need a consistent appearance.

03

Providing URLs Correctly

When you choose embedded mode, the skill asks for URLs. Here are the rules — what you must provide, what is optional, and what the URLs should look like.

🔗

GitHub URL

Must be the repository root. Displayed as an icon link in the header.

Required

✅ https://github.com/user/repo

❌ github.com/user/repo

⚖️

Legal Notice URL

Full URL including https://. Appears as a link in the footer.

Required

✅ https://example.com/legal

❌ /legal

🛡️

Privacy Policy URL

Also a full URL. Omit if not needed — the footer will be generated without this link.

Optional

✅ https://example.com/privacy

©️

Copyright Text

A free-form text string. Not a URL — just the text you want displayed in the footer.

Optional

📋 Checklist Before Starting (Embedded Mode)

☑️ GitHub URL ready? Must be the repository root (e.g. https://github.com/org/repo)

☑️ Legal notice URL available? Full URL with https:// prefix

⬜ Privacy policy URL? Optional — only provide if a privacy policy page exists

Tip: If you're unsure whether a URL is correct, open it in your browser. If the page loads, the URL is right. Relative paths like /legal or paths without a protocol like example.com will not work.

04

How Header and Footer Look

So you know what to expect before generating: here are visual mockups of both modes. This is how the header and footer will appear in the finished files.

Standalone Mode — Navigation

Course Title 🇩🇪

Course content — modules, text, visualizations ...

No footer. Page ends after the last module.

Embedded Mode — Navigation + Footer

Course Title GitHub 🇩🇪

Course content — modules, text, visualizations ...

Header with GitHub link. Footer with legal notice, privacy, GitHub, and copyright.

Element	Standalone	Embedded
Header Title	Course title + Dots + Language switch	Course title + Dots + GitHub link + Language switch
GitHub Icon	—	Links to repository (new tab)
Footer	—	Legal notice + optional privacy + optional copyright
External Links	None	All with target="_blank" rel="noopener"

05

Frequently Asked Questions

The most common questions about integration mode — answered briefly and directly.

Can I switch from standalone to embedded later? ›

Not without regenerating. The mode determines whether header and footer are written into the HTML code. Switching afterward would require the skill to completely regenerate the course. The simplest approach: restart the skill and choose the other mode this time.

Can I provide a legal notice but skip the privacy link? ›

Yes. The privacy policy URL is optional. If you don't provide it, the footer will only show the legal notice link (and copyright if given). The skill asks for it, but you can simply skip that field.

Do external links work offline? ›

No. External links (GitHub, legal notice, privacy) require an internet connection. However, internal navigation between course pages works fully offline since it uses relative paths. In standalone mode there are no external links, so everything is available offline.

Can I customize the footer afterward? ›

The skill generates the footer automatically based on your URLs. However, you can manually edit the HTML afterward — they are simple <footer> elements. Search the code for class="footer" and change the links or text as needed.

Navigation

← Back to Overview