PW-Survey ganz einfach in die eigene Website einbinden



Im Folgenden finden Sie zugehöriges HTML-Schnipsel zum Einbetten Ihres PW-Surveys in die eigene Webseite. Kopieren Sie einen Code für den <head> Abschnitt und fügen Sie in Ihr Template ein.

<!-- HEAD -->
<link rel="stylesheet" type="text/css" href="pfad-zu/pw-survey/styles/uikit.min.css">
<link rel="stylesheet" type="text/css" href="pfad-zu/pw-survey/styles/main.css">
<!-- /HEAD -->

Kopieren Sie dann den nachfolgenden Code für den <body> Abschnitt und fügen Sie diesen in Ihr Template vor dem schließenden Body-Tag </body> ein:

<!-- JS FILES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
<script>
	var pwq_config = {
		url: 'pw/site/templates/scripts/pw-query.min.js',
		queryId: 1015
	};
	(function() {
		var d = document, s = d.createElement('script');
		s.src = pwq_config.url;
		(d.head || d.body).appendChild(s);
	})();
</script>
<noscript>JavaScript must be enabled to use <a href="#">PW-Survey</a>.</noscript>
<!-- /JS FILES -->

Bitte beachten Sie, dass Sie unbedingt den Dateipfad zwischen dem Dokument, in dem Sie das PW-Survey einbinden möchten, und dem Skript, dass sich in dem Verzeichnis /pw-survey/pw/site/templates/scripts/ befindet, bei der Option url: eingeben müssen.

Als nächstes fügen Sie ein <div> Tag mit einem query id-Attribut irgendwo in Ihr Template ein. Dies sollte der Ort sein, an dem Sie Ihr PW-Survey anzeigen wollen:

<div id="query"></div>

Im Frontend von PW-Survey kommt das Framework UIkit zum Einsatz. Wenn Sie die auf der Demoseite vorhandenen Styles und Effekte beibehalten möchten, fügen Sie zusätzlich folgende CSS-Klassen Ihrem <div> Element hinzu:

<div id="query" class="uk-card uk-card-default uk-animation-scale-up"></div>

Wenn Sie anstelle von UIkit Ihr eigenes CSS für PW-Survey verwenden möchten, können Sie die Einbindung von UIkit-CSS- bzw. dazugehörigen JavaScript-Dateien weglassen.

Für den Einsatz von PW-Survey benötigen Sie außerdem jQuery auf Ihrer Website. Falls Sie noch keine jQuery-Bibliothek verwenden, kopieren Sie sich bitte folgendes Schnipsel und fügen Sie dieses auf der Website ein, auf der Sie Ihr PW-Survey einbinden möchten:

<!-- JS FILES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...

Ein vollständiges Beispiel für das Einbinden des PW-Surveys finden Sie in Ihrer /pw-survey/index.php Datei.

Weitere Informationen

Auf folgenden Seiten finden Sie die Hilfe zur PW-Survey - Installation und Administration