How to display Joomla System Messages in Popup

Joomla System Messages provide valuable feedback for various actions performed in your Joomla websites. Your visitors can be informed for:

An occasion where they can not access a certain article or some other resource.

They tried to log in with wrong credentials.

Any other custom message that might come from any extension which utilizes Joomla System Messages.

For all these occasions, Engage Box can be used to display those messages with all the comforts that Engage Box already has.

Although, Engage Box can not accomplish this task without the necessary functionality of another extension, Regular Labs Sourcerer (Free) Plugin. With Sourcerer you can inject actual PHP code inside almost any textbox and then it gets to be parsed normally.

Display Joomla System Messages through Engage Box

As long as you have Engage Box and Sourcerer then you are good to start this process.

The last thing we need to do before assigning the box is to configure its trigger settings and cookie settings to make sure that it is available always when it is needed.

As you can see in the screenshot above the most important settings are:

Trigger

Position: Center

Point: on Page Load

Cookie

After Close Stay Hidden: Never

4. Assign the box

The final step is to configure the box to show up when there are messages to be shown. To accomplish that Engage Box gives you the ability to assign a box once a block of code, or just a line in this situation, is evaluated as true.

So, click the Publishing Assignments Tab and scroll down until you see the Custom PHP assignment which you need to set to Include.

Once you click the Include button in that row, a small textfield will slide down in which you need to copy and paste the code below exactly as you see it.

return $app->getMessageQueue();

5. Custom CSS Settings

Finally, since we are displaying the system messages inside a box, we need to hide the system messages from appearing inside the template and on top of that add some beautifying CSS so that it doesn't show out of place.

You can add Custom CSS to any box by clicking the "Advanced" Tab. As you can see in the screenshot above apart from the Custom CSS which you can copy and paste from below, we have also added the Class Suffix "boxSM" so that we can target this specific box.

Of course you are free to tweak this CSS or create your own if you feel that it doesn't exactly fit your website's template or color palette.

Download a ready box and save time

With Engage Box's Import and Export Functionality you can skip all the configuration process! Steps 3 and 4 have been made ready so that you can save precious time. All you have to do is download the Joomla system messages box and import it through Engage Box by following the steps below.

Navigate to Engage Box and click the Import button on the dashboard.

Click the Browse button to search for the box you downloaded previously in your filesystem. You can leave the Publish items option to "As Exported".

Click Import and you are done!

Summarizing

On top of all the marketing aspects of Engage Box, it should be refreshing to see that it can be used for utilitarian purposes as well.

Providing feedback to your users with the visual cues you can achieve through Engage Box can create a pleasant user experience. A pleasant user experience results to returning users and returning users result to a dedicated user base. Who could say no to that?