A hype document that greets visitors at reception

Hello Tumulter,

I've been trying for a few days to create a Tumult document that will greet visitors coming into the house with their names and other details on our tablet at reception.

The document should be on our web space and therefore accessible to everyone. So that all colleagues can easily enter the details from their workstation and the website is always loaded and visible on the tablet via the presentation app. If there are no appointments, the document should play an animation.

The document will later have several pages that serve as templates when one visitor arrives, two visitors arrive, five visitors arrive, etc.

But I can't get the entries to be saved. They always disappear when the document is reloaded. And when the document is accessed from another browser, the initial entries are still there.

Is this even possible the way I imagine it to be?

The script in the :

        document.addEventListener('DOMContentLoaded', function() {
            var checkExist = setInterval(function() {
                if (document.getElementById('01-time') && document.getElementById('01-name') && document.getElementById('01-company')) {
            }, 100); // Überprüfe alle 100 Millisekunden

            function attachEventListeners() {
                document.getElementById('01-time').addEventListener('blur', function() {
                    console.log("01-time verlassen");
                    localStorage.setItem('01-time', this.value);

                document.getElementById('01-name').addEventListener('blur', function() {
                    console.log("01-name verlassen");
                    localStorage.setItem('01-name', this.value);

                document.getElementById('01-company').addEventListener('blur', function() {
                    console.log("01-company verlassen");
                    localStorage.setItem('01-company', this.value);

The field details:

This is not the actual document, just one with the possible functions:
Besucher.zip (22,9 KB)

There is no error in the console and I get the event messages on leaving the fields. The values of the fields in Local Storage are undefined.

I have no other actions or scripts that are executed when any scenes are started. The ones that are still in the library are not linked.

Anyway, I'm on the verge of going crazy.

So if anyone has any tips or help, that would be great!

Kind regards

You can use HypeReactiveContent and Hype StateKit…

If Hype StateKit is using normal local storage, then this

Will still occur.


I have used in the past with Chrome extensions localStorage sync which allows a logged in user to see the local storage saved from browser to browser. on different devices. I think it is only for mozilla browsers?

And may be one aimed at extensions that manage a page ( which is how I used it at the time. )


Some sort of database may be a better option.

Hello Max,

thanks for pointing out those extensions. But ... I just can't get it to work. What am I missing?
Besucher.zip (41,7 KB)

This sound like it also could be done via remote… if the tablet has an internet connection it is really easy to connect it to a JSON file on a server. The only thing missing would be setting up the fields in:

Then you can just consume the data and display it using Hype Data Magic for example.

You could load the JSON like this on scene load of the first scene:

  .then(response => {
    if (!response.ok) {
      // If the response status is not OK, throw an error to trigger the catch block
      throw new Error(`HTTP error! status: ${response.status}`);
    return response.json();
  .then(data => {
    if (data && data.error) {
      // If the JSON contains an error property, handle it as an error
      throw new Error(data.error); // This will lead to the catch block being executed
    } else {
      // If data is available and there's no error, use HypeDataMagic to set the data
      // Switch to the next scene, adjust transition settings as needed
      hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1);
  .catch(error => {
    // Log the error for debugging purposes
    console.error('There was a problem with the fetch operation:', error);

    // Create an error object with the error message
    const errorData = { errorMessage: error.message };

    // Use HypeDataMagic to set the error object

    // Navigate to the "errorMessage" scene in case of an error
    hypeDocument.showSceneNamed("errorMessage", hypeDocument.kSceneTransitionCrossfade, 1.1);

Remember to set the url in head HTML:

<script type="text/javascript">
    // Define the URL of your JSON file (absolute or relative)
    var jsonUrl = 'https://example.com/data.json';

Also put your display and animation on the second scene and beyond. If you want to refresh regularly you can just jump back to the first scene that loads the data fresh.

Also add a scene called errorMessage to display if something goes wrong. You can jump back to the first scene from there to retry after a while if you want.

The only thing for local testing is the CORS problem. Best all tested form the same online server (meaning upload the Hype export to the same location as the CMS).

Another optional solution to allow local testing is to use a PHP CORS proxy as seen here:

// Specify the name of the JSON file
$jsonFileName = 'data.json';

// Set headers to avoid CORS restrictions
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

// Check if the JSON file exists in the same directory
if (file_exists($jsonFileName)) {
    // Read the contents of the JSON file
    $jsonData = file_get_contents($jsonFileName);

    // Output the JSON data
    echo $jsonData;
} else {
    // Return an error message if the file does not exist
    echo json_encode(array('error' => 'File not found.'));

If that is to technical… you can also easily use Google Sheets as a backend data source as seen here:

Recently a fellow Hype user used it and it worked great for dynamic ads. You can also use this slightly modification to use only the first and second row as a key/value store.

I am on the road so no laptop. Will look at your file later. I am typing away on my phone all this time.

Schau mal hier…

Besucher-Max.hype.zip (107,4 KB)

Du bist der Knaller! Danke. Da habe ich total falsche Kreise gedreht. Ganz weit entfernt vom Hype-Universum.
Kaffee ist unterwegs...

1 Like

Gerne, Danke!

Gern geschehen.

Nur zwei Dinge:

  • wenn man in den Feldern schreibt, und ein Leerzeichen eingibt, erscheint das Wort danach an erster Stelle im Feld
  • beim Zugriff von einem anderen Browser auf das Dokument, sind die Eingaben wieder weg -> ich werde das Problem jetzt aber per Fernzugriff auf das Tablet lösen


Aber nochmal vielen Danke für’s Geradebiegen.

Ah, das liegt daran, dass du den Save State auch beim MouseUp-Event aufrufst… das solltest du vermeiden. Wenn du speichern möchtest, macht das FocusOut-Event am meisten Sinn. Dieser wird jedoch nicht nativ von Hype unterstützt. Du kannst ihn aber mittels HypeActionEvents unterstützen.

Hier ist eine Version mit HypeActionEvents und dem Focusout-Event. Da brauchst du auch keinen Speicher-Knopf mehr... wenn man das Textfeld verlässt, wird gespeichert.

Besucher-focusout-Max.hype.zip (110,3 KB)