Customising play button

Customization
1

Hello,

Is it possible to change the Play Icon from which the tour begins ? A lot of my users don’t interact with it as they feel it’s a video and not an interactive tour. Can I use some custom image file and replace it ?

2

The easiest approach is to append #autoplay to the URL, to start loading the scene without user interaction. Would it be suitable in your case?

3

No, that would not help as I am showing multiple columns where a user needs to click to play the tour. If I enable autoplay in every tour, my page load time will increase and user experience will also decreased.

4

Customisation of the play button would be great.

5

We have received feedback that the current play icon is confusing a couple of times already, so we will change it to something that more clearly indicates that a 3D scene will be loaded, not a video.

For now, if you have a more suitable icon hosted on some external server, you can replace the default icon with a following body-end.html file:

<script>
  document.getElementById('play-button').src = "https://img.icons8.com/material-sharp/24/000000/3d-select.png";
</script>
2 Likes
6

Jumping in on this question. Thank you for offering a way to include a different image in lieu of the play button. How would one go about increasing the size of this button/image?

Thanks!
Mike

1 Like
7

To make customizations that are not exposed by the Shapespark editor, you need some HTML and CSS skills. For example, by right clicking on the play button in a web browser you can Inspect CSS styles that it already has:

#play-button {
    z-index: 200;
    max-width: 30vw;
    max-height: 35vh;
    cursor: pointer;
}

then you can use body-end.html or head-end.html files to apply your own CSS style and change the appearance of this element. For example:

<style>
#play-button {
  width: 50vw;
  height: 55vh;
  max-width: 50vw;
  max-height: 55vh;
}
</style>

Other UI elements can also be customized in this way, but we are unable to help writing HTML/CSS code for such customizations.

8

Thank you! Exactly what I needed to do.