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: https://github.com/shapespark/shapespark-viewer-api#displaying-html-pop-ups or tune the custom image banner example from: https://github.com/shapespark/shapespark-viewer-api#using-your-own-static-asset-files.

1 Like

I don’t see the welcome banner but only this
@wojtek
e1

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

https://rgg.shapespark.com/secolo025bis/

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 https://rgg.shapespark.com/secolo025bis/ 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:

<script>
  // After the banner is clicked start autotour and fade out the banner by
  // using a css tranisition.
  function bannerClicked() {
    document.getElementById('banner').classList.add('fadeout');
    document.getElementById('tour-button').click();
  }
  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();
  viewer.onSceneReadyToDisplay(addBannerClickHandler);
</script>
2 Likes

thank u so much @jan !!!

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

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() {
    document.getElementById('banner-img').classList.add('fadeout')
  };
2 Likes

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