iFrame Implementierung

Einleitung

CODE24 stellt zur einfachen Integration ein iFrame-Script zur Verfügung. Mit diesem Script können Sie ihr eigenes Stylesheet als Parameter übertragen. Somit passt sich der iFrame Ihrem Design der Webseite an.

Grundlegende Einstellungen, zu folgenden Elementen können wir schon im Vorfeld für Sie festlegen:

  • Optional Abbildung (Werbebanner)
  • Optional Abbildung Schlüsselfinder (.jpg oder .png Grafik)
  • Primäre Farbe (Button: normaler Zustand)
  • Sekundäre Farbe (Buttons: hover Zustand)
  • Headlines Farbe
  • Button Radius
  • Kunden Logo

Code Beispiel

Damit die Anwendung einwandfrei in allen Browsern funktioniert, ist es wichtig, dass Sie das folgende Code-Beispiel verwenden:

<iframe style="border: 0px solid #ffffff;" src="https://code24.de/partner-iframe/?company=XXXXXXXX&lang=de" name="code24" width="100%" height="600" frameborder="0" marginwidth="0px" marginheight="0px" scrolling="yes" allowfullscreen="allowfullscreen"></iframe>

Paramater:

    • company (Firma)
      Required. (String) - Der Firmenname um die Stammdatei zu laden
      (Beispiel: ?company=lokaso)
    • externalCSS (externes Stylesheet)
      Optional. (String) (Absolute URL) - Um ein eigenes CSS zu integrieren
      (Beispiel: &externalCSS=https://bootswatch.com/4/lumen/bootstrap.min.css)
    • privacy (Datenschutzbelehrung Link)
      Optional. (String) - Einen Link mit der Datenschutzbelehrung einblenden (Datenschutzbelehrung verlinkt zur Code24 Internetseite)
      (Beispiel: ?privacy=true)
    • lang (language)
      Optional. (String) - Übergabe der Sprache. (de, en, fr, es, it)
      (Beispiel: &lang=fr)

Ein kompletter Beispiel Link würde so aussehen:

https://code24.de/partner-iframe/?company=FCBayern&externalCSS=https://code24.de/css/demo.css&privacy=true

Beispiel CSS

h4{
color:#ff3300 !important;
}
.btn-primary {
color: #ffffff !important;
background-color: #ff3300 !important;
border-color: #ff3300 !important;
border-radius: 4px !important;
}

.btn-primary:hover {
color: #000000 !important;
background-color: #ffcc00 !important;
border-color: #ffcc00 !important;
border-radius: 4px !important;
}

Live Beispiel

Dynamische Höhe setzen

Da das iframe nach dem Einbinden immer eine feste Höhe hat, können Sie diese mithilfe des Skripts das iframe automatisch auf die Höhe des Inhalts anpassen.

Sie können hier alle notwendigen Informationen beziehen:

https://github.com/davidjbradshaw/iframe-resizer

Aktuell wird folgende Version verwendet: v4.0.4 - 2019-03-04

Support

Damit Sie die Schnittstellen auch problemlos nutzen können, steht Ihnen unser kompetenter und freundlicher Support zur Verfügung.

millenium Werbeagentur GmbH
Agentur für visuelle Kommunikation
Hafenstraße 86
68159 Mannheim

E-Mail: info@millenium.de

Bearbeiten vorschlagen