<div style="max-width: 400px; margin: auto; padding: 1.5rem; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: 'Roboto', sans-serif;">

<h2 style="margin-top: 0; font-size: 1.4rem; color: #333;">Feedback hinterlassen</h2>

<form id="bewertung-form">

<div style="position: relative; margin-top: 1rem;">

<span class="material-icons" style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #888;">person</span>

<input type="text" id="name" placeholder="Vorname" required style="width: 100%; padding: 0.75rem 0.75rem 0.75rem 2.5rem; border-radius: 8px; border: 1px solid #ccc; font-size: 1rem;">

</div>

<div style="position: relative; margin-top: 1rem;">

<span class="material-icons" style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #888;">email</span>

<input type="email" id="email" placeholder="E-Mail" required style="width: 100%; padding: 0.75rem 0.75rem 0.75rem 2.5rem; border-radius: 8px; border: 1px solid #ccc; font-size: 1rem;">

</div>

<div style="position: relative; margin-top: 1rem;">

<span class="material-icons" style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #888;">phone</span>

<input type="tel" id="phone" placeholder="Telefonnummer (optional)" style="width: 100%; padding: 0.75rem 0.75rem 0.75rem 2.5rem; border-radius: 8px; border: 1px solid #ccc; font-size: 1rem;">

</div>

<div style="margin-top: 1rem; display: flex; align-items: flex-start;">

<input type="checkbox" id="consent" required style="margin-right: 0.5rem; margin-top: 0.3rem;">

<label for="consent" style="font-size: 0.9rem;">Ich stimme der Verarbeitung meiner Daten laut Datenschutzerklärung zu.</label>

</div>

<button type="submit" style="margin-top: 1.5rem; width: 100%; padding: 0.75rem; background: #6200ea; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer;">

Absenden

</button>

</form>

<script>

// 🔁 Variante wählen: true = Weiterleitung auf Danke-Seite | false = Danketext anzeigen

const redirectAfterSuccess = false;

const thankYouPageUrl = "https://deinkunde.de/danke"; // Nur nutzen, wenn redirectAfterSuccess = true

async function sendToBewertungsturbo(name, email, phone = "") {

const response = await fetch("https://dashboard.bewertungsturbo.de/api/tenant/v1/request-reviews/campaigns/invite", {

method: "POST",

headers: {

"Content-Type": "application/json",

"Authorization": "Bearer DEIN_API_KEY" // 🔐 HIER den API Key einfügen

},

body: JSON.stringify({

campaignId: "DEINE_KAMPAGNEN_ID", // 🎯 HIER die Kampagnen-ID einfügen

contact: {

firstName: name,

email: email,

phoneNumber: phone

}

})

});

const result = await response.json();

if (response.ok) {

if (redirectAfterSuccess) {

window.location.href = thankYouPageUrl;

} else {

document.querySelector("#bewertung-form").innerHTML = "<p style='font-size: 1rem; color: green;'>Vielen Dank! Deine Einladung wurde erfolgreich versendet. 🙌</p>";

}

} else {

alert("Fehler: " + result.message);

}

}

document.querySelector("#bewertung-form").addEventListener("submit", function (e) {

e.preventDefault();

const name = document.querySelector("#name").value;

const email = document.querySelector("#email").value;

const phone = document.querySelector("#phone").value;

const consent = document.querySelector("#consent").checked;

if (!consent) {

alert("Bitte stimme der Datenschutzerklärung zu.");

return;

}

sendToBewertungsturbo(name, email, phone);

});

</script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</div>