The snippet itself loads a very tiny loader script (less than 200 bytes!) which only activates in the Deploy Preview context (specifically, when
location.origin starts with
deploy-preview-). Since the script becomes a no-op in production, it's safe to include the script globally across all your environments.
This document assumes that you already have a frontend hosted on Netlify. If you haven't done that yet, you should follow Netlify's tutorial first — you'll want to deploy with git.
Use FeaturePeek on your Netlify Deploy Previews with these four steps!
1. Install GitHub App on repo
Install the FeaturePeek GitHub App on the frontend repo that you deploy to Netlify. This will grant permission for pull request comments to be loaded in the FeaturePeek drawer on the Deploy Preview.
TODO: Should we link to the marketplace page instead? Looks more legit and robust. Are the user flow / code paths the exact same between the two methods?
2. Inject snippet in Netlify site settings
In your Netlify dashboard, select your site and go to its settings page. Under the Snippet injection section, paste this snippet before the closing
Before you click the Save button, there are two
data- attributes you need to fill in:
This is the full slug of your GitHub repo. If your repo's URL is
https://github.com/example/repo, then the value you would use would be
This is the API ID of your Netlify site, found in your site's settings under Site information. Supplying this identifier will allow FeaturePeek to load relevant data from Netlify, like your deployment's build logs and asset optimization configuration.
You can learn more about Snippet Injection in the Netlify docs.
3. Visit one of your Deploy Previews
The next time you open a pull request (or if you have any that are currently open), scroll down to the bottom of the PR where Netlify reports its statuses.
Click on the Details link next to the Deploy Preview status.
4. Create a FeaturePeek account and connect to integrations
Et voila! At this point, you should be able to see the FeaturePeek drawer loaded in the lower left-hand corner of your web app.
You'll want to at least connect to Netlify.
FeaturePeek also supports the following integrations for bug reporting and ticketing:
- GitHub Issues
TODO: Create Airtable form that collects feedback on what integration they'd like next.
How do I enable Deploy Previews on Netlify?
Netlify Deploy Previews should be enabled by default. If they've become disabled, you can re-enable them by making sure that Deploy previews under the Deploy contexts section of your site's settings is not set to
Learn more about deploy contexts in the Netlify docs.