Feedback Widget
The feedback widget lets people on your team point at parts of your website and ask Amp to change
them. You add one script tag to the site. Then you open the site with ?amp, sign in with Amp,
select elements on the page, and write a comment for each one. When you send the comments, Amp
starts a thread in your project, and the agent makes the change in an orb.
Set Up the Widget
You need permission to change the project’s settings. See Permissions.
- Open the project settings and choose the Feedback Widget tab.
- Click Enable. Amp creates a Sign in with Amp app for the project, and the tab shows a Script Tag.
- Copy the script tag and add it to the HTML of your site, e.g., in the
<head>of every page. Then deploy the site. - Under Allowed Origins, enter the address of your site and click Add Origin.
The script tag looks like this. The part after /w/ is the client ID of the project’s app:
<script src="https://ampcode.com/w/client_01J….js" async></script> The site needs nothing else. It does not need server code or its own sign-in, and the script does not contain the project name.
If your site sends a Content-Security-Policy header, allow https://ampcode.com in script-src and in frame-src. The widget loads from that address, and it shows the Amp panel in a frame.
Allowed Origins
The widget works only on the origins in this list. An origin is the scheme, host, and port of a
site, e.g., https://www.example.com. Amp keeps only the origin of the address you enter, so https://www.example.com/pricing adds https://www.example.com.
- An origin must use
https://. For local development,http://localhost,http://127.0.0.1, andhttp://[::1]with any port are also allowed. - Add each site separately, e.g., your production site and your staging site.
- On a site that is not in the list, the Amp panel does not open. Amp also refuses comments made on pages that are not in the list.
Each origin in the list has a button that opens the site with ?amp, so you can check the widget
right away. Click the remove button next to an origin to remove it.
Workspace Organization
When you enable the widget, Amp makes your workspace an organization for Sign in with Amp, if it is not one already. Creating a workspace application does the same. The workspace stays an organization after you turn the widget off. People who are members of more than one such workspace may be asked to choose a workspace when they sign in to Amp.
Send Feedback
- Open a page of your site with
?ampat the end of the address, e.g.,https://www.example.com/pricing?amp. The widget button appears in a corner of the page. - Click the widget button, then click an element on the page. Write what you want changed and click Add, or press Enter.
- To comment on more elements, click New Comment. Your comments can be on different pages of the same site, and the widget keeps them until you send them.
- Click Send. The Amp panel opens on the page.
- The first time, click Continue with Amp. Sign in with Amp in the window that opens, and
approve the consent screen for the project’s app. The app has the name of the project, e.g.,
acme/website. - Check your comments and click Start in Orb.
Amp starts a new thread in the project with the title Website: <host>, e.g., Website: www.example.com. Click Open Thread to follow it in Amp. The thread is yours, as if
you had started it in Amp. The agent gets each comment with the selected element and the address
of its page. It works in an orb with a copy of the repository, not on the live site, so ship the
change from the thread as usual. See Shipping Changes.
Show or Hide the Widget
The widget is hidden until someone opens a page of the site with ?amp. After that, the browser
remembers the choice for that site, and the widget shows on every page without ?amp.
- To hide the widget, press Cmd+. on macOS or Ctrl+. on other systems. You can also right-click the widget button, or touch and hold it, and choose Hide Review Button.
- To show it again, press the same keys, or open a page with
?amp. On a touch device, tap three times quickly where the button was.
The script loads for every visitor of the site. The widget stays hidden for them, but anyone who presses the keys can show the button. Only people who can start threads in the project can send comments. If you do not want the script on your public site, add it only to your staging site.
Permissions
- Set up and change the widget. Enabling the widget, changing the allowed origins, and turning it off take the same permission as changing the project’s settings: the project’s creator or a workspace admin.
- Send comments. Anyone who can start threads in the project can send comments. In a workspace project, that is every member of the workspace. Other people who sign in see Access Required, and they cannot send.
Each person who signs in gives the project’s app access to their Amp account. The app appears in your Security settings under Authorized Apps. Revoke it there, and the widget stops working for you at once. The next time you send, you sign in again.
Turn Off the Widget
To take the widget off one site, remove the script tag from that site.
To turn the widget off for the whole project, click Turn Off on the Feedback Widget tab. Amp deletes the project’s Sign in with Amp app:
- The script tag stops loading the widget on every site.
- Everyone who signed in loses access, and nobody can send comments from the widget.
- The allowed origins stay in the list.
If you click Enable again later, Amp creates a new app with a new client ID. Replace the old script tag on your site with the new one.
Use the CLI or Ask Amp
You can do the same steps with the Amp CLI. Each command takes the project ID or its namespace/name, and needs the same permission as the Feedback Widget tab.
amp projects feedback-widget get acme/website
amp projects feedback-widget enable acme/website
amp projects feedback-widget add-origin acme/website https://www.example.com
amp projects feedback-widget remove-origin acme/website https://www.example.com
amp projects feedback-widget disable acme/website --yes You can also ask Amp, e.g., “Turn on the feedback widget for acme/website and give me the script tag.” Before Amp adds an allowed origin, it asks you to approve the origin in a dialog. Before it turns the widget off, it asks you to confirm.
Limits
- Only workspace projects can use the widget. Personal projects cannot.
- Each send starts a new thread. You cannot send comments to a thread that you started earlier.
- The agent works in an orb, not on the live site, so it cannot see the live site’s data.
- You add allowed origins by hand.
- The Amp panel opens only when every page around it is on an allowed origin. If another site shows your site in a frame, the panel does not open there.