Jan 29, 2025

The Secrets of Widdget

🔐 Secrets in Widdget Panels

Secrets are key-value pairs that store sensitive information and are shared across all widgets in a panel. They can be used for API keys, authentication tokens, or any other data that needs to be globally accessible but protected.

🔹 How Secrets Work

  • ✅ Secrets are global—they apply to all widgets within a panel.
  • 🔑 Each secret has a key (identifier) and a value.
  • 🔒 Values can be encrypted with a password for security.
  • 🛠️ Widgets can access secrets dynamically, making them powerful for configurations.

➕ Adding Secrets

To add a secret to your panel:

  1. Go to Panel Settings.
  2. Navigate to the Secrets section.
  3. Click "Add Secret".
  4. Enter a key (e.g., API_KEY) and a value.
  5. If needed, enable encryption and set a password.
  6. Click "Save".
Add Secret

🔓 Accessing Secrets in Widgets

Inside any widget, you can retrieve secrets dynamically using JavaScript:

  const secretAPIKey = window.widdget_vars["API_KEY_DEMO"];
  console.log("My secret API key is:", secretAPIKey);

If the secret is encrypted, users will be prompted to enter the decryption password when accessing the panel.

🛠️ Example: Using Secrets in a Widget

  <script>
  const secretAPIKey = window.widdget_vars["API_KEY_DEMO"];
    fetch(`https://api.example.com/data?key=$(secretAPIKey)`)
      .then(response => response.json())
      .then(data => console.log(data));
  </script>

🚀 Secure Your Data

Using secrets ensures that sensitive information is not hardcoded into your widgets. For maximum security, always encrypt critical values and use strong passwords.

Manage your secrets now at panel.widdget.app.