00:00
Buy Me a Beer
Utilities

How to Add a toast to Webflow

Remove element after page load

Install the VisualDX Script

Firstly, make sure you have the VisualDX script before your </body>

How to Install VisualDX Script

Install the VisualDX Script

Copy the VisualDX script

<script src="https://cdn.jsdelivr.net/npm/visualdx@1/dist/vdx.min.js"></script>

Paste into the global Footer Code

Paste the VisualDX script before the </body> of your global Footer Code. You only need to do this once, one script to rule them all.

close

Add Toast Button Attribute

Copy this attribute:

vdx-toast-button

Paste the attribute into the Custom Attributes Name field of a Webflow Button.

Body
Button
Click Here
Div
Toast Message
Button
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-toast-button
Value

Add Toast Message Attribute

Copy this attribute:

vdx-toast-message

Paste the attribute into the Custom Attributes Name field of a Webflow Divwhich contains the toast message

Body
Button
Click Here
Div
Toast Message
Button
Style
Settings
Interactions
Settings
Custom Attributes
Name
vdx-toast-message
Value

Publish

  1. Text Link
  2. Text Link
  3. Text Link
🥪 Eat Your Toast 🥪