Trouble with Custom HTML UI Panel in Shapespark – Need Help!

danieeljose · June 23, 2025, 6:23am

Hi everyone,

I have been working with Shapespark for a few weeks now and loving how interactive the real-time walkthroughs are. However…, I have run into a bit of a challenge. I am trying to integrate a custom HTML UI panel (like buttons for switching views or showing info boxes), but I’m not sure how to properly link it with the Shapespark viewer.

I have followed the developer docs, and while I managed to load the HTML elements into the scene, the buttons don’t seem to trigger any viewer actions. For example, trying to jump to a viewpoint using viewer.gotoView('View 1') doesn’t respond.

Is there a specific way or script file I should be referencing inside the body-end.html file: ?? Also, do I need to enable anything in the scene export settings: ??

Any help from someone who’s done a custom UI integration before would be really appreciated. I have read this thread https://forum.shapespark.com/t/injecting-custom-html-sap-fico-course-in-mumbai but couldn’t get enough help.

Thanks in advance !!

Daniel Jose

maiku · June 23, 2025, 8:48am

Hi!

The reason gotoView('View 1') isn’t working is because there is no such method. Please use
Viewer.switchToView(viewName or viewObject, maxTime) and this should work. See the example for this:

github.com/shapespark/shapespark-viewer-api

examples/view-switch/body-end.html

master

<!-- HTML 5.2 allows for styles definitions inside of the body, a more
    conservative approach is to put the styles in the head-end.html
    file -->
<style>
#banner {
   position: absolute;
   top: 30px;
   text-align: center;
   font-size: 3em;
   color: #3c66b0;
   width: 100%;
   z-index: 10;
}
.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}
#custom-view-menu {
   position: absolute;

This file has been truncated. show original

I hope this helps!