Handling customer feedback using a support bubble form

Like most pieces of software, Flare contains bugs. We try to catch those via automated/manual testing, and static analysis. But sometimes, one of those pesky bugs makes it to production where it stays unnoticed, and waiting to make a jump on an unexpecting user.

When this happens, we want our users to have an easy route to report such a bug. Of course we hope mosts of customers send us a mail, describing the issue to us and some users do exactly this. But we feel that it's human nature that if you want to make someone do something, you have to make it as easy as possible for them.

That's why many websites display a small widget - often called a chat or support bubble - where users can quickly report a bug, ask a quick question if something is not clear or even make suggestions for new features.

Last week, we decided to add such a support bubble to Flare as well. As an added bonus, we decided to open-source it too. That way you can add it to your own Laravel projects as well. In this blog post I'd like to tell you all about it.

Using Flare's support bubble

When you log into Flare, you'll see the support bubble on the bottom right of every page. Click the bubble to open the support form that can be used to submit a bug report or a suggestion. It is as simple as that.

When a form is submitted a mail is sent to our Freshdesk where one of our team members will pick it up.

A package to display a support bubble

Flare isn't the only place where our team at Spatie wants to use a support bubble. That's why we've extracted our solution to a reusable package called spatie/laravel-support-bubble. You can make use of this package in your Laravel project too.

Using this package you can quickly add a chat bubble that opens a support form on any page. It comes with batteries included:

• TailwindCSS styling out of the box

• Won't ask user information if there's a logged in user

• Includes some meta data like URL and IP address

• Easily extendable using custom views, language files and event listeners

• Honeypot included and set-up to keep spammers at bay

The package can be installed in only a couple of minutes and we've built in quite some customisation options! Want to display your bubble using another color that Flare's beautiful purple? Just change a config value. Want to change or translate some labels? Publish the localisation files and start making changes. Want to customise the looks of the form even further? You can publish the views and components and make any changes you like.

When a form is submitted, we'll fire an event called Spatie\SupportBubble\Events\SupportBubbleSubmittedEvent that contains all submitted form values, the user's information, some request context and the entire Illuminate\Http\Request. Out of the box, the package uses this event to send a mail notification to the mail address you specify in the config file.

Alternatively, you can listen for that event in your own project and react to it in any way you like. You could store the values in the database, totally ignore it (we don't recommend this) or send the values to a third party help desk service.

In closing

To know more about how to install the package, and customising it, head over to the readme of spatie/laravel-support-bubble on GitHub.

In this stream on YouTube, Freek demonstrates how to use the package, and explains in great detail how it works under the hood.

If you see a bug on Flare, or want to make a feature request, fill in our support form. We're listening!