itelly Button und Widget Einbau

Schritt 1: Vorbereitung der Zielseite

Stellen Sie sicher, dass Sie ein Dokument haben, in das Sie das Widget einfügen möchten.

Schritt 2: Einfügen des Skripts in Ihr CMS

Fügen Sie das Skript-Tag als HTML-Blob in Ihr CMS ein, um den Code zu laden. Dieser Schritt hängt von Ihrem spezifischen CMS ab, sollte aber im Allgemeinen so aussehen:

<script src="https://cdn.itelly.de/XXXX"></script>

Schritt 3: Platzierung des Widgets

Der Code wird automatisch den Button für das itelly-Widget an die Stelle einfügen, wo Sie den Code einfügen.

Schritt 4: Sicherstellen, dass das der Button und das Widget korrekt geladen werden

Nachdem Sie das Skript eingefügt haben, überprüfen Sie, ob der Button wie gewünscht erscheint. Laden Sie Ihre Webseite im Browser und stellen Sie sicher, dass der Button an der richtigen Stelle angezeigt wird.

Falls das Widget nicht korrekt angezeigt wird, stellen Sie sicher, dass:

1. Das Skript korrekt geladen wird (keine 404-Fehler in der Entwicklerkonsole).
2. Keine JavaScript-Fehler in der Konsole vorhanden sind.

Schritt 5: Styling und Anpassungen

Falls notwendig, können Sie das Styling des Widgets anpassen, indem Sie CSS-Regeln entweder direkt in das HTML-Dokument einfügen oder über externe CSS-Dateien hinzufügen.

Beispiel:

<style>.itellyButtonStyle {border-radius: 8px !important;background: #000000!important;color: #ffffff !important;font-size: 16px !important;font-family: Helvetica, Arial, sans-serif !important;height: 45px !important;}

.itellyButtonStyle::after {content: "Jetzt Freunde werben" !important;height: 16px !important;}

@media print, screen and (min-width: 48em){.itellyButtonStyle {font-size: 16px !important;}}</style>

Erklärung der CSS-Regeln:

• .itellyButtonStyle : Definiert das allgemeine Styling des Buttons, einschließlich:
  • border-radius: 8px !important; : Rundet die Ecken des Buttons leicht ab.
  • background: #000000!important; : Setzt die Hintergrundfarbe des Buttons.
  • color: #ffffff !important; : Setzt die Textfarbe des Buttons auf Weiß.
  • font-size: 16px !important; : Setzt die Schriftgröße des Textes im Button.
  • font-family: Helvetica, Arial, sans-serif !important; : Definiert die Schriftfamilie für den Button.
  • height: 45px !important; : Setzt die Höhe des Buttons.
• .itellyButtonStyle::after : Fügt zusätzlichen Inhalt nach dem Element hinzu:
  • content: "Jetzt Freunde werben" !important; : Fügt den Text „Jetzt Freunde werben“ hinzu.
  • height: 16px !important; : Setzt die Höhe des zusätzlichen Inhalts.
• @media print, screen and (min-width: 48em) : Definiert spezifische CSS-Regeln für Bildschirme, die breiter als 48 Em sind (typischerweise Tablets und Desktops):
  • font-size: 16px !important; : Stellt sicher, dass die Schriftgröße des Buttons auf größeren Bildschirmen gleich bleibt.

Zusammenfassung

• Fügen Sie das Skript-Tag <script src="https://cdn.itelly.de/XXXX"></script>  als HTML-Blob in das CMS ein.
• Laden Sie Ihre Seite im Browser und überprüfen Sie, ob der Button und das Widget korrekt angezeigt wird.
• Passen Sie die Styles an das CI Ihrer Webseite an

Das sollte sicherstellen, dass der obige Code korrekt funktioniert und das Widget an der gewünschten Stelle erscheint.