Plattform-spezifische Installation

Detaillierte Anleitungen für Ihre Website-Plattform – vom Anfänger bis zum Entwickler

Wichtig: In allen Code-Beispielen müssen Sie ihr-slug oder IHRE-KAMPAGNEN-ID durch Ihren eigenen Kampagnen-Slug ersetzen.
Wo finden Sie Ihren Slug? Dashboard → Kampagnen → Blaue Box "Widget-Slug" → Kopieren

Schnellnavigation

Wählen Sie Ihre Plattform aus

📝WordPress 🛍️Shopify 🎨Webflow ✨Wix 🔲Squarespace 🛒Shopware 🌐Jimdo ☁️IONOS ⚡Framer 📄Carrd 💻Statisch / HTML ⚛️React/Next.js 💚Vue/Nuxt 🅰️Angular 🔥Svelte/SvelteKit 📊Google Tag Manager 🔒Content Security Policy ⚡Caching & CDN

Phase 1: Website-Baukästen

📝 WordPress

Die weltweit beliebteste CMS-Plattform (Gutenberg, Elementor, Classic Editor)

Empfohlen für WordPress: Verwenden Sie die iFrame-Variante für maximale Kompatibilität mit Security-Plugins (Wordfence, iThemes Security) und Cache-Systemen (WP Rocket, W3 Total Cache).

Kampagnen-Slug aus Dashboard kopieren

Dashboard → Kampagnen → Blaue Box "Widget-Slug"
Beispiel: Wenn Ihr Slug mein-shop ist, verwenden Sie diesen in Schritt 2.

Gutenberg Block Editor: HTML-Block hinzufügen

Öffnen Sie die Seite/Beitrag → Klicken Sie + → Suchen Sie "Benutzerdefiniertes HTML"

<!-- Kundenmagnet Widget (iFrame-Variante) -->
<iframe
  src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10"
  style="width: 100%; border: none; min-height: 400px;"
  title="Kundenbewertungen"
></iframe>

<!-- WICHTIG: Ersetzen Sie "ihr-slug" mit Ihrem Kampagnen-Slug aus Schritt 1! -->
<!-- Beispiel: campaign=mein-shop -->

Häufige Probleme beheben

⚠️ Widget wird nicht angezeigt

• Slug falsch? Prüfen Sie, dass Sie ihr-slug ersetzt haben
• Caching-Plugins (z.B. WP Rocket): Cache leeren
• Security-Plugins (z.B. Wordfence): Domain kundenmagnet-app.de zur Whitelist hinzufügen
• Browser-Cache: Strg+Shift+R (Windows) / Cmd+Shift+R (Mac)

Warum iFrame für WordPress?

✓ Funktioniert mit allen Security-Plugins
✓ Keine CORS/CSP-Probleme
✓ Kein Cookie-Banner erforderlich
✓ 100% garantierte Funktionalität

🛍️ Shopify

E-Commerce-Plattform mit Theme-Integration und Custom Sections

Slug-Hinweis: In allen Shopify-Code-Beispielen müssen Sie ihr-slug durch Ihren Kampagnen-Slug aus dem Dashboard ersetzen!

Kampagnen-Slug kopieren

Dashboard → Kampagnen → Blaue Box "Widget-Slug" → Kopieren

Theme-Editor öffnen

Online Store → Themes → Customize

Custom Liquid Section hinzufügen

Klicken Sie "Add section" → "Custom Liquid"

<!-- Shopify Custom Liquid Section -->
<div class="kundenmagnet-section page-width">
  <h2>{{ section.settings.heading }}</h2>
  
  <!-- Widget iFrame -->
  <iframe
    src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10&theme=light"
    style="width: 100%; border: none; min-height: 500px;"
    title="Kundenbewertungen"
    loading="lazy"
  ></iframe>
</div>

<style>
.kundenmagnet-section {
  margin: 60px auto;
  padding: 0 20px;
}
.kundenmagnet-section h2 {
  text-align: center;
  margin-bottom: 2rem;
}
</style>

<!-- WICHTIG: Ersetzen Sie "ihr-slug" mit Ihrem Kampagnen-Slug! -->
<!-- Wo finden? Dashboard → Kampagnen → Widget-Slug kopieren -->

Beispiel: Wenn Ihr Kampagnen-Slug online-shop-2024 ist, ändern Sie die Zeile zu:
campaign=online-shop-2024&limit=10

