Hide Controls when using Javascript API


(Masonnugent) #1

We'd like to embed our models into a site using the API so that we can have expanded annotations, launching overlays with details when someone clicks an annotation.

However, if we position an element over the viewer (with z-index), and them someone clicks FullScreen, the overlay is of course hidden since the fullscreen only applies to the iframe. I'd like to use our own full screen functionality to make the entire page fullscreen (to include the overlay), but I can't find a way to suppress the controls on the lower right. I see that the controls should be hideable when using embed, is it possible with the JavaScript API?



Sounds really interesting. I'd love to see the final result.

First, you need a Business account to hide the controls. Or, more specifically, the model you're embedding needs to be on a Business account.

For a typical static embed, this is done with the URL parameter ?ui_controls=0

Details: https://help.sketchfab.com/hc/en-us/articles/203509907-Share-Embed-Online#embed-options
Example: https://help.sketchfab.com/hc/en-us/articles/203497057-Business

When loading a model with the Viewer API, these parameters can be passed during initialization:

client.init( urlid, {
    success: success,
    error: error,
    ui_controls: 0,
    ui_infos: 0
    // other options

One other thing came to mind. I haven't tested this, but a quick and dirty way to prevent the native full screen could be simply removing the allowfullscreen attributes from the iframe tag.

(Masonnugent) #3

Thanks for connecting the pieces of the puzzle, James. I'll get the client to upgrade their account and try again.

And I'll post back once the site is live, though this stage is a proof of concept, so we could be some ways away from going live.


Cool, don't hesitate to reach out if you have other questions :smile: