showToast( )

Displays a toast notification at the top of a dashboard page.

Toast notification

Description

This function can only be used in page code files for dashboard pages.

The showToast() function returns an object containing a key called remove. The value of remove is a function that removes the toast from the page.

Use the config parameter to:

Control the toast's content and appearance.
Set callback functions to run when the user sees or closes the toast.
Create a clickable call-to-action that displays in the toast.

When showing multiple toasts, requests to display toasts may be queued and the toast may not be displayed immediately. Toasts with a higher priority level are displayed first. A toasts priority is defined using the config.priority parameter. Toasts with the same priority level are displayed in the order they're requested.

Note: When the timeout parameter is set to "none" the toast is rendered into the page layout and pushes the rest of the page down. When timeout is set to "normal", the toast appears on top of other content on the page.

Syntax

function showToast(config: ToastConfig): ToastReturn

showToast Parameters

NAME

TYPE

DESCRIPTION

config

ToastConfig

Toast configuration options.

Returns

Return Type:

ToastReturn

NAME

TYPE

DESCRIPTION

remove

Function

Removes the displayed toast.

Was this helpful?

Display a success toast when a product is updated

Copy Code

1import { showToast } from 'wix-dashboard';
2
3// ...
4
5const config = {
6  message: 'Product updated successfully!',
7  type: 'success',
8}
9
10showToast(config);

Display an error toast with a 'Learn more' link

Copy Code

1import { showToast } from 'wix-dashboard';
2
3// ...
4
5const config = {
6  message: 'Product update failed.',
7  timeout: 'none',
8  type: 'error',
9  priority: 'low',
10  action: {
11    uiType: 'link',
12    text: 'Learn more',
13    removeToastOnClick: true,
14    onClick: () => {
15      console.log('Learn more clicked!');
16    },
17  },
18};
19
20showToast(config);

Remove a displayed toast

Copy Code

1import { showToast } from 'wix-dashboard';
2
3// ...
4
5const config = {
6  message: 'Product updated successfully!',
7  type: 'success',
8  timeout: 'none',
9}
10const toastRemover = showToast(config);
11setTimeout(toastRemover.remove(), 5000);
12
13/* Promise resolves a function that removes the toast. */

Remove a displayed toast when a button on the page is clicked

Copy Code

1import { showToast } from 'wix-dashboard';
2
3// ...
4
5const config = {
6    message: 'Product updated successfully!',
7    type: 'success',
8    timeout: 'none',
9}
10let toastRemover = showToast(config);
11$w('#removeToastButton').onClick(() => {
12    toastRemover.remove();
13})
14
15/* Promise resolves a function that removes the toast. */