🎨 Webflow

Professioneller Website-Builder mit Custom Code Support

Slug-Hinweis: Ersetzen Sie in allen Code-Beispielen ihr-slug mit Ihrem Kampagnen-Slug aus dem Dashboard (Kampagnen → Widget-Slug).

Schritt 1: Öffnen Sie Ihre Seite im Webflow Designer
Schritt 2: Fügen Sie ein "Embed" Element hinzu
Schritt 3: Fügen Sie folgenden Code ein:

<!-- iFrame-Variante (funktioniert immer) -->
<iframe
  src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10"
  style="width: 100%; border: none; min-height: 400px;"
  title="Kundenbewertungen"
></iframe>

<!-- WICHTIG: "ihr-slug" ersetzen! -->
<!-- Dashboard → Kampagnen → Widget-Slug kopieren -->

✨ Wix

Website-Baukasten mit Drag & Drop Editor

Wichtig: Vergessen Sie nicht, ihr-slug durch Ihren Kampagnen-Slug zu ersetzen! (Dashboard → Kampagnen → Widget-Slug)

Seite im Wix-Editor öffnen

Klicken Sie auf "+" → "Embed" → "Embed Code"

Wählen Sie "Code" (nicht "Website")

Fügen Sie den iFrame-Code ein (siehe unten)

<!-- Wix Embed Code -->
<iframe
  src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=8"
  style="width: 100%; border: none; min-height: 450px;"
  title="Kundenbewertungen"
></iframe>

<!-- WICHTIG: "ihr-slug" ersetzen mit Ihrem Kampagnen-Slug! -->
<!-- Beispiel: campaign=wix-shop-bewertungen -->

Größe anpassen und "Veröffentlichen" klicken

🔲 Squarespace

Premium Website-Builder

Slug-Hinweis: In Schritt 3 müssen Sie ihr-slug mit Ihrem Kampagnen-Slug aus dem Dashboard ersetzen!

Seite bearbeiten im Squarespace-Editor

Klicken Sie auf "+" → "Code"

Fügen Sie den iFrame-Code ein:

<iframe
  src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10"
  style="width: 100%; border: none; min-height: 400px;"
  title="Kundenbewertungen"
></iframe>

<!-- WICHTIG: "ihr-slug" durch Ihren Kampagnen-Slug ersetzen! -->
<!-- Dashboard → Kampagnen → Widget-Slug kopieren -->

Speichern und Veröffentlichen

🛒 Shopware

Deutsche E-Commerce-Plattform mit Shopping Experiences

Slug-Hinweis: Ersetzen Sie in allen Code-Beispielen ihr-slug mit Ihrem Kampagnen-Slug aus Dashboard → Kampagnen → Widget-Slug.

Shopping Experiences → Neue Experience erstellen

Layout auswählen → "HTML-Element" hinzufügen

iFrame-Code einfügen:

<!-- Shopware HTML-Element -->
<div class="kundenmagnet-widget-container">
  <h2>Kundenbewertungen</h2>
  <iframe
    src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10"
    style="width: 100%; border: none; min-height: 400px;"
    title="Kundenbewertungen"
  ></iframe>
</div>

<!-- WICHTIG: "ihr-slug" durch Ihren Kampagnen-Slug ersetzen! -->
<!-- Beispiel: campaign=shopware-store -->

Speichern und Seite zuweisen

🌐 Jimdo

Website-Baukasten Made in Germany

Slug-Hinweis: Vergessen Sie nicht, ihr-slug mit Ihrem Kampagnen-Slug zu ersetzen (Dashboard → Kampagnen → Widget-Slug).

Seite bearbeiten in Jimdo

Element hinzufügen → "Widget/HTML"

iFrame-Code einfügen:

<iframe
  src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10"
  style="width: 100%; border: none; min-height: 400px;"
  title="Kundenbewertungen"
></iframe>

<!-- WICHTIG: "ihr-slug" ersetzen! -->
<!-- Dashboard → Kampagnen → Widget-Slug -->

Speichern

☁️ IONOS (1&1)

MyWebsite & Hosted Websites

Slug-Hinweis: Ersetzen Sie ihr-slug mit Ihrem Kampagnen-Slug aus dem Dashboard (Kampagnen → Widget-Slug).

IONOS Website bearbeiten

Element hinzufügen → "HTML"

iFrame-Code einfügen:

