Skip to content
  1. Extras
  2. FetchIt
  3. Popup notifications
  4. Notiflix.Notify

Notiflix.Notify

Notiflix is a plain JS UI toolkit. For toasts, use the Notify module.

CDN setup

Script and FetchIt.Message via ESM:

html
<script type="module">
  import Notiflix from 'https://cdn.jsdelivr.net/npm/notiflix@3/+esm'

  document.addEventListener('DOMContentLoaded', () => {
    FetchIt.Message = {
      success(message) {
        Notiflix.Notify.success(message)
      },
      error(message) {
        Notiflix.Notify.failure(message)
      },
    }
  })
</script>

In a separate module with defer (after the FetchIt script), skip the DOMContentLoaded wrapper:

js
import Notiflix from 'https://cdn.jsdelivr.net/npm/notiflix@3/+esm'

FetchIt.Message = {
  success(message) {
    Notiflix.Notify.success(message)
  },
  error(message) {
    Notiflix.Notify.failure(message)
  },
}

Form blocks [data-success] and [data-validation-error] work alongside toasts. Skip Message if you only need those blocks. Selectors: documentation.