Toasts [@since 8.2.1]

Push notification messages to your visitors with a toast. Toasts are an easy and effective way to tell your visitors a short and consice often positive message from your WebApp.

A Toast message should not be used to inform your users that an error has occured.

The Toast markup is based on the Envision component Toast.

Hello, World! This is a Toast message.
Hello, World! This is a Toast message.
Hello, World! This is a Toast message. This Toast has several lines of toasty content!

Below is a example of how to use the Toast util.

const Toasts = require('toasts');

Methods

Toasts.publish(options)

Performs a publish-request.

Supported options

Property

Descripion

Type

Default

heading

Heading parameter (can be empty).

string


message

Message parameter.

string

""

ttl

Time to live, how long the toast will be shown, (in seconds).

number

4

callback

Callback function executed when toast message is removed.

function


type

Type of Toast. Available types are:

  • empty: "" - Based on secondary element background color on website.
  • "success" - Based on success element background color on website.
  • "primary" - Based on primary element background color on website.

string

""

checkmark

If the toast should display a check mark icon.

boolean

false


Examples

const Toasts = require('toasts');

Toasts.publish({ 
  heading: 'Heading',
  message: 'Toast message', 
  type: 'success',
  ttl: 3, 
  checkmark: true,
  callback: () => { console.log('Executed when Toast is closed.')} 
}); 

Toasts.publish({ 
  heading: 'Heading',
  message: 'Toast message', 
  type: 'primary'
}); 

Toasts.publish({ 
  message: 'Toast message'
});

Toasts.publish({
  checkmark: true,
  heading: 'A longer toast message',
  message: 'Hello, World! This is a Toast message. This Toast has several lines of toasty content!',
});