Sharing and embedding

The link

Your whole program is in the address. It is not stored anywhere and only goes to the people you give the link to. The Share button next to “Run” opens a dialog with the link to copy. Sections, title and task are part of the program itself and so travel along. Whoever opens the link sees CodeNatter in their language (English or German) – the program stays the same.

Show big shows the link as a full-screen QR code – for the projector: the class scans it with their phones. Very long programs no longer fit into a QR code; the view then says so.

Embedding

Under Embed you get a ready-made snippet for Moodle, WordPress and anywhere else you are allowed to paste HTML. With JavaScript you leave an empty placeholder, and the script puts the example into it:

<div data-codenatter="https://codenatter.de/en/?view=result#world(...)"
     data-title="Kara: collecting berries" data-height="300"></div>
<script src="https://codenatter.de/embed.js" async></script>

The script goes on the page once, however many examples are on it. It fits each one to its height – no scroll bar in the frame, no cut-off end.

Without a script

Some systems strip <script> from the text. Then you use the frame itself. It needs nothing else, but keeps the height you give it (the dialog estimates it from the length of the program):

<iframe src="https://codenatter.de/en/?view=result#world(...)"
        style="width:100%;height:300px;border:0"
        loading="lazy" title="Kara: collecting berries"></iframe>
<script src="https://codenatter.de/embed.js" async></script>

What the example starts with

Parameter	Shows
`?view=result`	only the result, runs straight away
`?view=split`	editor and result
`?view=editor`	only the editor, without buttons to run it
`&block=Straight`	starts with this section

The parameters go before the #, the program starts after it. The view belongs to the embedding: whoever opens the link directly gets the full page. Every embedded view has a link Open in CodeNatter into the full tool.

What is kept when embedded

Whatever someone changes in an embedded example survives a reload of the page as long as the tab stays open (in the browser’s session storage, not on a server). Reset brings back the original program. On a shared school computer nothing is left once the tab is closed.