To make this work we married two platforms - Shapespark and Webflow. We built all the traditional webpages in Webflow. So all the overlays (like the navigation) and the sidepanels that open with details of the artwork are regular webpages. The Shapespark viewer is embeded as an iframe in a page from Webflow.
In Shapespark, I added custom code to open iframes to display those webpages, and added the buttons for navigation. It’s like a layer cake:
Webflow webpage (main level)
Shapespark iframe (viewer)
webflow webapges (sidepanels and overlays)
In my code are two functions that make this work. One catches the “nodeClick” events from the shapespark viewer. It has a lookup table, so if the user clicks on “COSTA_HEADSHOT” as the object, it opens “https://myurl.com/designer/costa” as an iframe. If I had been more rigorous about naming objects, I could have done it programmatically, but we were building this airplane as we were flying it.
In theory you could use divs in your custom shapespark code and hide/show those (if you were just doing the “All Designers” overlay for example", but you couldn’t use any media assets. In our case, all the artwork displayed in the sidepanels is data-driven from a CMS system that Webflow has, so we required a host.
All the custom code was put in the “body-end.html” in my shapespark project directory, in STYLE and SCRIPT tags.
There are some things I may have been able to do more easily using the added extensions in the newest Shapespark release, but I was already deep into the project when that dropped.
Given more time I also might have downloaded the bundle from Shapespark and combined the hosting. It would have made some things easier, and I could have been smarter about the loading process (I wish I could preload all the assets intelligently so the drawing was better, but I ran out of time to implement it).
Happy to answer any questions. The forums were a big help putting this together.