FeaturePeek Snippet for Netlify

If you already deploy your frontend on Netlify, you can take advantage of FeaturePeek's JavaScript snippet to add more functionality to your Netlify Deploy Previews.

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 </body> tag:

<script async defer
data-repo="example/repo"
data-id="01234567-89ab-cdef-0123-456789a"
src="//unpkg.com/@featurepeek/snippet.js"
></script>

Netlify snippet injection

Before you click the Save button, there are two data- attributes you need to fill in:

data-repo

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 example/repo.

data-id

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.

Netlify API ID

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.

Integrations

You'll want to at least connect to Netlify.

FeaturePeek also supports the following integrations for bug reporting and ticketing:

  • Clubhouse
  • GitHub Issues
  • Monday.com
  • Trello

TODO: Create Airtable form that collects feedback on what integration they'd like next.

FAQ

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 None.

Learn more about deploy contexts in the Netlify docs.