Installation und Nutzung

Die einzelnen Zutaten!

Einbindung

Voraussetzung für die Verwendung von Koekje ist jQuery v1.12.4 oder höher. Am besten platzierst du den Code-Block vor dem schließenden Body-Tag.

<script src="jquery.js"></script>
<script src="koekje.js"></script>
<link rel="stylesheet" href="koekje.css">

Koekje kann entweder selbst gehostet oder direkt vom Koekje-Server eingebunden werden. Mehr dazu

<script src="jquery.js"></script>
<script src="//cdn.koekje-js.de/koekje.js"></script>
<link rel="stylesheet" href="//cdn.koekje-js.de/koekje.css">

Initialisierung

Um Koekje beim Laden der Seite zu initialisieren, wird die unten stehende Funktion koekje(); aufgerufen.

Hierdurch wird das Widget in der Standard-Konfiguration gestartet und der User über die Verwendung von Cookies informiert.

Um den vollen Funktionsumfang zu nutzen, werden über Parameter die einzelnen Services hinzugefügt.

<script type="text/javascript">
   koekje();
</script>

<script type="text/javascript">
   koekje({
           services: {
               YouTube: true
           }
       });
</script>

Umfangreiche Konfiguration

Koekje hat vielfältige Möglichkeiten der Anpassung sowohl für die Funktionen, als auch für die Optik des Widgets.

Hier nur exemplarisch eine umfangreichere Konfiguration, die der Verwendung hier auf der Seite entspricht.

Eine genaue Erläuterung der einzelnen möglichen Parameter findet sich unten.

<script type="text/javascript">
koekje({
        google: {
            googleID: "UA-161566182-1",
            GoogleLoadOnTop: true
        },
        services: {
            YouTube: true,
            Facebook: false,
            Twitter: false,
            Vimeo: true,
            Spotify: false,
            GoogleMaps: false,
            Userlike: true,
            Instagram: false,
            Issuu: false,
            Yumpu: false,
            FacebookMarketing: false,
            Adform: false,
            GoogleAnalytics: true
        },
        essential: {
            Vimeo: true,
            GoogleAnalytics: true
        },
        widget: {
            CreatorText: 'Website von Christian Holmok',
            CreatorURL: 'https://christianholmok.de',
            text: 'de',
            position: 'center',
            color: {
                background: '#BBC7BC',
                text: '#353D45',
                button: '#353D45',
                slider: '#353D45'
            },
            shadow: true,
            mode: 'light',
            shadowMode: 'large',
            background: 'plain',
            cornerCookie: true,
            cornerCookieColor: '#171717',
            curtain: true,
            curtainOpacity: .8,
            blockedCurtain: true,
            layout: 'small',
            fonts: true,
            headline: true,
            showonPrivacy: false,
            showonImprint: false
        },
        placeholder: false
    });
</script>

Die Parameter im Überblick

Google

Parameter	Definition	Values	Type
google	Array zur Definition der Parameter für Google Services (Analytics, Adwords, Maps)		Array
googleID	Tracking Code für Google Analytics	G-123456789	String
mapsKey	API-Key für Google Maps	12-3456789-10	String
mapsFunction	JavaScript Funktion, die ausgeführt werden soll, sofern Google Maps als Dienst zugelassen oder nachgeladen wird	initMap	String
GoogleLoadOnTop	Definiert, ob Google Analytics im Head statt vor Ende des Bodys geladen werden soll	true, false (default: false)	boolean

Services

Parameter	Definition	Values	Type
services	Array zur Definition der Services, die beim initialen Seitenbesuch abgefragt werden sollen		array
YouTube	Für die Nutzung von YouTube Videos	true, false (default: false)	boolean
Facebook	Für die Einbettung von Facebook Posts und Like-Button	true, false (default: false)	boolean
Twitter	Für die Einbettung von Tweets	true, false (default: false)	boolean
Vimeo	Für die Einbettung von Vimeo Videos	true, false (default: false)	boolean
Spotify	Für die Einbettung von Spotify Tracks, Playlists und Profilen	true, false (default: false)	boolean
GoogleMaps	Für die Einbettung von Google Maps als Iframe oder via JavaScript	true, false (default: false)	boolean
Userlike	Für die Einbettung von Userlike Chat Widgets	true, false (default: false)	boolean
Instagram	Für die Einbettung von Instagram Posts und Profilen	true, false (default: false)	boolean
Issuu	Für die Einbettung von Issuu Blätterkatalogen	true, false (default: false)	boolean
Yumpu	Für die Einbettung von Yumpu Blätterkatalogen	true, false (default: false)	boolean
FacebookMarketing	Für die Einbettung von Facebook Marketing Zählpixeln	true, false (default: false)	boolean
Adform	Für die Einbettung von Adform Analyse Trackern	true, false (default: false)	boolean
GoogleAnalytics	Für die Einbettung von Google Analytics	true, false (default: false)	boolean