Building an customizable interactive embeddable widget

I have a concept in mind, but I don’t really know how to properly describe it in “dev terms” and would like some advice on how to start.

Essentially, I would like to build a customizable virtual floorplan, with the usual room components like chairs, desks etc. Once I create a floorplan, I’d like to be able to generate a “unique” embed code that one can embed in another third-party website. The floorplan would ideally be interactive.

Imagine a university library with study spaces for students. A floorplan for the study spaces/desks is designed and saved using the “builder”. A embed code is generated, and is embedded into the library’s website. The floorplan is rendered on the library website. Students with accounts or some form of individualized login via a simple form or UI, can then mark a study space as occupied or not, via the library website.

Ideally the workflow would be as such:

  1. design a floorplan in a “builder” or maybe just html/css/js
  2. save the floorplan to database - layout, coordinates etc.
  3. generate an embed code snippet unique to the floorplan
  4. embed code in another website/url, so that it will render the floorplan on the website
  5. third party users can interact with floorplan elements
  6. said changes are reflected on the embedded floorplan

Is this a big project? Where does one start? In the simplest form, what am I trying to build? What tech stack do I need - a CMS, can this be done in pure HTML/CSS/JS?

I really have a minimal grasp of this, so any tips on quantifying this and how best to direct my research efforts is greatly, greatly appreciated.

This is one of those problems where you have a question but don’t even know what to Google.

I used to be a drafter for more than 3 years before changing career into web app developer. First of all you need to ask yourself why do drafting using a web browser instead of software products from autodesk? The only reason i can think of is to create an open source community. Drawing floor plan with auto-generated furniture’s, materials and dimensions are not good drafting practices as it is very prone to on site clashes.

Thanks for the response.

My intention isn’t to recreate drafting software or even design to-scale floorplans for construction. I’ve used AutoDesk in the past too, but that is for a specific application. This is not for that at all. I just want a simple visual representation of a room/space (virtual room), with interactive room elements (for occupancy etc.) and then be able to embed the virtual room elsewhere on other websites via a simple embed code.

Yes, but the initial bits are not that complex. It has a relatively steady ramp-up in terms of stuff you need at each stage.

You have a number of available desks, give them each a number. Then they can be occupied or unoccupied, but start out as the latter. So eg:

{ 1: false, 2: false, etc... }

Could just be true/false. Just a JS object will do for now. There’s your “database”, anyway: a “table” with a column of IDs and a column of whether a seat is occupied or not.
The above doesn’t really work going forward, it needs more subtleties, but it’ll do fine for first go.

This is your server-side code.

The client (frontend) can be an HTML page that shows the plan, and where each slot corresponds to a desk ID. On that page, the plan is likely easiest to produce using either SVG or canvas.

The final part is how to embed: you have an HTML page, so the embed is either going to be an iframe that points at that page, or the HTML page you build is entirely JS and that whole thing gets embedded.


This can be done entirely in JS, but some of that is likely to be backend. There are reasons going forward why you want the backend under your control, but for a lot of things at first you can use a cloud data store like Google’s Firestore and avoid actual backend work.

Thanks for the feedback. It took a couple reads on my end, but I think I have a good grasp on what you’re conveying.


Database_

In regards to the “database” using a JS object, assuming I wanted to add other statuses or values, say a timestamp, or timer value, it would simply be a matter of adding “columns” to the object. You mentioned future scaleability, and that it would likely require a solution with more subleties. You mean a real database right, some SQL driven solution? I would think a basic MySQL database would work, rather than document-based database like MongoDB?

One thing I’d like to do is have the “statuses” be reflected visually in the embedded visualization, say a color change from green to red, when switching from available to occupied. Can this be done after it’s been embedded? I’m just trying to visualize what actions or calls need to happen from client to the server and back, to make a change on something that’s embedded.


Clientside/frontend_

This portion is definitely one of my major question areas, at least in conceptualizing this entire project. you mentioned SVG and Canvas, I recently started watching some basic tutorials on HTML canvas, and thankfully can see why you suggested. One thing I noticed from those tutorials is that the drawing-on-canvas is very manual and really repeatable, assuming I want to be able to quickly build floorplans for many college libraries. Is there a way to automate or simplify the drawing process - drag drop, grids etc. As an MVP, the shapes representing the study areas will likely just be rectangles, but eventually would like to add more details.

Also could you elaborate on the SVG approach?


Embed_

Tying into the clientside discussion, especially with the canvas/SVG approach, using JS to do it makes the most sense, since from what I can tell, iframes aren’t really UX-friendly.


Backend_

Could you please elaborate further on what you mean by "some of that is likely to be backend., and what Google Firestore does/can do in this case?

Thanks again for your time and insight