Embed-Code: Erweiterte Einstellungen

Dieser Hilfe-Artikel beschreibt ausführlich die erweiterten Einstellungen des QUESTIONSTAR Embed-Codes. Er richtet sich speziell an Nutzer mit Programmierkenntnissen, die die Umfrage-Integration individuell und flexibel auf ihrer Webseite gestalten möchten.

Voraussetzungen

Voraussetzung für die Nutzung ist das eingebundene Skript embed.js sowie die Initialisierung eines Objekts der Klasse QSEmbed mit entsprechenden Konfigurationsparametern.

Minimaler Code

<!-- Optional: Container to embed into 
   <div class="qs-embed-survey"></div> 
--> 
<script src="https://app.questionstar.de/embed.js"></script>

<script>
   var config = {
      url: 'https://survey.questionstar.com/nps-beispiel' // URL of the survey
   }
   new QSEmbed(config);
</script>

<!-- Optional: Container to embed into

-->

var config = {

url: 'https://survey.questionstar.com/nps-beispiel' // URL of the survey

}

new QSEmbed(config);

</script>

Dieser minimale Code bettet die Umfrage in Ihre Webseite ein.

Standardmäßig sucht das Embed-Skript nach einem HTML-Element mit der Klasse .qs-embed-survey, um die Umfrage dort zu platzieren. Falls kein solches Element gefunden wird, erfolgt die Einbettung automatisch an der Stelle in der Webseitenstruktur, an der sich das Skript befindet.

Im Folgenden betrachten wir die verfügbaren Einstellungen des Embed-Skripts bzw. des Konfigurationsobjekts. Die Beispiele in den Code-Snippets entsprechen jeweils den Standardwerten des Skripts.

Übersicht der verfügbaren Einstellungen (Klassen-Initiierungen):

Allgemeine Einstellungen

url: 'https://survey.questionstar.com/nps-beispiel', // URL of the survey
saveParentURL: false, // save the current page URL in the saved data
embedMode: 'embed', // Possible modi '', 'embed', 'modal', 'button', 'invitation', 'tab'
autoRender: true, // true to render automatically, false for manual .render('selector') call
embedSelector: '.qs-embed-survey', // rule for selecting the element(s) to embed into

url: 'https://survey.questionstar.com/nps-beispiel', // URL of the survey

saveParentURL: false, // save the current page URL in the saved data

embedMode: 'embed', // Possible modi '', 'embed', 'modal', 'button', 'invitation', 'tab'

autoRender: true, // true to render automatically, false for manual .render('selector') call

embedSelector: '.qs-embed-survey', // rule for selecting the element(s) to embed into

Einstellungen für Einbettung

//iframe embed defaults
height: null,
width: null,
autoHeight: true,
minHeight: '300px',
maxHeight: null,
minWidth: null,
maxWidth: null,

//iframe embed defaults

height: null,

width: null,

autoHeight: true,

minHeight: '300px',

maxHeight: null,

minWidth: null,

maxWidth: null,

// modal defaults (also uses height and width form iframe embed)
modalPosition: '', // fullscreen, left, right, top, bottom (can be combined, written with a space separator), preset-1, preset-2
closeOnEnd: true, // close the modal when the respondent has finished the survey
closeTimeout: 5, // timeout to auto close modal after survey ends (in sek)
disableDocumentScroll: true, // disable scrolling of the main document when the survey modal is open
overlayBgColor: 'rgba(0, 0, 0, 0.15)', // background color of the modal's background overlay use rgba delaration if you need opacity

// modal defaults (also uses height and width form iframe embed)

modalPosition: '', // fullscreen, left, right, top, bottom (can be combined, written with a space separator), preset-1, preset-2

closeOnEnd: true, // close the modal when the respondent has finished the survey

closeTimeout: 5, // timeout to auto close modal after survey ends (in sek)

disableDocumentScroll: true, // disable scrolling of the main document when the survey modal is open

