How to call Wix Velo function from vanilla client JS?

Question

I have a Wix site where the user can scan a QR code, via a web-based QR code reader (html5-qrcode) embedded on the page. I embedded that library via the Custom Code option in the site's settings in the Wix Dashboard.

I would like the decoded value of the QR code to be stored in one of the site's collections.

I know that in Velo, I can use something like:

import wixData from 'wix-data';

wixData.insert('scanned_instructions', {
    URL: url
})

But what I can't figure out is where to put such code, and how to wrap it in a function that can be called from my vanilla JS that's in the Custom Code section.

I've even considered using a Custom Element and having my custom code put the value of the QR code in it, hoping I could have that change event caught by Velo, but I have yet to succeed.

Answer 1

You can use postMessage in your html code to send event to your Velo code and receive it by onmessage in Velo. When you receive the event, you can save it to your collection.