Being semi-JS illiterate, I am unable to write my own code—can I get some help here?
What I am trying to do: stop a page from showing content until after a 3-second forced refresh.
I have a HubSpot thank-you page that shows personalized data based on a form filled on the previous page (I know I can customize the HubSpot JS code to do this, but since the page is already built, I cannot place custom form code.) The problem is that the personalization data doesn't come in until well after the page loads (so users see the default values first).
I've got some JS code that forces the refresh after 3 seconds, but I cannot figure out how to coordinate hiding the default content until that forced-refresh:
console.log(document.referrer);
console.log(document.location.href);
if (document.referrer !== document.location.href) {
setTimeout(function() {
document.location.reload()
}, 3000);
}
I tried adding this CSS: body { opacity: 0; }, along with this JS: document.body.style.opacity="100";
... by adding it after the setTimeout, by adding it after the the document reload, and by adding it as a new function to the reload. The best result was a flash of visible content at 3 seconds, then all content gone permanently.
I then just decided to write a whole separate setTimeout function outside the IF statement (in the hopes that it would just sync), but it still just shows blank content to everyone:
window.onload = function() {
setTimeout(function(){
document.body.style.opacity="100";
},3000);
};
I am sorry that I don't know enough about JavaScript to paint my way out—can anyone help me get closer to the correct way to hide content until a force-refresh?
This is my final code—at least it seems to work:
<style>
#hs_cos_wrapper_widget { opacity: 0; }
</style>
<script>
function showContent() {
document.getElementById("hs_cos_wrapper_widget").style.opacity = "1";
}
setTimeout("showContent()", 4000);
console.log(document.referrer);
console.log(document.location.href);
if (document.referrer !== document.location.href) {
setTimeout(function() {
document.location.reload();
}, 3000);
}
</script>
The only thing I don't like is that the page now takes more than 9 seconds to load (a preloader would be nice.) A more elegant solution is more than welcome.