In-app web/mobile
Zykrr feedback can be opened up within an existing web application. It can be shown to participant as a popup, as a part of page itself, in a new window or tab, basically as you like by adding just few lines of code in your application.
A website popup may look like this.
Below is a sample code to open Zykrr survey in a popup. The sample code uses bootstrap and jquery. They are used only for illustration and you can use your own libraries and framework to acheive the same behaviour. Replace {campaignId} with your campaign id.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Feedback</title>
<style>
body {
/* no need to copy this body tag css in your website. this is present for demo only */
height: 100%;
}
.zykrr-feedback-close-btn {
z-index: 1060;
right: -10px;
top: -10px;
background-color: grey !important;
cursor: pointer;
border-radius: 100%;
height: 25px;
width: 25px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid white;
}
#zykrr-survey {
/* animate iframe height when its height auto-adjusts*/
transition: height 400ms ease;
}
</style>
</head>
<body>
<!-- Page -->
<div class="container">
<p>This is just a demo website. This is not brand website.</p>
<img src="./background.png" class="background" width="100%" />
<div>
<button class="feedback-btn" data-toggle="modal" data-target="#surveyWithinWebsite">Click here</button> to
provide your valuable feedback. It will help us serve you better.
</div>
</div>
<!-- first modal: survey within website Modal -->
<div class="modal fade" id="surveyWithinWebsite" tabindex="-1" aria-label=="Feedback" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content position-relative">
<div class="position-absolute text-white zykrr-feedback-close-btn" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</div>
<div class="modal-body p-0">
<iframe id="zykrr-survey" src="https://survey.zykrr.com/r/{campaignId}" title="Feedback" frameBorder="0"
width="100%" height="550px"></iframe>
</div>
</div>
</div>
</div>
<!-- second modal, open survey in another tab -->
<div class="modal fade" id="surveyInNewTab" tabindex="-1" aria-label=="Feedback" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content position-relative">
<div class="position-absolute text-white zykrr-feedback-close-btn" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</div>
<div class="modal-body p-0">
<div class="text-center p-4">
<p>Please provide your valuable feedback! It will help us serve you better.</p>
<div class="d-flex justify-content-around mt-4">
<div>
<a href="https://survey.zykrr.com/r/{campaignId}" target="_blank"><button
class="btn btn-primary">Sure</button></a>
</div>
<div>
<button class="btn btn-secondary" data-dismiss="modal">Later</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script>
// helper function to extract the browser name and version
function getBrowser() {
var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return { name: 'IE', version: (tem[1] || '') };
}
if (M[1] === 'Chrome') {
tem = ua.match(/\bOPR|Edge\/(\d+)/)
if (tem != null) { return { name: 'Opera', version: tem[1] }; }
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
return {
name: M[0],
version: M[1]
};
}
function shouldShowFeedbackInNewTab() {
// return true for safari 13+
// if you have another better way to do the same, you may use that too
console.log(navigator.userAgent)
console.log(getBrowser())
if (getBrowser().name === 'Safari' && parseInt(getBrowser().version) >= 13)
return true
return false
}
// decide which dialog box to show, i.e. within-website or new-tab
if (shouldShowFeedbackInNewTab()) {
$('#surveyInNewTab').modal('show')
} else {
$('#surveyWithinWebsite').modal('show')
}
// below is optional: it is for auto-adjusting height of the survey
// ** start: setup listening for events from zykrr-survey
var eventMethod = window.addEventListener
? "addEventListener"
: "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent"
? "onmessage"
: "message";
eventer(messageEvent, function (e) {
// console.log(e.origin)
// if (e.origin !== 'https://survey.zykrr.com') return;
if (typeof e.data === "object" && e.data.message === 'contentResize' && e.data.height) {
document.getElementById('zykrr-survey').height = e.data.height
} else if (typeof e.data === 'object' && e.data.message === 'surveySubmitted') {
// survey submitted. close popup
$('#exampleModal').modal('hide')
// this is optional. this resets the iframe back to initial state where a new user can come and fill survey
// document.getElementById('zykrr-survey').src = 'https://survey.zykrr.com/r/{campaignId}'
}
});
// ** end: setup listening for events from zykrr-survey
</script>
</body>
</html>