Add Formbricks Product-Market-Fit widget

[mattinannt]

Changes proposed ✍️

Replace the Typeform Product-Market-Fit-Survey widget with the Formbricks Pmf widget as discussed with Jonathan.

The condition for displaying the banner has been set as follows:

• formbricks PMF environment variables must be set
• the user created their account after 01.01.2023
• The user has been registered for at least 4 weeks
• The user hasn't closed the banner yet.

You will need to set the following environment variables

VUE_APP_FORMBRICKS_URL=https://app.formbricks.com
VUE_APP_FORMBRICKS_PMF_FORM_ID=<YOUR_FORM_ID>

The Formbricks cloud has moved from xm.formbricks.com to app.formbricks.com. Please create a new account to use the PMF feature.

Todo:

• Add a check to the Formbricks backend to see if the user has already submitted a pmf survey and hide the banner/widget from them.
• The formbricksPmf.init() is called when showPmfSurvey is changed. To wait for the rerender to be completed, a setTimeout is used. This can be solved better (but is beyond my vue.js skills 😉)

[joanreyero]

Thanks a lot for the contribution! 😊

A couple of files need changes for the deployment to pick up the new environment variable.

• frontend/scripts/docker-entrypoint.sh: Add "VUE_APP_FORMBRICKS_PMF_FORM_ID" to line 30
• frontend/src/config.js: Add pmfFormId: 'CROWD_VUE_APP_FORMBRICKS_PMF_FORM_ID' to line 91

Otherwise, it looks great! 🔥

[mattinannt]

@joanreyero thanks for reviewing 🤗
I just updated the config and entrypoint as suggested and also use the updated formbricks package version.