<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>