Implementing a Support Widget as a Re-usable element

I created a reusable element that acts as a support widget in the bottom right of the screen. Typical click a button, something expands, type in a message, a button, the thing contracts. What is the best way to implement this on every page of a platform? Is is a footer floating at the bottom of the page?

Yes, you can just add it to the bottom of the page. If you want it to stay “fixed” no matter the screen size, you’d want to have two floating groups above it (one that floats relative to top, one that floats relative to both, and the support one would float relative to bottom).

Hope that helps,

Tal
Learn Bubble @ Nocodify.com

@Nocodify is correct, in fact I am currently building out the exact same thingamajig. Here’s how I approach it…

Create 2 floating groups that are both anchored to the bottom of the page. FG_1 being visible on page load that holds the trigger (button to start chat/msg) > once clicked, animate_out FG_1 > animate_in FG_2 which holds the contact/chat/msg box > once action has been completed (submitted and/or closed) > animate_out FG_2 > animate_in FG_1 for a smooth and crisp support widget.

This whole function can indeed be nested inside its own reusable element and dumped on every page or SPA.

This topic was automatically closed after 70 days. New replies are no longer allowed.