VLINK Produktrechner (DEV)

Einleitung

Übersicht

Der Produktrechner ist aktuell unter der folgenden URL verfügbar:
https://stwbo-vertrieb-rechner-bbfmaze8bgdkbze6.germanywestcentral-01.azurewebsites.net

Einzelne Produktrechner

Mittels URL-Parameter sind die Klickstrecken einzeln aufrufbar. Z.B: für das Solarpaket: URL+/?config=1-6
https://stwbo-vertrieb-rechner-bbfmaze8bgdkbze6.germanywestcentral-01.azurewebsites.net/?config=1

Einbettung mit CSS-Container (Responsive Design)

<style>

.rechner-wrapper {

position: relative;

overflow: hidden;

width: 100%;

padding-top: 75%; /* Erzeugt ein 4:3 Verhältnis, anpassbar */

}

.rechner-wrapper iframe {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 100%;

height: 100%;

border: none;

}

</style>

</div>

Einbettung auf eigener Seite öffnen

Einbettung JavaScript-Lösung

(function() {

const container = document.getElementById('rechner-container');

const iframe = document.createElement('iframe');

iframe.src = "https://stwbo-vertrieb-rechner-bbfmaze8bgdkbze6.germanywestcentral-01.azurewebsites.net/?config=1";

iframe.style.width = "100%";

iframe.style.height = "800px";

iframe.style.border = "none";

// Optional: Automatisches Scrollen verhindern oder Lade-Animation hinzufügen

container.appendChild(iframe);

})();

</script>

IFRAME

Falls der Rechner auf Mobilgeräten abgeschnitten wird, empfiehlt es sich, die height eventuell per CSS anzupassen oder ein kleines Skript (wie iFrame Resizer) zu nutzen.

<iframe

src="https://stwbo-vertrieb-rechner-bbfmaze8bgdkbze6.germanywestcentral-01.azurewebsites.net/?config=1"

width="100%"

height="800"

frameborder="0"

style="border:0; min-height: 600px;"

allowfullscreen>

<p>Ihr Browser unterstützt keine IFrames. Bitte besuchen Sie den Rechner direkt:

<a href="https://stwbo-vertrieb-rechner-bbfmaze8bgdkbze6.germanywestcentral-01.azurewebsites.net/?config=1">Hier klicken</a>.

</p>

</iframe>