Noticeable Widget rendering with custom settings based on conditions

noticeable.js

const labelId = '83e6Z7u9rW83elan09Nx'
const widgetId = 'iTyk3i4j5sECMquDZLgP'

noticeable.on('widget:ready', widgetId, async function(event) {
    const publications = event.detail.publications
    if (publications.length > 0) {
        if (publications[0].labels.includes(labelId)) {
          const widgetOptions = {
                backgroundColor: '#ff0000',
                backgroundColorHover: 'darkred',
          };
          await window.noticeable.set('widget:widget_view:settings', widgetId, widgetOptions)
        }
    }
})

noticeable.render('widget', widgetId);

To identify the identifier of a label, the easiest is to open the label for edition in the Noticeable dashboard (click "Labels" in the left navigation, then the vertical 3 dots icon next to the label you want and "edit"). In the URL you will see something like:

https://dashboard.noticeable.io/projects/oDl2ozWWAY8yFTFPO7KC/labels/83e6Z7u9rW83elan09Nx/edit

the characters between the last 2 / is your label ID (83e6Z7u9rW83elan09Nx in the example above).

Note that widget options depend on the widget view used (top banner, modal, etc.). They are not documented yet, but I’ll be happy to assist if needed. All settings you can change in the live editor are also available for real-time updates.

Thanks, this is helpful. I'll try that.