Help: REAL custom in-app alert in a Resuable element (Page>RE>RE)

Need help
1

I’ve tried every plugin for alerts/toast notifications. Looked at many forum posts and youtube videos. Neither those or the bubble.io element is customizable enough for the alert I want in the top right corner of the page.
I have a Page > reusable element > and a reusable element where data being changed should show a success alert in the design I want (attachment below) at the top right corner.

Problem is, I’ve tried to do back-end workflows, custom event triggers, and custom states to show the alert I want on the top of the page in the top right corner like all the toast notification plugins do it… even if your trigger the plugin to show the notification in a reusable element, it will show at the top of the page and doesn’t close from mouse click (like a group focus does), which is what I want.

What do you recommend I do to get an alert on the age in the design I want?

Screenshot 2025-05-17 200438
Screenshot 2025-05-17 200438472×199 7.07 KB

2

When you click the X icon, does the WF get triggered?

3

I would build the toast inside a group focus to get to work the way you want… No plugin, no alert element. Group focus > re > re

4

You can do this with one HTML element on the page + Toolbox → Run Javascript from any reusable, so it works even when your workflow is three nesting levels deep (Page ➜ RE ➜ RE).

HTML:

<!-- Toastify assets -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

<script>
/* global helper Bubble can call from anywhere */
window.bubbleToast = function (msg, type = "success") {
  Toastify({
    text: msg,
    duration: 4000,
    gravity: "top",      // top or bottom
    position: "right",   // left / center / right
    close: true,
    style: {
      background: type === "success" ? "#e8f9f0" : "#fdecea",
      color:        type === "success" ? "#1f9254" : "#b71c1c",
      borderRadius: "8px",
      boxShadow:    "0 2px 6px rgba(0,0,0,.15)"
    }
  }).showToast();
};
</script>

and then you can trigger it from ANY page using Toolbox, since it calls a function called bubbleToast().

you just have to do this (in any condition you want: Page is loaded, Input value’s changed, etc):

Run Javascript ->
bubbleToast(
  "John’s workspace role has changed to “Member”",
  "success"          // or "error", "info", etc.
);