How to create the toaster notification in builder.io

FAQs
1

How to create the toaster notification in builder.io. When the page is loaded the toast appear at the top right corner and after the 20s its disappear from the screen. Can you give me any idea how to do this in builder.io?

2

Hey @Dhanashree, I wanted to clarify my previous response as I realize it might have been misleading. Here’s the correct approach to creating a toaster notification in Builder:

Step 1: Add a Box Element for the Toaster

  • In the left-side components panel, drag a Box element and drop it onto your page.

Step 2: Style the Box for the Toaster

  • Select the Box element to open its settings in the right-hand panel.
  • Go to the Style Tab:
    • Set the following properties:
      • Position: fixed
      • Top: 20px
      • Right: 20px
      • Background Color: Set to a distinctive color like #333 for a dark background.
      • Color: Set to white (#fff).
      • Padding: Add padding (10px).
      • Border Radius: Add border radius (5px).

Note: Change the styling to suit your needs

Step 3: Add Content to the Box

  • Click inside the box to add text content such as “This is a toaster notification!”.

Step 4: Animate the Box Element

  • Select the box element to open its settings in the right-hand panel.
  • Go to the Animation tab.
  • Click on Add Animation.
  • Choose the Fade In animation (or any preferred animation).
  • Set the Trigger to Page Load.
  • Set the Duration to 1s (or your preferred duration).

Step 5: Add JavaScript to Control Timing and Hiding

  • Go to the “Edit JS+CSS” Section.
  • Insert the following JavaScript:
setTimeout(() => {
    const toaster = document.querySelector('#your-box-element-class');
     console.log("toaster", toaster);
    if (toaster) {
      
      toaster.style.transition = 'opacity 1s';
      toaster.style.opacity = '0';

      // Remove from the DOM after the transition
      setTimeout(() => {
        toaster.classList.add('hidden');
      }, 1000);

    }
    // match the duration of opacity transition
  }, 5000); // 5 seconds

Make sure to replace #your-box-element-class with your box element’s actual class or ID. You can add the ID under the “HTML Attributes” in the “Styles Tab”.

I hope this clears things up! Let me know if you run into any issues while implementing this.