Widget-Aussehen per JS anpassen

Fragestellungen:

  • Wie kann ich die Anzahl der angezeigten Angebote im Widget mit JS begrenzen?
  • Wie kann ich das Design des Widgets (hell oder dunkel) mit JS ändern?
  • Wie passe ich die Eckenrundung für weichere Kanten mit JS an?
  • Wie kann ich meine Markenfarbe im Widget mit JS verwenden?
  • Wie kann ich den Standardhintergrund oder die Ränder (Container) im Widget mit JS deaktivieren?
  • Wie ändere ich die Sprache oder das Regionsformat des Widgets mit JS?
  • Wie kann ich die im Widget angezeigte Währung mit JS festlegen?
  • Warum wird mein Widget beim Verwenden von JS nicht richtig geladen?
  • Wie kann ich das Widget in WordPress, Wix oder Shopify mit JS einbinden?
  • Wo finde ich alle Widget-Parameter und Standardwerte, wenn ich JS verwende?

Beschreibung:

Das Anpassen deines Get Your Offers Widgets mit JavaScript ist genauso einfach!

Wenn du eine dynamische Steuerung bevorzugst, gibt dir JavaScript die Flexibilität, Themen, Farben und Grenzen anzupassen oder sogar mehrere Widgets zu laden - und das alles mit ein paar Zeilen Code. Es ist schnell, leistungsstark und super einfach zu bedienen.

Vorgehen:

JS: Dein Integrationscode

  1. Füge das Skript in ein:
  2. Füge einen Container innerhalb von hinzu:
    <div id="get-your-offers-widget"></div>
  3. Initialisiere das Widget:
    <script>
    __getyouroffers({
    widget: 'get-your-offers-widget',
    storeId: '1',
    limit: 8,
    theme: 'dark',
    radius: 12,
    brandColor: '#f51231',
    locale: 'en-US',
    currency: 'INR' });
    </script>

Vollständiges Integrations-Snippet

JavaScript API Integration

<script src="https://getyouroffers.app/SCRIPTS/OffrAppManagement/current-offers.v1.js"></script>

<div id="get-your-offers-widget"></div>

<script>
__getyouroffers({
  widget: 'get-your-offers-widget',
  storeId: '1',
  limit: 8,
  theme: 'light',
  radius: 12,
  brandColor: '#f51231',
  locale: 'en-US',
  currency: 'INR'
});
</script>
  

Tips und Tricks:

Das Wichtigste zur Erinnerung

  • Füge immer die neueste Skriptversion (z.B. current-offers.v1.js) in den <head> oder kurz vor dem abschließenden </body> Tag ein.
  • Verwende eine gültige storeId - sie ist erforderlich, damit die Angebote angezeigt werden können.
  • Verwende nur die JavaScript-API(__getyouroffers({ ... })) - nicht sowohl den HTML-Tag als auch JS für dieselbe Instanz.
  • Passe Theme, BrandColor und Radius in deinen API-Parametern an das Design deiner Website an.
  • Stelle das Gebietsschema und die Währung entsprechend deiner Zielgruppe ein, z. B. Gebietsschema: "de-DE" oder Währung: "EUR".
  • Überprüfe die Browserkonsole, wenn das Widget nicht geladen wird - fehlende Parameter oder ungültige IDs sind häufige Ursachen.
  • Öffne die Entwicklertools deines Browsers → Registerkarte Netzwerk, um zu überprüfen, ob die Angebotsdaten erfolgreich abgerufen werden.