Third-party plugins

Notyf (Toasts)

Transform Your User Experience with Seamlessly Integrated and Customizable Toast Notifications, Tailored for Modern Web Applications.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://carlosroso.com/notyf/" target="_blank" class="link link-primary font-semibold">Notyf JS</a> with Semji.

<head>
  <link rel="stylesheet" href="../path/to/notyf/notyf.css" />
</head>
<body>
  <script src="../path/to/notyf/notyf.js"></script>
</body>
JavaScript
// Notyf instance
const notyf = new Notyf();
// Trigger Notyf on button click
document.getElementById('trigger-btn').addEventListener('click', function () {
  notyf.success('This is a primary notification!');
});

Basic example

Default notyf

Use the example below for default notification, initialized with the JS code provided below.

Custom notyf

Use the example below for custom notification, initialized with the JS code provided below.

Advance options

Notyf generator

Use the `Notyf generator` below to create custom notifications according to your requirements for position, type, behavior, message, and duration.

Position - X
Position - Y
Behavior
Type