Authorize your browser

The script tag names your project. It does not open the editor, nothing in your page's source ever could, or anyone who read the HTML could design your site.

What opens the editor is an approval you grant once, in one browser, for one site. It lives in that site's own local storage, and it is the only credential in the whole chain that gives anybody the right to edit.

Approving a browser

1. Open your site with ?pixy-connect on the end of its address, or type the address into Connect this browser on your project's Connect page, which opens it that way. A black Connect Pixy button sits at the bottom of the page. Click it.
2. A small window opens on Pixy. If you are not signed in it asks you to, nothing else, no mention of the site.
3. Signed in, and this is the project's first connect: the window connects and closes on its own. Nothing to press.

Every browser after the first names the site and the project and waits for you to press Connect. The first one doesn't need to: you clicked the button on your own site, signed in as the account that owns the project, and the window read the site's address from the browser rather than from anything typed. Once a project is connected its key is out in public HTML, and from then on a click is worth asking for.

The window closes and design mode opens on the page you came from, the connect is also your first session, so there is nothing left to press. From then on the page is your canvas: ⌘⇧E on any page of that site opens it, Esc leaves.

The button shows only when asked for

It is there only when the address carries ?pixy-connect. The approval drops the query from the address, so a reload or a copied link does not bring the button back. Nobody who visits your site ever sees that anything is there.

Every browser is approved the same way, the first and every one after it. Another person needs access to the project first (teams), then connects their own browser the same way.

Why a button, and not something automatic

Browsers only let a page open a window in response to a real click, so nothing on load can open the approval window by itself. The button exists to be that click, and clicking it grants nothing on its own: the approval happens in the Pixy window, signed in as the account that owns the project.

Which site you are approving

You never type the site's address into the approval window. The window asks your page who it is, and the browser stamps the true origin onto that exchange, the origin shown on the card, the origin the approval is bound to, and the origin it is sent back to are one string that nobody typed.

So the approval is exact. Approving https://acme.com does not approve https://staging.acme.com, and it does not approve http://localhost:3000. Each origin you design on is approved once, on its own.

Same for browsers: your laptop's Chrome and your phone's Safari are two approvals. Clearing that site's browser storage drops it, and you re-approve from ?pixy-connect.

How long it lasts

180 days, sliding, every session you open pushes it out again. A browser you stop designing on eventually lapses on its own.

To end them all at once, press Regenerate key on the project card. That revokes every approval on the project and disconnects any page currently open. It also issues a new project key, so the deployed tag needs replacing. Every browser then approves again from ?pixy-connect.

If it does not come up

• No button: the address needs ?pixy-connect on the end. Still none: the tag is not on the page. View source and check it against the snippet on your project's Connect page.
• The editor opened once and now stays dark: the approval was revoked (a regenerate, usually). The console says so. Connect again from ?pixy-connect.
• The window cannot tell which site is asking: it was opened on its own rather than from your site's button. Close it and click Connect Pixy again.
• "Not your project": the window is signed in as a different account than the one that owns the project.