Welcome banner pop-up

Customization
1

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

Thank u so much

1.PNG
1.PNG1920×1007 203 KB

2

You could leverage the HTML pop-up API: GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene. or tune the custom image banner example from: GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene..

1 Like
3

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

4

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

5

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

thank u @wojtek !!

6

banner
banner1920×1080 75.1 KB

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

8

script
script578×1004 84 KB

this is my body-end script

9

Did you manage to solve it? The banner at https://rgg.shapespark.com/secolo025bis/ seem to be working now.

10

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!

11

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
12

thank u so much @jan !!!

13

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

14

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
15

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