How to embed a feedback form in my website or product - 26 June 2020

This is a practical guide showing you how you can embed a traggr feedback form in your website or product in a few simple steps.

Using an embeddable feedback form, you can collect feedback straight from your app or website. Combine with your feedback you manually tracked in traggr, you will have all your feedback in one single place - in traggr!

If you want to embed a feedback form in your react application, check out this blog post explaining in detail how to embed a feedback form in react applications.

Let’s jump in!

Activating the API

The API required to use the embeddable feedback form is disabled per default. So our first step is to enable the API. To do this, we navigate to our team management in traggr:

Navigate to team management

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

Integrations / Api Section

Important: You need to be the team administrator for the next step. Make sure to switch the option to Use Feedback Form to be embedded on Websites or Apps on:

Enabled Embeddable Feedback Form API

Note the Token and Verification - we will require these in the next step.

Embed the Feedback Form in your Website or App

Since we now activated the embeddable Feedback Form API, we can now embed the Feedback Form whereever we like. To do this, we just need to put the next like of code wherever we want our feedback form to be displayed:

<iframe src="https://app.traggr.com/embed/v1/feedbackform?token=[TOKEN]&verification=[VERIFICATION]&source=5&bg=%23ffffff" scrolling="no" height="310px" width="100%" style="border: none;" title="Feedback Form"></iframe>

Important: We need to replace the [TOKEN] and [VERIFICATION] placeholders in this line by our Token and Verification codes from the Activating the API step. If our Token is 123-456 and our Verification is 456-789, the line of code we embed is

<iframe src="https://app.traggr.com/embed/v1/feedbackform?token=123-456&verification=456-789&source=5&bg=%23ffffff" scrolling="no" height="310px" width="100%" style="border: none;" title="Feedback Form"></iframe>

And that’s it. We now have a feedback form embedded on our website or in our app:

Embedded Feedback Form

Note that the concrete implementation differs by the technology used for your website / application. If you want to embed a Feedback Form in your app, you might use an embedded WebView.

If you face questions when embedding your feedback form in your specific case, feel free to contact us and we will be happy to help you.

Customization (optional)

Of course, the look of the embeddable Feedback Form can be customized so you can further improve the visual integration in your Website or Product. There are the following options to adjust the look of the Feedback Form:

Background Color (bg): Use this option to set the background color for the feedback form in hex format (#FFFFFF):

&bg=%23D0CCD0

Button Color (bbg): Use this option to set the button’s color in hex format (#FFFFFF):

&bbg=%231C6E8C

Button Text Color (bc): Use this option to set the button’s text color in hex format (#FFFFFF):

&bc=%23FBFCFF

Note That the color code must be URL encoded, so the Hash mark becomes “%23”. If you wish to set the background color to black, set the following option in the iframe’s src:

&bg=%23000000

Our resulting customized Feedback Form with the following code

<iframe src="https://app.traggr.com/embed/v1/feedbackform?token=123-456&verification=456-789&source=5&bg=%23D0CCD0&bbg=%231C6E8C&bc=%23FBFCFF" scrolling="no" height="310px" width="100%" style="border: none;" title="Feedback Form"></iframe>

looks like this:

Customized embedded Feedback Form

Summary

In this article we explained how you can quickly embed a feedback form in your website or product using traggr.

If you have not yet signed up for traggr, start now for free, create your team and embed a customized 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.