Noticeable

Widget samples

This page shows how to customize the Noticeable widget. It demonstrates styles personalization using CSS properties and mixins but also advanced configurations through the usage of Widget specific attributes.

You can reset the badge counter at any time.

Default Style

The noticeable-widget element is a Web component. It provides scoped CSS, and encapsulates implementation details using Shadow DOM.

Custom Badge Style

Styling the component requires to use CSS mixins. They are documented in the Widget documentation.

Custom style definitions go in a custom-style element. This is to make sure your apps and elements display correctly, even on the few browsers which are not implementing yet the Shadow DOM v1 specifications.

Custom Trigger

The widget element has public methods to perform actions but also properties to configure the layout and the behaviors. The example below makes use of the popup-backdrop attribute associated with the property popupBackdrop.

Custom Popup Style

This example demonstrates an advanced customization: personalized popup header and footer, larger width, different post excerpt style for posts which have been read, etc. This is achieved by using custom styles and attributes such as popup-footer, popup-header, trigger-eye-catching.

Custom Eye-Catching Animation

The default eye-catching animation can be replaced by another one. This requires injecting a new CSS keyframe definition in the noticeable-widget element by using its injectCSS method with Javascript on page load:

      
        this.addEventListener('noticeable-widget-ready', function (event) {
            var widgetElement = event.target;
            widgetElement.injectCSS(
                '@keyframes pulse {\n' +
                '  0% {\n' +
                '    box-shadow: 0 0 0 0 rgba(209, 14, 0, 0);\n' +
                '  }\n' +
                '  40% {\n' +
                '    box-shadow: 0 0 0 5px rgba(209, 14, 0, 0.3);\n' +
                '  }\n' +
                '}');
        });
      
    

Then, the new keyframes animation code can be referenced in the eye-catching CSS mixin as follows:

The pulse keyframes definition used in this example is included with the widget under the name eye-catching-pulse. As a consequence, if you want to use this specific animation, you don't need to inject the definition. You simply have to copy the custom-style definition and replace pulse by eye-catching-pulse.

Have questions? Need help? reach us to [email protected]