Value of the Variable is not Displayed in Floating Webview

Floating Menus / Widgets
1

Hello everyone,

I’ve been trying for two days to display the content of the variable gpt-antwort in a Floating Webview. In the Scripting BTT settings, the variable is correctly shown and outputs a value.

However, despite this setup, the variable’s content is not being injected into the webview—the target element remains empty or displays an error message stating that the variable is not defined.

Below is my current setup:

HTML/Content:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>GPT Text via BTT</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    html {
      border: 1px solid #585755;
      border-radius: 10px;
      overflow: hidden;
    }
    body {
      background-color: #303030;
      font-family: Arial, sans-serif;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    /* Changed element ID to "gpt-antwort-text" */
    #gpt-antwort-text {
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="gpt-antwort-text"></div>
</body>
</html>

JavaScript:

btt.getVariable("gpt-antwort", function(value) {
  var outputElem = document.getElementById("gpt-antwort-text");
  if (outputElem) {
    if (value && value.trim() !== "") {
      outputElem.textContent = value;
    } else {
      outputElem.textContent = "The variable 'gpt-antwort' is empty.";
    }
  }
});

What am I doing wrong?

2

just out of interest, where did you get that btt.getVariable() from? It does not and has never existed. The correct
functions are listed here:

https://docs.folivora.ai/docs/10_2_floating_menu_javascript.html

And best only call them after the BTTInitialized() function has been called:

https://docs.folivora.ai/docs/10_4_webview_lifecycle.html

Here is a full example:

3

ChatGPT was 100% sure that it had read about this btt.getVariable() in the BetterTouchTool docs. Haha

Thank you very much, now it works. I tried a thousand different things and went through almost the entire documentation, but nothing seemed to work. However, I overlooked the “Webview Lifecycle” page.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>GPT Antwort WebView</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    html {
      border: 1px solid #585755;
      border-radius: 10px;
      overflow: hidden;
    }
    body {
      background-color: #303030;
      font-family: -apple-system;
      font-size: 13px;
      color: #ffffff;
      padding: 20px; /* optional: Abstand hinzufügen */
    }
    #gpt-antwort-text {
      padding: 5px;
      box-sizing: border-box;
      width: 100%;
    }
  </style>
</head>
<body onload="BTTInitialize()">
  <div id="gpt-antwort-text">Loading...</div>
  <script>
    async function BTTInitialize() {
          // Warten, bis die BTT-Umgebung initialisiert ist
          setTimeout(async () => {
            await reloadVariable();
            const contentElement = document.getElementById("gpt-antwort-text");
            const newWidth = contentElement.scrollWidth + 40;  // Passen Sie den Offset bei Bedarf an
            const newHeight = contentElement.scrollHeight + 40; // Passen Sie den Offset bei Bedarf an
            await resize_webview({ width: newWidth, height: newHeight });
          }, 100);
        }
    
    async function reloadVariable() {
      // Lese die Variable "gpt-antwort" aus
      let value = await get_string_variable({ variableName: "gpt-antwort" });
      // Setze den Inhalt in das Element
      document.getElementById("gpt-antwort-text").innerHTML = value;
    }
  </script>
</body>
</html>