Embed Code: Advanced Settings

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

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

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

//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

// button defaults
buttonText: 'Start survey',
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

//invitation defaults
//all button defaults plus
invitationFontFamily: this.buttonFontFamily,
invitationTitleFontSize: '20px',
invitationTitleColor: '#db2653',
invitationTextFontSize: '14px',
invitationMode: 'modal', // 'newTab', 'modal', 'popup'
//buttonColor
//buttonText
invitationTitle: 'User survey',
invitationText: 'Please answer a few short questions and help us improve the website experience.',
invitationButtonText: this.buttonText,
invitationCancelLinkText: 'Nein, danke...',

//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'

// 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.

// only open/embed on certain pages
showOnSpecificPages: false,
pagesShow: {
   exact: [], // e.g. ['https://questionstar.de/help/survey-settings/privacy/', 'https://questionstar.de/tarife-und-preise']
   startWith: [], // e.g. ['https://questionstar.de/help']
   endWith: [] // e.g. ['/privacy-policy/', '/tarife-und-preise']
},

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

// 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
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);