Custom Toast Notification

Add Custom Toast Notification in Webflow nocode

Required Script*

Copy this <script> and paste into the Body or Head of your page

<script src="https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt@main/custom-toast-notification/script.js"></script>

Required Attributes*

Add thisDIV to be the wrapper of the toasts

Add this attribute to the div element

Name

ct-toast-container

Value

I want to change the position of the toasts

Name

ct-toast-position

Value

top-right

Add this values to change the location of the toasts
top-right
top-left
top-center
bottom-right
bottom-left
bottom-center

I want to target thisDIV element as mytoast

Name

ct-toast-mode

Value

your-value

You can name the value anything eg Success, Error etc.

Optional: I want to change the duration of this toast

Name

ct-toast-duration

Value

3000

Default is 3000, you can change it eg 5000, 6000 etc

When I click this button, it shouldTrigger the toast

Name

ct-toast-trigger

Value

your-value

Ensure the value here is the same as your toast

Optional Attributes*

I want to add a Progress bar to the toast

Name

ct-toast-progress

Value

Add this element inside your toast div element

I want to change a Text in Toast based on trigger clicked

Name

ct-toast-text

Value

your-value

Add this attribute to your text in your toast. Ensure the value is the same as the toast

Name

ct-toast-text

Value

your text

Add this attribute to your trigger element, the value should be your text.

I want to have more than one time on same page

You can add more than one toast and triggers in a page.
Just ensure your value is unique.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.