overlayBgColor: 'rgba(0, 0, 0, 0.15)', // background color of the modal's background overlay use rgba delaration if you need opacity

Button-Einstellungen

// button defaults
buttonText: 'Umfrage starten',
buttonColor: '#db2653',
buttonTextColor: '#fff', 
buttonFontSize: '14px', 
buttonFontFamily: 'Arial, Helvetica, sans-serif',
newTab: false, // true to open the survey in new tab, false to open it as modal

// button defaults

buttonText: 'Umfrage starten',

buttonColor: '#db2653',

buttonTextColor: '#fff',

buttonFontSize: '14px',

buttonFontFamily: 'Arial, Helvetica, sans-serif',

newTab: false, // true to open the survey in new tab, false to open it as modal

Einladungseinstellungen

//invitation defaults
//all button defaults plus
invitationFontFamily: this.buttonFontFamily,
invitationTitleFontSize: '20px',
invitationTitleColor: '#db2653',
invitationTextFontSize: '14px',
invitationMode: 'modal', // 'newTab', 'modal', 'popup'
//buttonColor
//buttonText
invitationTitle: 'Nutzer-Umfrage',
invitationText: 'Bitte beantworten Sie uns einige kurzen Fragen und helfen Sie uns, das Erlebnis auf der Website zu verbessern.',
invitationButtonText: this.buttonText,
invitationCancelLinkText: 'Nein, danke...',

//invitation defaults

//all button defaults plus

invitationFontFamily: this.buttonFontFamily,

invitationTitleFontSize: '20px',

invitationTitleColor: '#db2653',

invitationTextFontSize: '14px',

invitationMode: 'modal', // 'newTab', 'modal', 'popup'

//buttonColor

//buttonText

invitationTitle: 'Nutzer-Umfrage',

invitationText: 'Bitte beantworten Sie uns einige kurzen Fragen und helfen Sie uns, das Erlebnis auf der Website zu verbessern.',

invitationButtonText: this.buttonText,

invitationCancelLinkText: 'Nein, danke...',

Feedback-Tab-Einstellungen

//tab defaults
tabText: 'Feedback',
tabColor: '#db2653',
tabTextColor: '#fff',
tabFontSize: '14px',
tabFontFamily: 'Arial, Helvetica, sans-serif',
tabPosition: '', // 'right', 'left', 'bottom', 'bottom right', 'bottom left'
tabMode: 'modal', // 'modal', 'newTab'

//tab defaults

tabText: 'Feedback',

tabColor: '#db2653',

tabTextColor: '#fff',

tabFontSize: '14px',

tabFontFamily: 'Arial, Helvetica, sans-serif',

tabPosition: '', // 'right', 'left', 'bottom', 'bottom right', 'bottom left'

tabMode: 'modal', // 'modal', 'newTab'

Einstellungen zum automatischen Öffnen

// common defaults (except for button)
autoOpen: false, // open modal or invitation automatically
autoOpenMode: 'delay', // 'delay', 'scroll' offset
autoOpenDelay: 5, // delay in seconds. In 'delay' mode opens the modal or invitation after this number of seconds.
autoOpenOffset: 500, // offset in pixel. In 'scroll' mode opens the modal or invitation when the user has scrolled down this number of pixels.
autoOpenPercentage: 100, // percentage of users the modal or invitation should be shown to
autoOpenMaxTimes: 1, //show modal/invitation to the same user only X times; set it 0 for always
autoOpenCalmPeriod: 30, // days to not to disturb the visitor if they denied an invitation or closed a modal

// common defaults (except for button)

autoOpen: false, // open modal or invitation automatically

autoOpenMode: 'delay', // 'delay', 'scroll' offset

autoOpenDelay: 5, // delay in seconds. In 'delay' mode opens the modal or invitation after this number of seconds.

autoOpenOffset: 500, // offset in pixel. In 'scroll' mode opens the modal or invitation when the user has scrolled down this number of pixels.

autoOpenPercentage: 100, // percentage of users the modal or invitation should be shown to

