How to embed Autodesk Forge model viewer into a website?

Question

I have created a web application for viewing models using the AutoDesk Forge Viewer, and I want to be able to add this onto a website. I used this tutorial: https://learnforge.autodesk.io/#/tutorials/viewmodels (using node.js for the language option).

The goal is to have the user access the viewer application from the website. I have been using VS code live server for testing. However, when I link the page that has the viewer into my own website, the viewer does not load the buckets or allow for creation of new buckets. It is just stuck on a loading symbol like below:

[Loading screen][1]

Could I please have the following questions answered:

1. What is the proper way to embed this application onto a website in the manner I have described above?

2. What part of the code controls where the buckets are loaded in?

Thank You. [1]: https://i.stack.imgur.com/4Xlfv.png

Answer 1

LearnForge tutorial is an example on how to work with Forge API. As a web app, it depends on how the developer(you) designs the user interface, workflow, and data management.

eg you can remove the panel of bucket & object lists,keeping the viewer only in the UI. while you will need to design how to provide the object id (urn) which will be loaded in the viewer. Normally, you would need to setup your own users management, logging process etc, and set your own user permission. Then the user logs in, the web app lists all files (objects) he has permission to check, and when one file is selected, get the urn and load the model in Forge Viewer.

if the end user of your app is BIM360 users, you could take advantage of BIM360 data management workflow, which follows the same permission specified with BIM360. Then the other tutorial will be a good start. https://learnforge.autodesk.io/#/tutorials/viewhubmodels

In any case, the workflow and UI are defined by yourself. I hope this explains. If you have any further questions that need a meeting call, please feel free to check the calendar of our team: https://calendly.com/autodeskforge