<iframe
  src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10"
  style="width: 100%; border: none; min-height: 400px;"
  title="Kundenbewertungen"
></iframe>

<!-- WICHTIG: "ihr-slug" durch Ihren Kampagnen-Slug ersetzen! -->

Veröffentlichen

⚡ Framer

Design-to-Code Website-Builder

Slug-Hinweis: In allen Code-Beispielen ihr-slug mit Ihrem Kampagnen-Slug ersetzen (Dashboard → Kampagnen → Widget-Slug).

Framer-Projekt öffnen

Insert → Embed

iFrame-Code einfügen:

<iframe
  src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10"
  style="width: 100%; border: none; min-height: 400px;"
  title="Kundenbewertungen"
></iframe>

<!-- WICHTIG: "ihr-slug" ersetzen! -->

Größe anpassen und Veröffentlichen

📄 Carrd

Simple One-Page Website Builder

Slug-Hinweis: Ersetzen Sie ihr-slug mit Ihrem Kampagnen-Slug (Dashboard → Kampagnen → Widget-Slug).

Carrd-Seite bearbeiten

Container hinzufügen → "Embed"

Code Style: "Inline" auswählen

iFrame-Code einfügen:

<iframe
  src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=6"
  style="width: 100%; border: none; min-height: 350px;"
  title="Kundenbewertungen"
></iframe>

<!-- WICHTIG: "ihr-slug" ersetzen! -->

Veröffentlichen (Pro-Feature erforderlich)

Hinweis: Embed-Code ist ein Pro-Feature bei Carrd (ab $9/Jahr)

💻 Statisches HTML

Für reine HTML/CSS/JavaScript-Websites ohne CMS

Slug-Hinweis: Im Code-Beispiel unten müssen Sie ihr-slug mit Ihrem Kampagnen-Slug ersetzen (Dashboard → Kampagnen → Widget-Slug).

