Back to the Shapespark home page

Customising play button

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 ?

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?

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.

Customisation of the play button would be great.

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

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

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.

Thank you! Exactly what I needed to do.