First Vercel native documentation draft (#1212)

* First Vercel native documentation draft

* Update site/content/docs/CICD/vercel-managing-users-and-plan.md

Co-authored-by: Michelle Liebheit <[email protected]>

* addressing comments

* Addressing comments

* update screenshots, fix outdated info

---------

Co-authored-by: Michelle Liebheit <[email protected]>

Author: drakirnosslin

site/assets/docs/images/cicd/vercel/vercel_deployment.png

@@ -0,0 +1,27 @@
+---
+title: Managing Users and Plans with Vercel - Checkly Docs
+displayTitle: Managing Users and Plans with Vercel
+navTitle: Managing Users and Plans with Vercel
+weight: 2
+menu:
+  integrations:
+    parent: "Integrating Vercel with Checkly - Checkly Docs"
+    identifier: vercel-managing-users-and-plans
+
+---
+
+The Vercel-[Checkly native integration](https://vercel.com/integrations/checkly) moves the user and plan management of your Checkly account to Vercel. You have access to the same Hobby and Team plan as when subscribing directly on Checkly, but the management process is different. If you are new to Vercel's native integrations you can read more about them [here](https://vercel.com/docs/integrations#native-integrations).
+
+### User management
+If you are using the Vercel native integration, your Checkly users will be managed through Vercel. Members of your Vercel team can all access Checkly up to the seat limit on your selected plan. See our [pricing page](https://www.checklyhq.com/pricing/) for details on the number of seats available on your plan.
+
+To add a new user to your Checkly account they need to be a member of your Vercel team. The user then only needs to click `Open in Checkly` to be added to your Checkly account.
+
+### Usage and billing
+You can view and adjust your selected plan from the integration product page in Vercel. Go to the [your Checkly account billing page](https://app.checklyhq.com/settings/account/billing) and click `Visit Vercel`, select the installed product, then select `Settings`. Under `Change configuration` you can change your current plan, or change the number of pre-purchased check runs on a team plan subscription.
+
+You can always view your recent usage under the `Usage` tab, found below `Settings` in the sidebar.
+
+Checkly invoices will be sent to our Vercel account, and can be viewed under `Settings` and `Invoices` in Vercel.
+
+If you have an active subscription to a paid plan, you cannot delete your integration before you have downgraded your plan to a free one. This is to ensure that you have control over your installation and can utilize features and capabilities you have paid for until the end of the subscription. If you need to delete the integration earlier, contact [[email protected]](mailto:[email protected]) for assistance.

site/assets/docs/images/cicd/vercel/vercel_deployment_settings.png

@@ -12,58 +12,50 @@ aliases:
   - "/docs/integrations/vercel/"
 ---
 
-If you are using Vercel to develop, preview, and ship your application, you can natively integrate with Checkly by [installing the official integration](https://vercel.com/integrations/checkly) from the Vercel Marketplace.
+If you are using Vercel to develop, preview, and ship your application, you can natively integrate with Checkly by installing [the official integration](https://vercel.com/integrations/checkly) from the Vercel Marketplace. 
 
-The Vercel integration will help you by:
-
-1. Automatically creating a pre-scripted browser check to catch any errors and failed requests as your web page loads.
-2. Enabling you to run checks against preview and production deployments on Vercel.
+Checkly offers two integrations for Vercel users:
+- Native integration, **for managing your Checkly account and users**. With the native integration, user access and billing is managed through Vercel. If you are new to Vercel's native integrations you can read more about them on the [Vercel documentation page](https://vercel.com/docs/integrations#native-integrations).
+- Connected integration, **to monitor your preview and production deployments**. The connected integration can be installed stand-alone or on top of the native integration and helps you by:
+  -  Automatically creating a pre-scripted browser check to catch any errors and failed requests as your web page loads.
+  -  Enabling you to run checks against preview and production deployments on Vercel.
 
 > Using Vercel deployment protection? Read [this section](/docs/cicd/vercel-deployment-protection/) on how to make this work with Checkly.
 
-## Installation
-
-To install Checkly's native Vercel integration, navigate to `Integrations`, under your account's dropdown menu.
-
-![vercel integration step 1](/docs/images/cicd/vercel/vercel_step1a.png)
-
-After scrolling down, click the `Vercel marketplace` button.
+## Installing the native integration
 
-![vercel integration step 2](/docs/images/cicd/vercel/vercel_step2.png)
+To install Checkly's managed Vercel integration, navigate to the [integration's marketplace listing](https://vercel.com/integrations/checkly) and click `Install`.
 
-On the marketplace page for Checkly, click `Add Integration`.
+1. Select `Create new account` in the installation guide and click `Next` to accept the terms and conditions.
+2. Select your plan type. You can read about our pricing plans [here](https://www.checklyhq.com/pricing/), and more about how we bill checks [here](/docs/monitoring/check-pricing/).
+3. Name your account and review your plan selection. You can change your account name later.
+4. Press `Create` to continue to the integration settings page. Select `Getting started` to go to the setup guide in Vercel. You can also click `Open in Checkly` to go through the Checkly + Vercel onboarding and get you started with an example project showcasing how to use Monitoring as Code together with Vercel. You can find the [example NextJS project on GitHub](https://github.com/checkly/nextjs-checkly-starter-template) which includes a guide on how to use Monitoring as Code with a NextJS project.
 
-![vercel integration step 3](/docs/images/cicd/vercel/vercel_step3.png)
+## Installing the connected integration
 
-Next, follow the installation wizard to grant the integration access to the right Vercel scope and projects.
+1. To install Checkly's connected Vercel integration, navigate to [Integrations](https://app.checklyhq.com/settings/account/integrations), under your account's dropdown menu and click the `Vercel marketplace` button, or go directly to the [integration listing on the Vercel marketplace](https://vercel.com/integrations/checkly).
 
-![vercel integration step 4](/docs/images/cicd/vercel/vercel_step4.png)
+2. On the marketplace page for Checkly, click `Connect Account`.
 
-You can choose to map your Vercel projects to existing checks on your Checkly account, to have them run on production and/or preview deployments.
+3. Next, follow the installation wizard to grant the integration access to the right Vercel scope and projects.
 
-![vercel integration step 5](/docs/images/cicd/vercel/vercel_step5.png)
+4. You can choose to map your Vercel projects to existing checks on your Checkly account, to have them run on production and/or preview deployments.
 
-Additionally, you can have new checks automatically generated for existing Vercel projects, and set them up to automatically run on preview and/or production deployments.
+5. Additionally, you can have new checks automatically generated for existing Vercel projects, and set them up to automatically run on preview and/or production deployments.
 
-![vercel integration step 6](/docs/images/cicd/vercel/vercel_step6.png)
+## Managing the connected integration
 
-## Linking checks and groups
+If you already have the connected Vercel integration set up, you might still want to connect new checks or groups. The procedure is the same for both: edit the check or group and select `Vercel` in the `Testing` tab, then select `Link Vercel project` and the project you want to link.
 
-If you already have the Vercel integration set up, you might still want to connect new checks or groups. The procedure is the same for both: edit the check or group and select `Link Vercel project` in the `CI/CD triggers` tab.
-
-![linking existing check](/docs/images/cicd/vercel/vercel_existing.png)
-
-You will just need to select the right project to link to your check or group.
-
-![vercel project selection](/docs/images/cicd/vercel/vercel_link.png)
+![linking existing check](/docs/images/cicd/vercel/vercel_linking_project.png)
 
 Once the project and the check/group have been linked, you are able to specify whether a new preview or production deployment should trigger a new execution. You will also have the chance to choose from which location this check will run.
 
-![linked check](/docs/images/cicd/vercel/vercel_linked.png)
+![deployment trigger settings](/docs/images/cicd/vercel/vercel_deployment_settings.png)
 
 Should you wish to unlink the Vercel project, simply click `Unlink this project`.
 
-## Targeting Preview deployments with `ENVIRONMENT_URL` and `ENVIRONMENT_NAME`
+### Targeting Preview deployments with `ENVIRONMENT_URL` and `ENVIRONMENT_NAME`
 
 On each deployment triggered by Vercel, we inject the Checkly runtime with two variables:
 
@@ -125,9 +117,9 @@ Notice we only replace the host part, not the URL path or any query parameters.
 
 Just like for browser checks, the check will run on deploy against our preview environment, while also still running on a schedule against production.
 
-## How Checkly checks maps to Vercel checks
+### How Checkly checks maps to Vercel checks
 
-Vercel recently released their [Checks functionality](https://vercel.com/docs/concepts/deployments/checks) and Checkly integrates deeply into this new API.
+Checkly integrates deeply with the Vercel [Checks functionality](https://vercel.com/docs/concepts/deployments/checks) API to link Checks in both tools.
 Vercel uses a slightly different way in representing checks than Checkly does, specifically splitting individual check results into either:
 
 1. **Reliability checks**
@@ -141,19 +133,14 @@ This is how a Checkly check maps to a Vercel check:
 
 * *Web Vitals are only recorded for [Playwright-based Browser checks](/docs/browser-checks/tracing-web-vitals/#performance-tracing-with-web-vitals)*
 
-## Blocking Vercel deployments
-
-You can block your Vercel deployments if any of your checks fail by enabling the checkboxes highlighted in the
-screenshot below. 
+### Blocking Vercel deployments
 
-![blocking deployments](/docs/images/cicd/vercel/vercel_block.png)
-
-We have two flavours here...
+You can block your Vercel deployments if any of your checks fail or if the web vitals degrade:
 
 1. **Block my deployment when a check fails** does what it says on the tin and only applies to Vercel **Reliability checks**.
 2. **Block my deployment when Web Vitals degrade** is a bit special and only applies to Vercel **Performance checks** for our Browser checks. 
 
-This table below should help you determine how blocking checks works. Note — again — that **Browser checks**, can fail a 
+This table will help you determine how blocking checks works. Note — again — that **Browser checks**, can fail a 
 Vercel deployment in two ways because the Reliability part and Performance part are evaluated separately.
 
 | Checkly       | Vercel            | Blocking heuristic                                                                                                                                   |
@@ -165,11 +152,9 @@ Vercel deployment in two ways because the Reliability part and Performance part
 
 > Reliability and performance checks run against the [automatic deployment URL](https://vercel.com/docs/concepts/deployments/automatic-urls) Vercel generates. In case of failures or degradations, what _actually_ gets blocked is the deployment to all other URLs, e.g. branch URLs and user-assigned domains.
 
-## Virtual Experience Score & Web Vitals
-
-Together with the team at Vercel, we developed the **Virtual Experience Score** (VES) that gives you one simple KPI to track. 
+### Virtual Experience Score & Web Vitals
 
-![blocking deployments](/docs/images/cicd/vercel/vercel_ves.png)
+Together with the team at Vercel, we developed the **Virtual Experience Score** (VES) that gives you one simple KPI to track.
 
 The Virtual Experience Score does three things:
 
@@ -194,30 +179,18 @@ So, what does this mean for the blocking heuristics? It means that we will mark
 
 For more info on the **Virtual Experience Score** [check the documentation on the Vercel site](https://vercel.com/docs/concepts/analytics/web-vitals#virtual-experience-score).
 
-## Skipping Performance checks
+### Skipping Performance checks
 
 In some cases, Checkly will completely skip performance checks. You will see the "skipped" status in your Vercel deployment overview.
 Checkly skips performance checks when the domain of the visited URL in the script does not match the domain of the **deployment URL**. In 9 out of 10 cases this should be the URL for your Preview and Production deployments.
 
 
-## Vercel-linked check results 
+### Vercel-linked test session results
 
-When selecting a check which is linked to a Vercel project, any results triggered by a deployment on that project will show at the bottom of the check page, under the tab `CI/CD triggered check results`.
+Any results triggered by a deployment can be viewed on the test sessions page in Checkly. Runs triggered by the Vercel integration have the Vercel logo next to the user name.
 
-![cicd triggered check results tab](/docs/images/cicd/vercel/vercel_result.png)
+![cicd triggered check results tab](/docs/images/cicd/vercel/vercel_test_sessions.png)
 
 On Vercel, you will also see a breakdown of checks that were executed on a given deployment, together with a breakdown of various key web vitals.
 
-![vercel checks vitals](/docs/images/cicd/vercel/vercel_vitals.png)
-
-> Web vitals are available for Playwright-based browser checks using [runtime](/docs/runtimes/) 2021.06 or newer.
-
-### Deployments tab
-
-The Deployments tab lists all deployments on linked projects, including Vercel-based ones, together with the check executions they triggered.
-
-![deployments tab overview](/docs/images/cicd/vercel/vercel_deployments.png)
-
-Selecting a deployment enables you to quickly determine whether it caused any check failures, and to drill into the relevant information in case it did.
-
-![deployment detail](/docs/images/cicd/vercel/vercel_deployment.png)
+![vercel checks vitals](/docs/images/cicd/vercel/vercel_vitals.png)