Menu and embedding ​

By using the initializing options, you can influence the looks and behavior of the annotations. This is a low-effort method to create guided tours or product showcases. Here are some examples.

Read up on how to use the Initialization options

Clean embed with annotations ​

This is the cleanest embed with annotations that you can get. Use the following init parameters:

autostart: 1,
ui_annotations: 1,
ui_general_controls: 0,
ui_infos: 0,
ui_watermark: 0,
ui_stop: 0

ui_annotations: 1 turns on the annotations menu. ui_general_controls: 0 hides the controls in the bottom right of the iframe.

Autoplay with annotations ​

Hide the annotation menu and loop through the available annotations automatically. When you navigate the model, the autoplay stops temporarily. Ideally you'd use the API to stop the autoplay entirely when someone interacts with the model, but that's not possible out-of-the-box. Use the following init parameters:

autostart: 1,
ui_general_controls: 0,
ui_annotations: 0,
annotation_cycle: 2,
ui_infos: 0,
ui_watermark: 0,
ui_stop: 0

annotation_cycle: 2 will loop through the annotations with a 2-second interval.

Kiosk mode ​

You'll notice that this 2-second interval is too short to read the annotations. We can hide the hotspots and notes and block interaction with the model altogether to create a kiosk mode. Use the following init parameters:

autostart: 1,
ui_general_controls: 0,
ui_annotations: 0,
annotation_cycle: 2,
annotations_visible: 0,
ui_infos: 0,
ui_watermark: 0,
ui_stop: 0

annotations_visible: 0 hides the annotations altogether. Now you can focus on the 3D model and the annotations won't distract you.

To disable navigation, I've added the following to the success callback: setUserInteraction can disable or enable all interaction with the model.

api.addEventListener("viewerready", () => {
  api.setUserInteraction(false);
});

However, even with user interaction turned off, when you try to orbit the model (which you now can't), the autoplay stops. As an alternative you can disable all mouse interaction with the iframe by adding pointer-events: none to the iframe's CSS.