Komplettes HTML-Beispiel mit Widget-Integration:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Website - Kundenbewertungen</title>
    <style>
        .testimonials {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }
        .testimonials h2 {
            text-align: center;
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>Meine Website</h1>
    </header>
    
    <main>
        <section class="testimonials">
            <h2>Das sagen unsere Kunden</h2>
            
            <!-- iFrame-Variante (Empfohlen) -->
            <iframe
                src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug&limit=10"
                style="width: 100%; border: none; min-height: 400px;"
                title="Kundenbewertungen"
            ></iframe>
            
            <!-- ODER JavaScript-Variante (mit automatischem Fallback): -->
            <!--
            <div 
                data-kundenmagnet-widget
                data-campaign="ihr-slug"
                data-limit="10"
                data-theme="light"
            ></div>
            <script src="https://kundenmagnet-app.de/widget.js" async></script>
            -->
        </section>
    </main>
    
    <footer>
        <p>&copy; 2025 Meine Website</p>
    </footer>
</body>
</html>

<!-- WICHTIG: "ihr-slug" durch Ihren Kampagnen-Slug ersetzen! -->
<!-- Dashboard → Kampagnen → Widget-Slug kopieren -->
<!-- Beispiel: campaign=meine-webseite -->

iFrame-Variante

✓ Funktioniert garantiert überall
✓ Kein JavaScript nötig
✓ Einfachste Integration

JavaScript-Variante

✓ Bessere Performance
✓ Shadow DOM (isoliert)
✓ Auto-Fallback zu iFrame

Phase 2: JavaScript Frameworks

⚛️ React / Next.js

Moderne React-Anwendungen (Create React App, Vite, Next.js App Router)

Slug-Hinweis: In allen React-Komponenten müssen Sie den campaign-Prop mit Ihrem Kampagnen-Slug aus dem Dashboard füllen!

Schritt 1: Erstellen Sie eine wiederverwendbare Komponente:

// app/components/KundenmagnetWidget.tsx
'use client'

import Script from 'next/script'

interface Props {
  campaign: string  // Kampagnen-Slug aus Dashboard!
  limit?: number
  theme?: 'light' | 'dark' | 'auto'
}

export function KundenmagnetWidget({ 
  campaign,  // WICHTIG: Hier Ihren Slug übergeben!
  limit = 10, 
  theme = 'light' 
}: Props) {
  return (
    <>
      <div
        data-kundenmagnet-widget
        data-campaign={campaign}
        data-limit={limit}
        data-theme={theme}
      />
      <Script 
        src="https://kundenmagnet-app.de/widget.js" 
        strategy="lazyOnload"
      />
    </>
  )
}

/* Verwendung in Ihrer page.tsx:
   
   import { KundenmagnetWidget } from '@/components/KundenmagnetWidget'
   
   <KundenmagnetWidget campaign="ihr-slug" limit={8} />
   
   WICHTIG: "ihr-slug" ersetzen!
   Dashboard → Kampagnen → Widget-Slug kopieren
   Beispiel: campaign="mein-nextjs-shop"
*/

Verwendungsbeispiel:

// app/page.tsx
import { KundenmagnetWidget } from '@/components/KundenmagnetWidget'

export default function HomePage() {
  return (
    <main>
      <h1>Willkommen</h1>
      
      <section className="testimonials">
        <h2>Kundenbewertungen</h2>
        {/* Ihren Kampagnen-Slug hier einfügen! */}
        <KundenmagnetWidget campaign="mein-shop" limit={8} theme="light" />
      </section>
    </main>
  )
}

Denken Sie daran: "mein-shop" mit Ihrem tatsächlichen Kampagnen-Slug ersetzen!

💚 Vue / Nuxt

Progressive JavaScript Framework

Slug-Hinweis: Im campaign-Prop müssen Sie Ihren Kampagnen-Slug aus dem Dashboard übergeben!

<!-- components/KundenmagnetWidget.vue -->
<template>
  <div>
    <div
      data-kundenmagnet-widget
      :data-campaign="campaign"
      :data-limit="limit"
      :data-theme="theme"
    />
  </div>
</template>

<script setup lang="ts">
// Props mit TypeScript
interface Props {
  campaign: string  // Kampagnen-Slug aus Dashboard!
  limit?: number
  theme?: 'light' | 'dark' | 'auto'
}

const props = withDefaults(defineProps<Props>(), {
  limit: 10,
  theme: 'light'
})

// Script laden
useHead({
  script: [
    {
      src: 'https://kundenmagnet-app.de/widget.js',
      async: true
    }
  ]
})
</script>

<!-- Verwendung in Ihrer Seite:
     
     <KundenmagnetWidget campaign="ihr-slug" :limit="8" />
     
     WICHTIG: "ihr-slug" durch Ihren Kampagnen-Slug ersetzen!
     Dashboard → Kampagnen → Widget-Slug kopieren
-->

🅰️ Angular

Enterprise TypeScript Framework

Slug-Hinweis: Übergeben Sie Ihren Kampagnen-Slug als @Input() an die Komponente!

Schritt 1: Script in angular.json registrieren:

// angular.json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "https://kundenmagnet-app.de/widget.js"
            ]
          }
        }
      }
    }
  }
}

Schritt 2: Komponente erstellen:

// kundenmagnet-widget.component.ts
import { Component, Input } from '@angular/core'

@Component({
  selector: 'app-kundenmagnet-widget',
  template: `
    <div
      data-kundenmagnet-widget
      [attr.data-campaign]="campaign"
      [attr.data-limit]="limit"
      [attr.data-theme]="theme"
    ></div>
  `,
  standalone: true
})
export class KundenmagnetWidgetComponent {
  @Input() campaign!: string  // Kampagnen-Slug aus Dashboard!
  @Input() limit: number = 10
  @Input() theme: 'light' | 'dark' | 'auto' = 'light'
}

/* Verwendung in Ihrem Template:
   
   <app-kundenmagnet-widget 
     campaign="ihr-slug" 
     [limit]="8"
     theme="light">
   </app-kundenmagnet-widget>
   
   WICHTIG: "ihr-slug" durch Ihren Kampagnen-Slug ersetzen!
   Dashboard → Kampagnen → Widget-Slug kopieren
*/

🔥 Svelte / SvelteKit

Cybernetically Enhanced Web Apps

Slug-Hinweis: Übergeben Sie Ihren Kampagnen-Slug als Prop an die Svelte-Komponente!

<!-- KundenmagnetWidget.svelte -->
<script lang="ts">
  import { onMount, onDestroy } from 'svelte'
  
  // Props mit TypeScript
  export let campaign: string  // Kampagnen-Slug aus Dashboard!
  export let limit: number = 10
  export let theme: 'light' | 'dark' | 'auto' = 'light'
  
  let script: HTMLScriptElement | null = null
  
  onMount(() => {
    script = document.createElement('script')
    script.src = 'https://kundenmagnet-app.de/widget.js'
    script.async = true
    document.body.appendChild(script)
  })
  
  onDestroy(() => {
    if (script) {
      document.body.removeChild(script)
    }
  })
