🗯 Widget and Notification

If you export your application via the 📦Export Direct Link and you want to display it over any website, just Select the Widget sharing option.



Choose the width and height of the application and of the button. Paste the image address of your button (for example by adding it to your project files and right-clicking on it to get it).





Check the box "Restart app when clicking on the button" if you want that clicking again on the widget button restarts the app from the beginning.
NB: The variables will be reset to their initial value.

Then click on Download script to receive a script (lines of code) compiled in a text file.





If you want to implement your widget on a web page, you may need to add the "<script>" tags before the script and "</script>" after it to make it readable by your web page.





If you want to display your widget with a notification, you can add the code below after the Celestory script and before the "</script>" end tag.
Change the content of the notification by changing the content "Click here to discover Celestory >>>".

Validate the script to see the result on the web page:





function clickHere() {
let elt = document.createElement("div")
elt.innerHTML = "Click here to discover 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()


So in our example the complete script is the following:


<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 = "Click here to discover 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>

Updated on: 11/05/2021