WebApps 2

toasts

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.

import toasts from '@sitevision/api/client/toasts';

Methods

Toasts.publish(options)

Performs a publish-request.

Supported options

Toast 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

import toasts from '@sitevision/api/client/toasts';

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

const publishToast2 = () => {
   toasts.publish({
      heading: 'Heading',
      message: 'Toast message',
      type: 'primary',
   });
};

const publishToast3 = () => {
   toasts.publish({
      message: 'Toast message',
   });
};

const publishToast4 = () => {
   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!',
   });
};