We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Building a Guided Welcome Tour Intro

Home › Forums › General Questions › Building a Guided Welcome Tour Intro

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • 2024-07-30 at 4:27 pm #76280
    masj
    Participant

    QQ before I go down this rabbit hole, as hopefully people have attempted something like this prior.

    I’m looking to construct a guided welcome tour for my Verge3D app (using the index.html with iframe element inside). I’m sure most of us have interacted them before on websites that “guide” the user through the UI on their first visit, with modal popups shown in sequence one by one to point out and explain visually how to use the site.

    I’m already using annotations inside the V3D scene for, but on top of all the html elements, is there a built-in or a recommended programmatic approach to implementing this with Verge3D? The goal would be to have the modal popups propagate based on location of either html elements in the top level html file, and/or 3D elements from the v3D scene.

    Thanks in advance for any guidance and tips. :bye:

    2024-07-30 at 5:33 pm #76283
    xeon
    Customer

    Created a few of these. There are different approaches depending on the project needs.
    1. HTML/CSS / JS
    2. V3D HTML / CSS puzzles
    3. V3D planes with textures, create your own buttons, etc.

    The approach is typically based on cost, timing and the developers skill set in conjunction with the project needs. As an example a person with little to no knowledge of HTML/CSS might opt for doing it all using 3D objects in V3D especially if there is no reason to have live text, language options, etc.

    On the other hand, if the project dictates SEO, changing languages, saving sessions states, etc, a Option 1 is better but Option 2 can work well too.

    With respect to using the index.html and an iframe. I am unclear as to what you are trying to convey. Are you stating your project.html is going to have an iframe inside it? Or are you saying your project.html will be an iframe inside an index.html. And if so are you wanting the user guide to be in the iframe or in the project.html or more specifically inside the verge3D canvas?

    With the release of V3D 4.7 you have a new modal puzzle that can help you create pop ups that can be useful in creating this sort of thing.

    There are so many choices…you have to select an approach you feel most comfortable with then just ask as many questions as you need on the forum I am sure there will be people able to help.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2024-07-30 at 7:09 pm #76287
    masj
    Participant

    Always love it when I get a reply from you, Xeon. Super thorough. Really appreciate it!

    re: index.html w/iframe, I mean that there are additional html elements on top of those already in the V3D app (think buttons and widgets on top of the iframe like the official V3D scrolling swiss army knife example). That said, I think I’ll have to attempt option 1, as I guess I was preparing for from the start in the absence of an out-of-the-box option.

    Thank you for pointing out the new modal puzzle feature tho!! I’ve yet to look into that, but sounds like it could play a role. Have a great day B-)

    2024-07-30 at 7:56 pm #76288
    xeon
    Customer

    The Swiss Army Knife Demo is one way to do “overlays” but is typically frowned upon in enterprise solutions because of the iframe. The buttons / menu used in the Swiss Army Knife demo could have been built directly in the project.html file and there would be no need for an iframe. This is basically how using the HTML puzzles would work as well.

    However, if you are already invested and you have your menu system working in an iframe overlay then… I would definitely consider the modal puzzle or just add one using CSS if thats an option. Link to basic concept: https://www.w3schools.com/howto/howto_css_modals.asp

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2024-07-30 at 9:40 pm #76296
    masj
    Participant

    Thanks Xeon.

    Good take about possibly skipping the iframe setup altogether. I saw initial value in abstracting the webpage UI, but it’s really not adding much, as I’m not using a no-code solution to build it.
    Shouldn’t be too hard to consolidate things in to a single html and css file, and change a couple things in the JS file. :good:

    Re: the modal box: ya, tht could work. Thanks for the link!

    2024-07-30 at 10:03 pm #76298
    xeon
    Customer

    Good luck…. the Verge3D puzzle is dialog HTML that has the modal option.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.