Site is corrupted after inserting a feedback widget
Closed this issue · 3 comments
After executing:
Countly.q.push(['enable_feedback', { popups: [WIDGET_ID] }]);
the website doesn't work properly (Vue project). After analyzing it, I found the following line in Countly.js:
document.body.innerHTML += '<div id="cfbg"></div>';
that is risky and should be avoided.
Hello
I tried with an app by generated Vue app generator and couldn't reproduce this situation. Can you provide smaller set for the reproduce this problem please?
Thank you for reporting.
Hi @frknbasaran !
Sure, here it is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countly issue-39</title>
<script type='text/javascript'>
let elements = [];
function initialize() {
elements = [document.getElementById('text0')];
}
function changeColor(newColor) {
for (let e of elements) {
e.style.color = newColor;
}
}
function addFeedbackWidget() {
Countly.q.push(['enable_feedback', { popups: ['WIDGET_ID'] }]);
}
document.addEventListener('DOMContentLoaded', function() {
initialize();
});
</script>
<script type='text/javascript'>
var Countly = Countly || {};
Countly.q = Countly.q || [];
Countly.app_key = "APP_KEY";
Countly.url = "SERVER_URL";
(function() {
var cly = document.createElement('script'); cly.type = 'text/javascript';
cly.async = true;
cly.src = 'https://cdn.jsdelivr.net/npm/countly-sdk-web@latest/lib/countly.min.js';
cly.onload = function(){Countly.init()};
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s);
})();
</script>
</head>
<body>
<div id="text0">This is the issue #39 demo.</div>
<button onclick="changeColor('red')">Red</button>
<button onclick="changeColor('green')">Green</button>
<button onclick="changeColor('blue')">Blue</button>
<button onclick="addFeedbackWidget()">Call enable feedback</button>
</body>
</html>
Please, change WIDGET_ID, APP_KEY and SERVER_URL appropriately.
Indeed, it isn't a problem with Vue or any other framework. The problem is that if you insert anything in a script before the call to enable_feedback, when the function execute document.body.innberHTML += 'whatever' it regenerates everything loosing any reference to a previous generated variables.
I created the PR #40 to fix it, changing document.body.innerHTML += '...' with document.body.insertAdjacentHTML('beforeend', '...');. This way, the body is not reprocessed.
Fixed by #40