✨ 100% Kostenlos – Kein Account nötig

Dein eigener Radio-Stream
für jede Webseite

Eine Zeile Code – und deine Besucher hören Musik. 5 Genres, sofort einsatzbereit.

61+Songs
5Genres
2+Webseiten
0€Kosten
🔌 Integration

Widget einbinden

Wähle die Methode die zu deiner Webseite passt. Jede Rubrik aufklappen für die vollständige Schritt-für-Schritt Anleitung.

Empfohlen
📻 Floating Widget – Script-Tag
Ein Script-Tag reicht – funktioniert auf jeder Webseite
▾

Das Widget erscheint als kleiner 📻-Button in einer Ecke deiner Seite. Besucher klicken drauf, der Player klappt auf. Läuft auf jeder Webseite – HTML, PHP, WordPress, Shopify, Wix, Squarespace, egal was.

Öffne den Quellcode deiner Webseite
Suche ganz unten nach </body> – das Ende jeder HTML-Seite
Füge den Code direkt vor </body> ein und speichere
Vor </body> einfügen
<script
  src="https://shimly.multifaucet.eu/stream/widget.js"
  data-genre="pop"
  data-position="bottom-right">
</script>
✅ data-genre auf dein Wunsch-Genre setzen (z.B. rock, jazz). data-position bestimmt die Ecke: bottom-right, bottom-left, top-right, top-left.
Fest eingebettet
🖼️ iFrame – Player direkt sichtbar
Player fest auf der Seite, kein Button nötig
▾

Der Player erscheint sofort sichtbar an der Stelle wo du ihn einfügst – ideal für Musik-Seiten, Sidebars oder dedizierte Radio-Seiten.

⚠️ Seitenwechsel: Beim Wechsel auf eine andere Unterseite stoppt die Musik. Für unterbrechungsfreies Abspielen über mehrere Seiten → Methode ③.
Öffne die Seite wo der Player erscheinen soll
Füge den Code an der gewünschten Stelle ein – z.B. in einer Sidebar, im Content-Bereich oder im Footer
iFrame – an beliebiger Stelle einfügen
<iframe
  src="https://shimly.multifaucet.eu/stream/index.php?genre=pop"
  width="360"
  height="360"
  frameborder="0"
  scrolling="no"
  style="border-radius:20px; border:none;
    box-shadow:0 8px 40px rgba(0,0,0,0.3);">
</iframe>
✅ width und height nach Bedarf anpassen. genre=pop durch dein Wunsch-Genre ersetzen.
Seitenübergreifend
🔄 Musik läuft beim Seitenwechsel weiter
Für selbst programmierte HTML/PHP Seiten
▾

Damit die Musik beim Seitenwechsel nicht stoppt, bleibt der iFrame im DOM bestehen – nur der Seiteninhalt wechselt per AJAX. So wie es z.B. Spotify Web macht.

Erstelle eine Haupt-Layout-Datei (z.B. layout.php) die auf jeder Seite eingebunden wird
Der iFrame für den Player wird einmalig in dieser Layout-Datei platziert und nie neu geladen
Alle internen Links laden Inhalte per fetch() in einen Content-Bereich – kein echter Seitenwechsel
layout.html – fertiges Grundgerüst
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Webseite</title>
  <style>
    /* Player immer sichtbar – wird nie neu geladen */
    #radio-player {
      position: fixed;
      bottom: 20px; right: 20px;
      width: 340px; height: 400px;
      border: none; border-radius: 16px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.4);
      z-index: 9999;
    }
    #content { padding: 20px; max-width: 900px; margin: 0 auto; }
  </style>
</head>
<body>

  <!-- Player lädt einmal und bleibt aktiv -->
  <iframe id="radio-player"
    src="https://shimly.multifaucet.eu/stream/index.php?genre=pop"
    scrolling="no"></iframe>

  <!-- Nur dieser Bereich wechselt bei Navigation -->
  <div id="content"></div>

  <script>
    function loadPage(url) {
      fetch(url)
        .then(r => r.text())
        .then(html => {
          // Nur body-Inhalt der geholten Seite nutzen
          const doc = new DOMParser().parseFromString(html, 'text/html');
          document.getElementById('content').innerHTML =
            doc.body ? doc.body.innerHTML : html;
          history.pushState({}, '', url);
        });
    }
    // Browser Zurück/Vor
    window.onpopstate = () => loadPage(location.pathname);
    // Beim Start aktuelle Seite laden
    loadPage(location.pathname);
    // Alle internen Links abfangen
    document.addEventListener('click', e => {
      const a = e.target.closest('a');
      if (a && a.href && a.origin === location.origin && !a.target) {
        e.preventDefault();
        loadPage(a.href);
      }
    });
  </script>

</body>
</html>
✅ Funktionsprinzip: Der iFrame lädt einmal und bleibt erhalten. Alle internen Links werden automatisch per JavaScript abgefangen und laden nur den Inhalt nach – ohne die Seite neu zu laden.
WordPress
🔵 WordPress – ohne Plugin
Direkt ins Theme, erscheint auf allen Seiten
▾

Das Widget in WordPress einbauen ohne Plugin – einfach in die footer.php. Erscheint automatisch auf jeder Seite des WordPress-Blogs oder der Website.

WordPress Dashboard → Design → Theme-Editor öffnen
Rechts in der Dateiliste footer.php anklicken
Suche nach <?php wp_footer(); ?> und füge den Code direkt davor ein
Datei aktualisieren klicken – fertig!
In footer.php vor wp_footer() einfügen
<script
  src="https://shimly.multifaucet.eu/stream/widget.js"
  data-genre="pop"
  data-position="bottom-right">
