It seems a lot of SaaS are moving their web integrations to allow for data-attributes as key elements to integration.
The potential for editable “data-attributes” on elements could really open up the potential for integrations without knowledge of API work for some of those integrations, as well as prepare for scaling.
The largest con could be code injection that could break websites, requiring high amounts of support from SiteJet if users break their websites accidentally, from what I am aware.
I do know Webflow does offer this ability - is there any research that can be done for how to implement this without overhauling the entire SJ security layers?
One potential solution could be to allow us to create an HTML element as a wrapper container and add the data-attribute there. But when we use HTML, we can’t use the GUI to drag and drop native SJ elements and continue the build inside an HTML element. Is there a way to allow us to visually nest SJ content inside a <div data-attribute-name="value" ... ></div> ?
Perhaps a “data-attribute” container is simply a div that allows us to add data-attributes?
Thoughts? Perhaps this is already being addressed as well.
you can use HTML elements and set it up where it is needed, and you can also set up an empty HTML element with data attributes in seconds, e.g: <div data-app-id="abc123"></div>
To understand correctly, then anything inside that HTML element would have to be in written HTML as well - we couldn’t use the WYSIWYG editor and SiteJet elements?
thanks for your feature request! Could you elaborate on more specific use cases that you are trying to solve with custom data-attributes on containers? As far as I can oversee, most use cases are about filling empty <div>s with third-party content (like booking widgets, chatbots or similar). In such cases, a regular HTML element would do the job, since you don’t need to add further content into it. Maybe you have a specific provider in mind?
But I also have two hacky workarounds in mind that could help you in the meantime, but both need to be used with caution (!):
Using your browser’s developer tools you could manually add data-attributes to the <div class="inner">
of any container so it reads <div class="inner" data-app-id="abc123">.
After doing so, you can trigger a random change in the CMS to be able to save and save. But be careful about it, as this can destroy website contents if not done properly! Try within a test website first.
The source for this was integrating Memberstack - you can have blocks of content become inaccessible based on data-attributes for non-logged in members.
I wanted to wrap multiple SJ container sections into one HTML Div that I could add that data-attribute on, but couldn’t seem to figure out how to do it natively.
Thanks for the workarounds! Number 1 is my next option.
Edit: regarding your understanding, you are correct - the main source was just being able to do it WYSIWYG style, rather than with DOM Manipulation.
This it would be really nice to have. The possibility to define custom data-attributes using the UI.
It would also be great to bind these attributed to collection fields (making use of the dynamic data).
Hi! Was this already added to Sitejet?
I see it was marked as resolved.
I’m interested to have the possibility to define custom data-attributes using the UI.
I’ve seen @malte response, but I think this is more of a temporary fix/solution.