autoOpenMaxTimes: 1, //show modal/invitation to the same user only X times; set it 0 for always

autoOpenCalmPeriod: 30, // days to not to disturb the visitor if they denied an invitation or closed a modal

css: '', //custom css for styling, e.g. '.qs-modal-content {border-radius:10px;} .qs-button:hover {opacity:0.9;}'
cookieName: 'QUESTIONSTAR-Embed', // name of the technical cookie needed for the do not disturb function. No personal data is saved.

1 2	css: '', //custom css for styling, e.g. '.qs-modal-content {border-radius:10px;} .qs-button:hover {opacity:0.9;}' cookieName: 'QUESTIONSTAR-Embed', // name of the technical cookie needed for the do not disturb function. No personal data is saved.

Embed-Code (nur) auf bestimmten Seiten (nicht) einbetten

// only open/embed on certain pages
showOnSpecificPages: false,
pagesShow: {
   exact: [], // e.g. ['https://questionstar.de/hilfe/einstellungen-der-umfrage/datenschutz/', 'https://questionstar.de/tarife-und-preise']
   startWith: [], // e.g. ['https://questionstar.de/hilfe']
   endWith: [] // e.g. ['/datenschutz/', '/tarife-und-preise']
},

// hide/do not embed on specific pages 
hideOnSpecificPages: false,
pagesHide : {
   exact: [],
   startWith: [],
   endWith: []
},

// only open/embed on certain pages

showOnSpecificPages: false,

pagesShow: {

exact: [], // e.g. ['https://questionstar.de/hilfe/einstellungen-der-umfrage/datenschutz/', 'https://questionstar.de/tarife-und-preise']

startWith: [], // e.g. ['https://questionstar.de/hilfe']

endWith: [] // e.g. ['/datenschutz/', '/tarife-und-preise']

// hide/do not embed on specific pages

hideOnSpecificPages: false,

pagesHide : {

exact: [],

startWith: [],

endWith: []

Methods

// if autoRender = false
render(); // renders the embed in containers with the style 'qs-embed-survey' or whatever is specified in embedSelector
render('div#myID'); // renders the embed in a custom container specified by the selector in the argument

// usage example
let embedSurvey = new QSEmbed({ 
   url: 'https://survey.questionstar.com/nps-beispiel',
   embedMode: 'invitation',
   autoRender: false; 
});
setTimeout(() => {
   embedSurvey.render();
}, 3000);


// methods for modal embed
embedSurvey.open(); // Opens modal
embedSurvey.close(); // Closes modal

// if autoRender = false

render(); // renders the embed in containers with the style 'qs-embed-survey' or whatever is specified in embedSelector

render('div#myID'); // renders the embed in a custom container specified by the selector in the argument

// usage example

let embedSurvey = new QSEmbed({

url: 'https://survey.questionstar.com/nps-beispiel',

embedMode: 'invitation',

autoRender: false;

});

setTimeout(() => {

embedSurvey.render();

}, 3000);

// methods for modal embed

embedSurvey.open(); // Opens modal

embedSurvey.close(); // Closes modal

Event handlers

// event handlers
const onSurveyEnd = () => console.info('Survey finished');
const onModalClose = () => console.info('Modal closed');

// subscribe to events
embedSurvey.on('survey-end', onSurveyEnd);
embedSurvey.on('modal-close', onModalClose);

// optional: Clean up event handlers if necessary
embedSurvey.off('survey-end', onSurveyEnd);
embedSurvey.off('modal-close', onModalClose);

// event handlers

const onSurveyEnd = () => console.info('Survey finished');

const onModalClose = () => console.info('Modal closed');

// subscribe to events

embedSurvey.on('survey-end', onSurveyEnd);

embedSurvey.on('modal-close', onModalClose);

// optional: Clean up event handlers if necessary

embedSurvey.off('survey-end', onSurveyEnd);

embedSurvey.off('modal-close', onModalClose);