Incorporating speckle viewer into React.js SPA

you nailed it. the appended query string tells the app what server to look at, and if it’s missing it freaks out. it’s easy to generate on your side - it’s just a base64 encoded string :slight_smile:

E.g., from this viewer link, the query string:

eyJzZXJ2ZXIiOiJodHRwczovL2hlc3RpYS5zcGVja2xlLndvcmtzL2FwaSIsImNhbWVyYSI6eyJ0YXJnZXQiOlstOC42Njg4ODk1OTI1NjcwMywtOS4wMTg4NTkzNzA4MDYzMDcsMC4yNjg4NzI1NDU0NzA3NjYxXSwicG9zaXRpb24iOlsxOS40NjQzODYyMTExMzkzMzUsMTkuMTE0NDE2NDMyOTAwMDU0LDI4LjQwMjE0ODM0OTE3NzEwN10sInJvdGF0aW9uIjpbLTAuNzg1Mzk4MTYzMzk3NDQ4NiwwLjYxNTQ3OTcwODY3MDM4NzYsMi42MTc5OTM4Nzc5OTE0OTQ0XX19

is actually this (via window.atob()):

{"server":"https://hestia.speckle.works/api","camera":{"target":[-8.66888959256703,-9.018859370806307,0.2688725454707661],"position":[19.464386211139335,19.114416432900054,28.402148349177107],"rotation":[-0.7853981633974486,0.6154797086703876,2.6179938779914944]}}

It contains extra stuff for camera rotation, filter by stuff, etc.
so all you need to do to get the links working again is encode just this:

let serverQueryObj = { server: "https://THE  SERVER" }
let myLinkUrl = `https://app.speckle.systems/#/${ YOUR STREAM ID }?s=${ window.btoa( JSON.stringify( serverQueryObj ) ) }

Perfect spotting! I didn’t know about your iframe embedding adventures when i made this change. Let me know if it works out!