On this page

Add Snaglist to your site and get your first report

For anyone who runs a website or app and wants people to report UX issues. At the end, every page has a 'Send feedback' button and your first report is in GitHub. It takes about 20 minutes.

Before you begin

  • You can change your site's files and publish them.
  • A GitHub repository for the reports, or an email address.
  • If you build with an AI assistant, it can do steps 2 to 5 for you: read Use an AI assistant to add Snaglist.

The steps at a glance

  1. Try Snaglist on the demo page
  2. Add it to your site
  3. Choose where reports go
  4. Name the parts of your pages and mark private ones
  5. Choose what reports record
  6. Give your users a switch
  7. Make your first report
flowchart TD
  accTitle: The steps at a glance
  accDescr: The steps in order: try Snaglist on the demo page; add it to your site; choose where reports go; name the parts of your pages and mark private ones; choose what reports record; give your users a switch; make your first report.
  A[Try the demo] --> B[Add it to your site]
  B --> C[Choose where reports go]
  C --> D[Name parts, mark private ones]
  D --> E[Choose what reports record]
  E --> F[Give users a switch]
  F --> G[Make your first report]

Step 1: try Snaglist on the demo page

Open the online demo and report something on the made-up app, to learn what your users will see: report one thing, record a series of steps, make a suggestion and check the page. You know it worked when What is sent shows your report.

Step 2: add it to your site

Download one file and add one line to your pages. The quickest way is the set-up tool, which writes the code for your choices. Or follow Add Snaglist to a website, or Add Snaglist to a React, Vue, Svelte or other framework app. You know it worked when Send feedback appears on your pages.

Step 3: choose where reports go

Pick GitHub, email or your own server: Send reports to GitHub, Send reports by email or Send reports to your own server.

Step 4: name the parts of your pages and mark private ones

Give main parts a data-component name and mark anything personal with data-snag-private. Follow Name the parts of your pages and Keep personal details out of reports.

Step 5: choose what reports record

The defaults suit most sites. To change them, follow Choose the report types, Choose what a report records and Choose the kinds of issue and how bad they can be.

Step 6: give your users a switch

Let people deactivate the button: Add a switch for your users.

Step 7: make your first report

Send real feedback on your own site: Report a problem with one thing on a page. You know it worked when the report is in your GitHub issues, inbox or server.

What next

This page on GitHub, where the help is written.