Editable Data-Attributes on Elements (Non-HTML)

Feature Requests Website Builder Request
5

Hi @zachary

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 (!):

  1. You can use custom JS to add data attributes to elements that you identify through a CSS class, e.g.
    document.querySelector('.your-custom-class').dataset.appId = 'abc123';
    and execute third-party scripts after that. Here you can read more about accessing and manipulating data attributes with JS
  2. 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.
3 Likes