🗯 Widget et Notification

Si vous exportez votre application via l' 📦Export Lien Direct et que vous souhaitez l'afficher par dessus n'importe quel site internet, il vous suffit de Sélectionner l'option de partage Widget.



Choisissez la largeur et la hauteur de l'application et celles du bouton. Collez l'adresse de l'image de votre bouton (par exemple en l'ajoutant dans les fichiers de votre projet et en faisant un clic droit dessus pour l'obtenir).





Cochez la case "Restart app when clicking on the button" si vous souhaitez que le fait de cliquer de nouveau sur le bouton du widget relance l'app depuis le début.
NB: Les variables seront remise à leur valeur initiale.

Cliquez ensuite sur Télécharger le script pour recevoir un script (lignes de codes) compilé dans un fichier texte.





Si vous souhaitez implémenter votre widget sur une page web, vous devrez peut-être ajouter les balises "<script>" avant le script et "</script>" après pour qu'il soit lisible par votre page web.





Si vous voulez afficher votre widget avec une notification, vous pouvez rajouter le code ci-dessous après le script de Celestory et avant la balise de fin "</script>".
Changez le contenu de la notification en changeant le contenu "Cliquez ici pour découvrir Celestory >>>".

Valider le script pour voir le résultat sur la page web:




function clickHere() {
let elt = document.createElement("div")
elt.innerHTML = "Cliquez ici pour découvrir Celestory >>>"
elt.style.position="fixed"
elt.style.zIndex = "100000"
elt.style.bottom="30px"
elt.style.right="90px"
elt.style.padding="5px 10px"
elt.style.fontSize="80%"
elt.style.borderRadius = "10px"
elt.style.backgroundColor = "#21b36e"
elt.style.color = "#fff"
elt.style.transition = "all .5s ease-in-out"
elt.style.marginRight = "15px"
elt.style.opacity = "0"

let i = 5

let moveLeft = function() {
elt.style.marginRight = "15px"
i--;
setTimeout(moveRight, 500)
}

let moveRight = function() {
elt.style.marginRight = "0px"
if (i) {
setTimeout(moveLeft, 500)
} else {
disappear()
}
}

let appear = function() {
elt.style.opacity = "1"
moveRight()
}

let disappear = function() {
elt.style.opacity = "0"
}

setTimeout(appear, 1000)
document.body.appendChild(elt)
}

clickHere()


Le script complet est donc dans notre exemple le suivant:


<script>
var windowWidth=400,windowHeight=600,buttonWidth=60,buttonHeight=60,imgSrc="https://storage.googleapis.com/files.celestorystudio.com/4/projects/Z_G0jbTep/assets/Widget%20logo/LogoGray.png",gameUrl="https://storage.googleapis.com/celestory-discovery/cklmjbb0u00000ts6cgzk3bus/index.html?nocache=1619590567885",css=".celestory{z-index:999999;transition:all .3s ease-out;position:fixed;bottom:10px;right:10px;width:"+buttonWidth+"px;height:"+buttonHeight+"px;overflow:hidden;background:white;border-radius:100%;cursor:pointer}.celestory:active{transform:scale(.8)}.celestory img{width:"+buttonWidth+"px;height:"+buttonHeight+"px}.celestory-iframe{z-index:999999;border:none;right:0;bottom:"+parseFloat(buttonHeight+10)+"px;width:"+windowWidth+"px;height:"+windowHeight+"px;position:fixed}.celestory-iframe.hidden{visibility:hidden}",div=document.createElement("div");div.className="celestory";var img=document.createElement("img");img.src=imgSrc,div.appendChild(img);var iframe=document.createElement("iframe");iframe.src=gameUrl,iframe.className="celestory-iframe hidden";var script=document.createElement("script");script.innerHTML='(function(){var trigger=document.querySelector(".celestory");trigger.onclick=function(){var e=document.querySelector(".celestory-iframe");-1!==e.className.indexOf("hidden")?e.className="celestory-iframe":(e.className="celestory-iframe hidden",true&&(e.src=e.src))};})()';var style=document.createElement("style");style.innerHTML=css,document.head.appendChild(style),document.body.appendChild(div),document.body.appendChild(iframe),document.body.appendChild(script);

function clickHere() {
let elt = document.createElement("div")
elt.innerHTML = "Cliquez ici pour découvrir Celestory >>>"
elt.style.position="fixed"
elt.style.zIndex = "100000"
elt.style.bottom="30px"
elt.style.right="90px"
elt.style.padding="5px 10px"
elt.style.fontSize="80%"
elt.style.borderRadius = "10px"
elt.style.backgroundColor = "#21b36e"
elt.style.color = "#fff"
elt.style.transition = "all .5s ease-in-out"
elt.style.marginRight = "15px"
elt.style.opacity = "0"

let i = 5

let moveLeft = function() {
elt.style.marginRight = "15px"
i--;
setTimeout(moveRight, 500)
}

let moveRight = function() {
elt.style.marginRight = "0px"
if (i) {
setTimeout(moveLeft, 500)
} else {
disappear()
}
}

let appear = function() {
elt.style.opacity = "1"
moveRight()
}

let disappear = function() {
elt.style.opacity = "0"
}

setTimeout(appear, 1000)
document.body.appendChild(elt)
}

clickHere()
</script>

Mis à jour le : 27/05/2021