[WEB-4688] Add PostHog feedback integration to Footer
Summary
- Added PostHog feedback survey integration to the Footer component
- Implemented feedback form submission that sends data to PostHog surveys
- Added environment variable configuration for PostHog feedback survey name
Changes
Configuration
- Added
POSTHOG_FEEDBACK_SURVEY_NAMEenvironment variable - Updated Gatsby config to expose the survey name through site metadata
- Wrapped app with
PostHogProviderin gatsby-browser.tsx
Footer Component
- Integrated PostHog's survey functionality using
usePostHoghook - Added state management for feedback text, submission status, and survey data
- Implemented survey fetching and feedback submission handlers
- Added success message display after submission
- Connected textarea and button to PostHog submission flow
Implementation Details
The implementation follows the same pattern as the website repo's Feedback component in HeaderButtons.tsx, ensuring consistency across projects.
When a user:
- Clicks Yes/No/Feedback buttons
- Optionally enters feedback text
- Clicks "Send feedback"
The feedback is submitted to PostHog under the configured survey name with the appropriate response data.
Testing
To test this PR:
- Set
POSTHOG_FEEDBACK_SURVEY_NAMEenvironment variable to match a survey created in PostHog - Ensure
POSTHOG_API_KEYandPOSTHOG_API_HOSTare configured - Navigate to any docs page
- Use the feedback form in the footer
- Verify submissions appear in PostHog
🤖 Generated with Claude Code
[!IMPORTANT]
Review skipped
Auto reviews are disabled on this repository.
Please check the settings in the CodeRabbit UI or the
.coderabbit.yamlfile in this repository. To trigger a single review, invoke the@coderabbitai reviewcommand.You can disable this status message by setting the
reviews.review_statustofalsein the CodeRabbit configuration file.
✨ Finishing touches
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
- [ ] Commit unit tests in branch
web-4688-footer
Comment @coderabbitai help to get the list of available commands and usage tips.
Woops @aralovelace you shouldn't see the feedback unit - it's supposed to be hidden in this PR as the wider purpose of it is still undecided. I toggled it on to take a screenshot and accidentally committed it. Updated that now.
As for the "Edit on Github" bit, it's situational, you'll only get it on the (I guess you could call them) standard docs pages like this. You won't get it on the homepage for instance as we don't want to invite people to edit that on Github. There could be a "last updated" field as well, but that data isn't actually available anywhere atm.
As for the wideness, it's a good point - this is part of some Jamie W feedback as well and will be addressed once all these base pieces are in place.