How to improve the UX of your Webflow site by providing feedback to visitors

Other use-cases using Memberscript #21

https://www.memberstack.com/blog/how-to-show-custom-alerts-in-webflow

Memberscripts needed

https://www.memberstack.com/scripts/custom-toast-notifications

Tutorial

Cloneable

Why/Use Cases – 

-           Provide users with confirmation that their action was successful.

-           Inform users of the results of their actions.

Providing feedback to your users in Webflow

For an improved user experience, providing feedback for actions performed by your site’s visitors is key. In this guide, we’ll show you how to display toast notifications when visitors perform an action on your site.

For example, if they like or unlike an item, a toast notification will pop up for a set amount of time to inform them that their action was successful.

In order to set this up, we’re going to use MemberScript #21 – Custom Toast Notifications. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Create and style your triggers

You’ll need to have two triggers, one for the “positive” action (e.g. liking) and another for the “negative” action (e.g. unliking). These can be hearts, stars, text, whatever works best for your website.

After you’ve created the triggers, you’ll need to add this attribute to them:

· ms-code-toast-trigger=”VALUE” - the value is either 1 (positive) or 2 (negative)

Create and style the toast notifications

Now you’ll need to create and style the two toast notifications for each action.

Add the two elements you want to pop up and place each of them inside their own div block. For each div block, use this attribute:

· ms-code-toast-box=”VALUE” - the value is again either 1 for the positive state or 2 for the negative state

Now place both div blocks inside a parent div block.

Each toast’s parent div block should be set to hidden and the overall parent div block should be visible.

Making it work

Now that you’ve got both your triggers and the toast notifications, all you need to do is add the MemberScript #21 custom code to your page, before the closing body tag.

Take notice of these lines in the code:

· const fadeInDuration = 200;

· const fadeOutDuration = 200;

· const staticDuration = 2000;

Each of these express how long each action will take in milliseconds, so feel free to edit these values however you see fit.

Conclusion

That’s it, you can now display toast notifications that provide feedback to your users.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo contains multiple items that users can like and unlike, each time displaying a toast notification to let them know that their actions were successful.

Take me to Cloneable!‍