How to add a feedback form to a React Web App to collect user feedback - 03 August 2020

In this practical guide we will add a feedback form to a React app to collect user feedback in our react app using traggr Feedback Management.

Using an embedded feedback form in your React web application allows you to collect feedback at specific locations in your app where you want to get feedback from your users and customers.

For this how-to guide, we assume you already signed up for traggr and created a team. If you did not yet sign up, go ahead and sign up now. It’s a matter of seconds and it is free!

Just head over to the following link and create your account and team:

Sign up now for free

Since you are ready now, let’s jump in!

Our base React application

For this tutorial, we will be using a simple standard React starter application with Bootstrap 4 already included. Bootstrap is not necessary for traggr and you can also apply the following to your specific React app. We are just using Bootstrap for some simple UI components.

In our case, we want to show our user a feedback form when they click a button on the main page of the app.

Here’s the full application so you can see how it works.

Click the Give feedback button and provide some user feedback.

Let’s break down what we did here.

Adding the necessary UI

First, we added the necessary UI components to display a feedback form. Our intent here was to show a modal dialog when users click the Give feedback button so our users can provide their feedback in a separate modal dialog.

Have a look at the React render method here. That’s where we added the regular Bootstrap modal together with the button Give feedback that triggers this modal.

As you can see in the code, we added an iframe to the modal body (content) coming from app.traggr.com. This is actually displaying our feedback form.

Creating and customizing the feedback form

To add your individual feedback form here that allows your users to provide you feedback, sign into traggr and navigate to the team management.

Important: You need to be the team administrator for the next step.

Navigate to team management

Scrolling down the page, we discover our Integrations / API section:

Integrations / Api Section

The first step is to design our feedback form, we therefore click the button Create embeddable Feedback Form. This brings us to the embeddable feedback form designer:

Feedback Form Designer

If you not already activated the API to use embeddable feedback forms in traggr, this form warns you that you first need to enable this API. We do this by clicking the Activate now link. The API is now activated.

Now we can customize our Feedback Form appearance however we like and make it fit well to our React app appearance.

In our case, we choose different colors fitting well to our React app:

Customized Feedback Form in Visual Designer

Finally, we copy our Code to embed the feedback form that is displayed below our designed form and pasete it in the modal body in our React app.

Note that you can create as many different feedback forms as you like. Their configuration is persisted in the displayed Code so you can create another Feedback Form whenever you like by coming back to the generator.

Basically, we are done now already embedding our feedback form! :)

But since we are displaying our feedback form in a modal dialog in our app, we want to close this modal whenever the user submitted his feedback. traggr emits an event in this case we can listen for so we can hide the modal dialog in this case.

Have a look at the handleMessage(event) method in HelloWorldHtml.jsx. It will be called whenever a message event is received. This is caused by the event listener registered in the React lifecycle hook componentDidMount().

Whenever an event is received, we check in the handleMessage(event) callback if this particular event is from the feedback form (identified by the data.category === “tfeedbackform”) and its action is feedbacksubmitted with a positive result.

If that’s the case, we initiate a timer that closes the modal after 2 seconds so the user will see the success message from the feedback form and after two seconds, the feedback form modal will automatically close.

Try it out

That’s it! Try our our cool React app with embedded Feedback Form:

Summary

In this article you learnt how you can easily embed a customized feedback form in your React application to collect user and customer feedback.

If you have not yet signed up for traggr, start now for free, create your team and embed your feedback form in minutes!

Start using traggr now for free

or

Learn more about traggr

If you need any assistance, do not hesitate and contact us.