Back to the Shapespark home page

Welcome banner pop-up

Hi, how can I make a welcome banner like this?

Thank u so much

You could leverage the HTML pop-up API: or tune the custom image banner example from:

1 Like

I don’t see the welcome banner but only this

Could you share a link to the uploaded scene, so we could take a look?

thank u @wojtek !!

This is the welcome bunner that I would like to insert. I would like to click the button “enter” to play the automatic tour

this is my body-end script

Did you manage to solve it? The banner at seem to be working now.

Yes @jan but I would like to add a click in order to close the banner, and right after start the autoplay. Is it possible?

Thank u so much!

Yes, in the Shapespark editor viewer tab disable the ‘Start on scene load’ checbox for the auto tour and replace the last part of your body-end.html with the following code:

  // After the banner is clicked start autotour and fade out the banner by
  // using a css tranisition.
  function bannerClicked() {
  function addBannerClickHandler() {
    document.getElementById('banner').addEventListener('click', bannerClicked);

  // WALK.getExtraAssetUrl can be called only after document is
  // loaded.
  window.addEventListener('load', function() {
    var bannerElement = document.getElementById('banner-img');
    bannerElement.src = WALK.getExtraAssetUrl('banner.jpg');
  var viewer = WALK.getViewer();

thank u so much @jan !!!

How can i have the banner in the center of all screens (without fullscreen, fullscreen, ios, android…)?

Hi @pierugg8 !

You can try one of these two methods, both should work equally well. However if you find any issues, let me know please.

  1. Set both #banner and #banner-img to:
#banner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
#banner-img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  1. Set only #banner-img, (then #banner does not need any styling), and change hide-banner function to target #banner-img to avoid flickering :
#banner-img {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
 function hideBanner() {

I tried the first one and it works.
Thank u so much @kamil!