All Collections
Knowledge Base
Customer Inquiry: I have a complex Custom Javascript requirement I want to implement myself.
Customer Inquiry: I have a complex Custom Javascript requirement I want to implement myself.

Read this raw conversation between customer and support to find the answer you need.

Jade Caymo avatar
Written by Jade Caymo
Updated over a week ago

Question

I have a developer, how would I implement this "Book Now" screen on a tour with multiple hotel rooms?
​
Here are my requirements


​Enable JavaScript to allow our developer to perform the following:

  • Add text (data) layer within hotel room hotspot scenes inside 360 virtual tour for end users to view.

  • Give users the ability to see available dates for each cabin or site

  • Allow users input parameters that get them to the reservation screen on hotel room booking site.

  • Add a "Book Room" button links out to the hotel room step 3 booking step to finalize their reservation.

Answer

This can be done using the HTML Infospots, where you click and it opens the UI Mockup in a modal. HTML area of the HTML Infospot can receive inline javascript and inline CSS as well as HTML, so you have everything you need there.

Or it can be done with ultimate flexibility using our Custom Javascript feature in Tour Settings. For example, you could have the UI component always show in bottom right, depending on which scene you are on the information changes. You will insert the UI Mockup elements into the DOM by using common javascript methods such as createElement, etc. In this way, you can use Custom JS field to manipulate both HTML and JS. For styling, use the Custom CSS feature to target the relevant components.

If the developer can make the feature here (as they should), https://codepen.io/claytonrothschild1/pen/oNyLNbr then our team can show them how to incorporate it into CloudPano.

We provide this raw question and answer between a customer and our support so you can learn more about our product. We hope this answer helps you. If you have any clarifiying questions or would like more detail, please chat us or call us anytime and reference this article.

Did this answer your question?