> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🗯 Widget and Notification

If you export your application via the [📦Export Direct Link](/en/article/export-your-app-on-direct-link-h8d1mb/) and you want to display it over any website, just Select the Widget sharing option.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/direct-link-sharing-option-wid_1dhcqkp.jpg)

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). 

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/files-widget-button-image-addr_13vjjl8.jpg)

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/widget-button-image-updated_ziwk71.jpg)

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. 

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/widget-downloaded-script_x38wi2.jpg)

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/widget-script-on-text-editor_co1wid.jpg)

If you want to implement your widget on a web page, you may need to add the "

If you want to implement your widget on a web page, you may need to add the "

If you want to implement your widget on a web page, you may need to add the "

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.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/exemple-page-web-pour-integrat_l2oega.jpg)
![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/exemple-page-web-script-avec-b_p3ovaw.jpg)

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:

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/widget-notification_1wr1xa7.jpg)
---

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>