▼
Streaming live at 10am (PST)

Mavo Integration

Design help Custom code
#1

I just ran across this new thing called Mavo that allows you to turn your static site into a reactive web application with little custom code work at all. It’s pretty easy to add dynamic elements to a Webflow page using HTML embed widget but they are not elements that can easily be styled through the Webflow UI nor can you see them in the Designer. What I’d really like to do is utilize Webflow custom attributes to bring my text box to life. Much like the first section in this example:

http://mavo-test.webflow.io/

So far I’ve been able to use custom attributes in WebFlow to invoke Mavo, and even store it’s key in the browser’s local storage, but I cannot apply a Mavo Property in order to tell Mavo what to do with the text field. You can see it kind of working in the last section in that link.

Any idea how to make Mavo work with elements created in Webflow?

Here’s my preview link:
https://preview.webflow.com/preview/mavo-test?preview=0da3e8e46f1d64e6736a44f739d587ea

#2

Slight update here, was able to fix this by:

  • moving my text field into a parent div
  • invoking Mavo and defining a storage location in the parent div
  • giving the child text element the property
#3

Ran across something else when trying to call the Mavo date picker. The attribute name “datetime” is a reserved name. :unamused:

#4

You can use custom code to get around it.

#5

Can you elaborate more on this?

#6

I was referring to using HTML in the embed code component. That way you can use any reserved attribute names.
<article datetime="somevalue">

#7

Thank you for the help! If i use the embed code component to reserve an already-reserved attribute as my own will it be available throughout the page, or just within that embed code component?