</script>
✅ Alternative für Elementor/Divi: Einstellungen → Benutzerdefinierter Code → Footer-Code → dort einfügen. Bei Gutenberg einen HTML-Block auf der gewünschten Seite einfügen und den iFrame-Code (Methode ②) nutzen.
Shopify
🛍️ Shopify
In Online-Shop einbauen über theme.liquid
▾

In Shopify läuft das Widget über die theme.liquid Datei – kein Plugin, keine App nötig.

Shopify Admin → Online Store → Themes → Aktuelles Theme → … → Code bearbeiten
Unter Layout die Datei theme.liquid öffnen
Suche nach </body> und füge den Code direkt davor ein
Speichern – das Widget erscheint im ganzen Shop
In theme.liquid vor </body> einfügen
<script
  src="https://shimly.multifaucet.eu/stream/widget.js"
  data-genre="pop"
  data-position="bottom-right">
</script>
Wix
⬛ Wix
Über Custom Code im Wix Dashboard
▾

Wix erlaubt eigenen Code über den Custom Code Bereich – kein Upgrade nötig ab Wix Business.

Wix Dashboard → Einstellungen → Benutzerdefinierter Code
+ Code hinzufügen klicken
Code einfügen, Position auf Body – Ende setzen, auf allen Seiten aktivieren
Übernehmen klicken und veröffentlichen
Custom Code – Body Ende
<script
  src="https://shimly.multifaucet.eu/stream/widget.js"
  data-genre="pop"
  data-position="bottom-right">
</script>
Squarespace
⬜ Squarespace
Über Code Injection im Squarespace Panel
▾

Squarespace bietet Code Injection für eigenen Code – verfügbar ab dem Business-Plan.

Squarespace → Design → Code-Injektion
Den Code in das Feld Fußzeile einfügen
Speichern – erscheint auf allen Seiten
Fußzeile – Code Injection
<script
  src="https://shimly.multifaucet.eu/stream/widget.js"
  data-genre="pop"
  data-position="bottom-right">
</script>
React / Next.js
⚛️ React / Next.js
Per useEffect in die App einbinden
▾

In React-Apps wird das Script per useEffect dynamisch eingebunden – sauber und ohne Konflikte mit dem Virtual DOM.

Öffne deine _app.jsx (Next.js) oder deine Root-Komponente (App.jsx)
Füge den folgenden useEffect Hook ein – das Script wird einmalig beim Start geladen
_app.jsx / App.jsx
import { useEffect } from 'react';

export default function App({ Component, pageProps }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://shimly.multifaucet.eu/stream/widget.js';
    script.setAttribute('data-genre', 'pop');
    script.setAttribute('data-position', 'bottom-right');
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, []);

  return <Component {...pageProps} />;
}
✅ Das return im useEffect sorgt dafür, dass das Script beim Unmount sauber entfernt wird. Für Next.js App Router: in layout.tsx einen separaten Client-Component erstellen.
Vue / Nuxt
💚 Vue.js / Nuxt
Per onMounted in die App einbinden
▾

In Vue.js wird das Script per onMounted in der Root-Komponente eingebunden.

App.vue
<script setup>
import { onMounted, onUnmounted } from 'vue';

let scriptEl = null;
onMounted(() => {
  scriptEl = document.createElement('script');
  scriptEl.src = 'https://shimly.multifaucet.eu/stream/widget.js';
  scriptEl.setAttribute('data-genre', 'pop');
  scriptEl.setAttribute('data-position', 'bottom-right');
  document.body.appendChild(scriptEl);
});
onUnmounted(() => {
  if (scriptEl) document.body.removeChild(scriptEl);
});
</script>
✅ Für Nuxt: den Code in app.vue einfügen oder als Plugin unter plugins/shimly-radio.client.ts anlegen.
Joomla
🟠 Joomla
Über benutzerdefiniertes HTML-Modul
▾

In Joomla kannst du das Widget als benutzerdefiniertes HTML-Modul einbinden – ohne Erweiterung.

Joomla Administrator → Erweiterungen → Module → Neu
Typ Benutzerdefiniertes HTML wählen
Im Editor auf Quellcode umschalten und den Code einfügen
Position auf debug oder eine Footer-Position setzen, speichern
Benutzerdefiniertes HTML-Modul
<script
  src="https://shimly.multifaucet.eu/stream/widget.js"
  data-genre="pop"
  data-position="bottom-right">
</script>

⚙️ Alle Parameter im Überblick

ParameterMögliche WerteStandard
data-genre electronic, jazz, metal, pop, rock electronic
data-position bottom-right, bottom-left, top-right, top-left bottom-right
🎸 Genres – klicken zum Testen

Für jeden Geschmack

Klicke ein Genre an – der Player links wechselt sofort dazu.

Electronic 9
Jazz 1
Metal 5
Pop 26
Rock 20

✨ Warum Shimly Radio?

Das Widget macht genau was du willst – ohne Kompromisse.

⚡
30-Sekunden-Setup
Eine Zeile Code reicht
🆓
100% Kostenlos
Kein Abo, kein Account
🎵
Viele Genres
Mehr kommen laufend dazu
📱
Responsive
Desktop & Mobile
🔒
Datenschutz
Kein Tracking der Besucher
📊
Widget-Tracking
Du siehst wer eingebunden hat