Hi! I used HTML code to create a map interface, which zooms in when I click and can be moved around by dragging the mouse. I've integrated this map interface into Wix via the "embed HTML code" option in Wix Studio. However, I've run into a barrier. My plan for the map was to have it have buttons on it that can be used to navigate to different sections of the website. These buttons would need to be a part of the HTML code I've written since I want the size/position of the buttons to change as people change the scale and position of the map. When a user clicks on these buttons, I can detect this within my HTML code, but I am unsure how to make this HTML code interact with Wix so that the button click can cause the user to navigate to a different part of the website. If anyone had any idea how I could implement this, that would be great. Thanks!
top of page
bottom of page
Thanks so much!
Hi,
Communication between HTML elements and Velos happens via the postMessage and onMessage APIs.
https://dev.wix.com/docs/velo/velo-only-apis/$w/html-component/on-message
From the Wix example:
//this is inside your HTML code: function sendReturnMessage(msg) { window.parent.postMessage(msg, "http://mysite.com"); }(This is what you would run on the button click in your case).
//this is in your Velo code $w("#myHtmlComponent").onMessage((event) => { let receivedMessage = event.data; });(This is where you would handle the navigation to different parts of your website).
There is also a video on this subject in the Advanced Course
It is currently member only but will be available to the general public in a few months.
Hope that helps,
Eitan