docs: Add setup step 3 to the toolbar (#12181)

* docs: Add setup step 3 to the toolbar * link to Settings>Projects picker
getsentry · Dec 18, 2024 · c71af08 · c71af08
1 parent 1930c2a
commit c71af08
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/docs/product/dev-toolbar/img/sentry-project-settings-toolbar.png b/docs/product/dev-toolbar/img/sentry-project-settings-toolbar.png
diff --git a/docs/product/dev-toolbar/img/sentry-toolbar-settings.png b/docs/product/dev-toolbar/img/sentry-toolbar-settings.png
diff --git a/docs/product/dev-toolbar/index.mdx b/docs/product/dev-toolbar/index.mdx
@@ -40,10 +40,7 @@ After setting up the Dev Toolbar you’ll see a “Login to Sentry” button flo
 After clicking the button, you will see a pop-up window for logging in to Sentry.
 ![Sentry log in pop up](./img/login-popup.png)
 
-If it's your first time setting up the Dev Toolbar, there will be a button with a link to Sentry's Dev Toolbar settings page to configure your domain.
+If it's your first time [setting up the Dev Toolbar](/product/dev-toolbar/setup) , there will be a button with a link to Sentry's Dev Toolbar settings page to configure your domain.
 ![Dev Toolbar configure domains button](./img/configure-domain.png)
 
-You'll need to add your domain URL to Allowed Origins in Sentry on the **Settings > Project > Dev Toolbar** page.
-![Sentry's Dev Toolbar Settings Page](./img/sentry-toolbar-settings.png)
-
 Learn more about setting up the toolbar, including configuring a feature flag provider and integrating the toolbar in different environments, on the next page.
diff --git a/docs/product/dev-toolbar/setup.mdx b/docs/product/dev-toolbar/setup.mdx
@@ -22,7 +22,7 @@ You need to complete two steps to get the toolbar rendered on the page:
     ```
     It is recommended that you add the script tag at the bottom of the page so it doesn’t block other critical JavaScript.
 
-2. Call `window.SentryToolbar.init(initConfig)` to set up a toolbar instance on each page where you want to see the Dev Toolbar.
+2. Call `window.SentryToolbar.init(initConfig)` to set up a toolbar instance on each page where you want to see the Dev Toolbar. Take care to also [conditionally load the toolbar in your production environment](#deploying-to-production-environments).
     ```html
     <html>
     <head>...</head>
@@ -36,6 +36,10 @@ You need to complete two steps to get the toolbar rendered on the page:
     </html>
     ```
 
+3. Edit [Project Settings](https://sentry.io/orgredirect/organizations/:orgslug/settings/projects/) in Sentry so the Toolbar is allowed to connect from your dev, staging, and production domains.
+  ![Sentry's Dev Toolbar Settings Page](./img/sentry-project-settings-toolbar.png)
+
+
 ### Unmounting The Toolbar
 
 If you have called `SentryToolbar.init({...})` to render the toolbar, but now want to manually remove or unmount it from the page, you can call the cleanup function that is returned from `init()`. This will unmount all the injected HTML and CSS. Login credentials will not be removed, so you can re-insert the toolbar and still be authenticated.