So i've been trying to get this to work for so long now but totally stumped! 🤯
I’m trying to use an HTML embed to dynamically generate “Next” and “Previous” buttons for navigating through items in a dataset (allProjects). The dataset is connected to Webstudio as a Resource data variable, and it fetches data from an external API (Baserow). The data variable works when previewed in the Webstudio Data Viewer, and the data structure looks correct.
You can see the html embed on the share link to see what i'm trying here
https://p-6dd5d5c9-aac4-45f2-babf-03251371e000.apps.webstudio.is/?authToken=d71a77f5-fcca-49c6-8fa1-cd4ef6645f0b&mode=previewI keep getting the following error in the browser console:
Uncaught ReferenceError: $ws$dataSource$allProjects is not defined
What I’ve Tried:
- I verified that allProjects is set up as a data variable in Webstudio and fetches the correct data when tested in the Data Viewer.
- I tried using $ws$dataSource$allProjects directly in the embed but it isn’t recognized.
- I also confirmed that the variable is scoped for the page and not local to another component.
My Qs:
- How can I correctly reference Webstudio data variables (like allProjects and currentSlug) in an HTML embed?
- Is there a specific way to make $ws$dataSource variables accessible within embedded scripts?
- If this approach isn’t viable, what would you recommend for passing data variables into an HTML embed?