diff --git a/docs/ng-schematics.md b/docs/integrations/ng-schematics.md
similarity index 84%
rename from docs/ng-schematics.md
rename to docs/integrations/ng-schematics.md
index af5f3b7183e..10fa36cff4c 100644
--- a/docs/ng-schematics.md
+++ b/docs/integrations/ng-schematics.md
@@ -143,13 +143,14 @@ The following table shows Puppeteer's equivalents to [Protractor By](https://www
 > For improved reliability and reduced flakiness try our
 > **Experimental** [Locators API](https://pptr.dev/guides/locators)
 
-| By                | Protractor code                                                   | Puppeteer querySelector                                      |
-| ----------------- | ----------------------------------------------------------------- | ------------------------------------------------------------ |
-| CSS               | Single: `$(by.css('<CSS>'))` <br> Multiple: `$$(by.css('<CSS>'))` | Single: `page.$('<CSS>')` <br> Multiple: `page.$$('<CSS>')`  |
-| Id                | `$(by.id('<ID>'))`                                                | `page.$('#<ID>')`                                            |
-| CssContainingText | `$(by.cssContainingText('<CSS>', '<TEXT>'))`                      | `page.$('<CSS> ::-p-text(<TEXT>)')` `                        |
-| DeepCss           | `$(by.deepCss('<CSS>'))`                                          | `page.$(':scope >>> <CSS>')`                                 |
-| XPath             | `$(by.xpath('<XPATH>'))`                                          | `page.$('::-p-xpath(<XPATH>)')`                              |
-| JS                | `$(by.js('document.querySelector("<CSS>")'))`                     | `page.evaluateHandle(() => document.querySelector('<CSS>'))` |
+| By                | Protractor code                               | Puppeteer querySelector                                      |
+| ----------------- | --------------------------------------------- | ------------------------------------------------------------ |
+| CSS (Single)      | `$(by.css('<CSS>'))`                          | `page.$('<CSS>')`                                            |
+| CSS (Multiple)    | `$$(by.css('<CSS>'))`                         | `page.$$('<CSS>')`                                           |
+| Id                | `$(by.id('<ID>'))`                            | `page.$('#<ID>')`                                            |
+| CssContainingText | `$(by.cssContainingText('<CSS>', '<TEXT>'))`  | `page.$('<CSS> ::-p-text(<TEXT>)')` `                        |
+| DeepCss           | `$(by.deepCss('<CSS>'))`                      | `page.$(':scope >>> <CSS>')`                                 |
+| XPath             | `$(by.xpath('<XPATH>'))`                      | `page.$('::-p-xpath(<XPATH>)')`                              |
+| JS                | `$(by.js('document.querySelector("<CSS>")'))` | `page.evaluateHandle(() => document.querySelector('<CSS>'))` |
 
 > For advanced use cases such as Protractor's `by.addLocator` you can check Puppeteer's [Custom selectors](https://pptr.dev/guides/query-selectors#custom-selectors).
diff --git a/packages/ng-schematics/README.md b/packages/ng-schematics/README.md
index af5f3b7183e..10fa36cff4c 100644
--- a/packages/ng-schematics/README.md
+++ b/packages/ng-schematics/README.md
@@ -143,13 +143,14 @@ The following table shows Puppeteer's equivalents to [Protractor By](https://www
 > For improved reliability and reduced flakiness try our
 > **Experimental** [Locators API](https://pptr.dev/guides/locators)
 
-| By                | Protractor code                                                   | Puppeteer querySelector                                      |
-| ----------------- | ----------------------------------------------------------------- | ------------------------------------------------------------ |
-| CSS               | Single: `$(by.css('<CSS>'))` <br> Multiple: `$$(by.css('<CSS>'))` | Single: `page.$('<CSS>')` <br> Multiple: `page.$$('<CSS>')`  |
-| Id                | `$(by.id('<ID>'))`                                                | `page.$('#<ID>')`                                            |
-| CssContainingText | `$(by.cssContainingText('<CSS>', '<TEXT>'))`                      | `page.$('<CSS> ::-p-text(<TEXT>)')` `                        |
-| DeepCss           | `$(by.deepCss('<CSS>'))`                                          | `page.$(':scope >>> <CSS>')`                                 |
-| XPath             | `$(by.xpath('<XPATH>'))`                                          | `page.$('::-p-xpath(<XPATH>)')`                              |
-| JS                | `$(by.js('document.querySelector("<CSS>")'))`                     | `page.evaluateHandle(() => document.querySelector('<CSS>'))` |
+| By                | Protractor code                               | Puppeteer querySelector                                      |
+| ----------------- | --------------------------------------------- | ------------------------------------------------------------ |
+| CSS (Single)      | `$(by.css('<CSS>'))`                          | `page.$('<CSS>')`                                            |
+| CSS (Multiple)    | `$$(by.css('<CSS>'))`                         | `page.$$('<CSS>')`                                           |
+| Id                | `$(by.id('<ID>'))`                            | `page.$('#<ID>')`                                            |
+| CssContainingText | `$(by.cssContainingText('<CSS>', '<TEXT>'))`  | `page.$('<CSS> ::-p-text(<TEXT>)')` `                        |
+| DeepCss           | `$(by.deepCss('<CSS>'))`                      | `page.$(':scope >>> <CSS>')`                                 |
+| XPath             | `$(by.xpath('<XPATH>'))`                      | `page.$('::-p-xpath(<XPATH>)')`                              |
+| JS                | `$(by.js('document.querySelector("<CSS>")'))` | `page.evaluateHandle(() => document.querySelector('<CSS>'))` |
 
 > For advanced use cases such as Protractor's `by.addLocator` you can check Puppeteer's [Custom selectors](https://pptr.dev/guides/query-selectors#custom-selectors).
diff --git a/tools/generate_docs.ts b/tools/generate_docs.ts
index ab3bdbedfe1..fedaf65d0b4 100644
--- a/tools/generate_docs.ts
+++ b/tools/generate_docs.ts
@@ -122,7 +122,7 @@ function spliceIntoSection(
     }
   )
     .inputs(['packages/ng-schematics/README.md'])
-    .outputs(['docs/ng-schematics.md'])
+    .outputs(['docs/integrations/ng-schematics.md'])
     .build();
 
   await Promise.all([copyMain, updateSupportedList, copyNgSchematics]);
diff --git a/website/sidebars.js b/website/sidebars.js
index 3ea29da24c4..b76cf61d7b6 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -22,7 +22,23 @@ module.exports = {
         'guides/debugging',
       ],
     },
-    'ng-schematics',
+    {
+      type: 'category',
+      label: 'Integrations',
+      link: {
+        type: 'generated-index',
+        title: 'Puppeteer Integrations',
+        keywords: ['integrations'],
+      },
+      collapsed: false,
+      items: [
+        {
+          type: 'doc',
+          label: 'Angular Schematics',
+          id: 'integrations/ng-schematics',
+        },
+      ],
+    },
     'chromium-support',
     'troubleshooting',
     'contributing',
diff --git a/website/versioned_docs/version-21.1.0/ng-schematics.md b/website/versioned_docs/version-21.1.0/ng-schematics.md
index da31c37db8d..4a0d7fb709e 100644
--- a/website/versioned_docs/version-21.1.0/ng-schematics.md
+++ b/website/versioned_docs/version-21.1.0/ng-schematics.md
@@ -146,13 +146,14 @@ The following table shows Puppeteer's equivalents to [Protractor By](https://www
 > For improved reliability and reduced flakiness try our
 > **Experimental** [Locators API](https://pptr.dev/guides/locators)
 
-| By                | Protractor code                                                   | Puppeteer querySelector                                      |
-| ----------------- | ----------------------------------------------------------------- | ------------------------------------------------------------ |
-| CSS               | Single: `$(by.css('<CSS>'))` <br> Multiple: `$$(by.css('<CSS>'))` | Single: `page.$('<CSS>')` <br> Multiple: `page.$$('<CSS>')`  |
-| Id                | `$(by.id('<ID>'))`                                                | `page.$('#<ID>')`                                            |
-| CssContainingText | `$(by.cssContainingText('<CSS>', '<TEXT>'))`                      | `page.$('<CSS> ::-p-text(<TEXT>)')` `                        |
-| DeepCss           | `$(by.deepCss('<CSS>'))`                                          | `page.$(':scope >>> <CSS>')`                                 |
-| XPath             | `$(by.xpath('<XPATH>'))`                                          | `page.$('::-p-xpath(<XPATH>)')`                              |
-| JS                | `$(by.js('document.querySelector("<CSS>")'))`                     | `page.evaluateHandle(() => document.querySelector('<CSS>'))` |
+| By                | Protractor code                               | Puppeteer querySelector                                      |
+| ----------------- | --------------------------------------------- | ------------------------------------------------------------ |
+| CSS (Single)      | `$(by.css('<CSS>'))`                          | `page.$('<CSS>')`                                            |
+| CSS (Multiple)    | `$$(by.css('<CSS>'))`                         | `page.$$('<CSS>')`                                           |
+| Id                | `$(by.id('<ID>'))`                            | `page.$('#<ID>')`                                            |
+| CssContainingText | `$(by.cssContainingText('<CSS>', '<TEXT>'))`  | `page.$('<CSS> ::-p-text(<TEXT>)')` `                        |
+| DeepCss           | `$(by.deepCss('<CSS>'))`                      | `page.$(':scope >>> <CSS>')`                                 |
+| XPath             | `$(by.xpath('<XPATH>'))`                      | `page.$('::-p-xpath(<XPATH>)')`                              |
+| JS                | `$(by.js('document.querySelector("<CSS>")'))` | `page.evaluateHandle(() => document.querySelector('<CSS>'))` |
 
 > For advanced use cases such as Protractor's `by.addLocator` you can check Puppeteer's [Custom selectors](https://pptr.dev/guides/query-selectors#custom-selectors).