</script>

<div
  data-kundenmagnet-widget
  data-campaign={campaign}
  data-limit={limit}
  data-theme={theme}
/>

<!-- Verwendung in Ihrer Seite:
     
     <script>
       import KundenmagnetWidget from './KundenmagnetWidget.svelte'
     </script>
     
     <KundenmagnetWidget campaign="ihr-slug" limit={8} />
     
     WICHTIG: "ihr-slug" durch Ihren Kampagnen-Slug ersetzen!
     Dashboard → Kampagnen → Widget-Slug kopieren
-->

Phase 3: Erweiterte Integration

📊 Google Tag Manager

Widget über GTM ohne Code-Änderungen auf der Website einbinden

Slug-Hinweis: Im GTM-Tag müssen Sie ihr-slug mit Ihrem Kampagnen-Slug ersetzen!

Google Tag Manager öffnen

Neuen Tag erstellen → "Custom HTML"

HTML-Code einfügen (siehe unten)

<!-- GTM Custom HTML Tag -->
<div 
  data-kundenmagnet-widget
  data-campaign="ihr-slug"
  data-limit="10"
  data-theme="light"
></div>
<script src="https://kundenmagnet-app.de/widget.js" async></script>

<!-- WICHTIG: "ihr-slug" durch Ihren Kampagnen-Slug ersetzen! -->
<!-- Dashboard → Kampagnen → Widget-Slug kopieren -->
<!-- Beispiel: data-campaign="gtm-website" -->

Trigger auswählen: "All Pages" oder spezifische Seite (z.B. "/bewertungen")

Tag speichern und Container veröffentlichen

Vorteil: Sie können das Widget über GTM auf mehreren Seiten gleichzeitig deployen ohne Code-Änderungen auf der Website!

🔒 Content Security Policy (CSP)

Widget in Umgebungen mit strikten Security-Richtlinien

Wichtig: Auch bei CSP-Konfiguration müssen Sie in Ihrem Widget-Code ihr-slug mit Ihrem Kampagnen-Slug ersetzen!

Falls Ihre Website eine strikte Content Security Policy hat, fügen Sie diese Domains zur Whitelist hinzu:

Content-Security-Policy:
  script-src 'self' https://kundenmagnet-app.de;
  frame-src 'self' https://kundenmagnet-app.de;
  connect-src 'self' https://kundenmagnet-app.de;

Alternative: Verwenden Sie die iFrame-Variante, die in den meisten CSP-Umgebungen problemlos funktioniert:<iframe src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug" ...></iframe>

(Ersetzen Sie ihr-slug mit Ihrem Kampagnen-Slug!)

⚡ Caching & CDN-Integration

Widget mit Cloudflare, Fastly oder anderen CDNs optimieren

Slug-Hinweis: Unabhängig von Ihrer Cache-Konfiguration müssen Sie in Ihrem Widget-Code ihr-slug mit Ihrem Kampagnen-Slug ersetzen!

Widget ist bereits optimiert für Caching:

Browser-Cache: Widget.js cached 5 Minuten
API-Cache: Testimonials cached 60 Sekunden
iFrame: Wird von CDNs automatisch cached
Shadow DOM: Verhindert CSS-Konflikte

Empfehlung: Verwenden Sie die iFrame-Variante für maximale CDN-Kompatibilität:<iframe src="https://kundenmagnet-app.de/widget/frame?campaign=ihr-slug" ...></iframe>

(Dashboard → Kampagnen → Widget-Slug für ihr-slug kopieren!)

Nach Widget-Updates:

• Cache leeren: Browser (Strg+Shift+R)
• CDN purgen: Falls Sie Cloudflare/Fastly verwenden
• WordPress: WP Rocket / W3 Total Cache leeren

Weitere Hilfe benötigt?

E-Mail Support

support@kundenmagnet-app.de

Bitte geben Sie Ihren Kampagnen-Slug an, wenn Sie Hilfe benötigen!

Weitere Dokumentation

Übersicht Dokumentation Widget-Dokumentation API-Dokumentation

Live-Chat: Verfügbar im Dashboard (unten rechts)