Update README.md

README.md

@@ -1,28 +1,27 @@
-# Prepr Nextjs
+# The Prepr Next.js package
 
 ## Getting Started
 <hr>
-The Prepr NextJS package offers some helper functions and a PreviewBar component for an
-easier personalization & A/B testing implementation in your NextJS project.
+The Prepr Next.js package offers some helper functions and the Adaptive Preview Bar component for an
+easier personalization & A/B testing implementation in your Next.js project.
 
 ## Installation
 <hr>
-To install the Prepr NextJS package, run the following command:
+To install the Prepr Next.js package, run the following command:
 
 ```bash
 npm install @preprio/prepr-nextjs
 ```
 
-Next you should navigate to your `.env` file and add the following environment variable:
+Next, add the `PREPR_ENV` variable to the `.env` file. You can enable the *Adaptive Preview Bar* for a staging environment by setting the value to `preview`.
 
 ```bash
-PREPR_ENV=
+PREPR_ENV=preview
 ```
 
-If you want to include the PreviewBar component in your project, set the `PREPR_ENV` environment variable to `preview`. 
-When you're launching your project to production, then set the `PREPR_ENV` environment variable to `production`. This way, the PreviewBar component doesn't get displayed on a live web app.
+When you're launching your project to production, then set the `PREPR_ENV` environment variable to `production`. This way, the  *Adaptive Preview Bar* doesn't get displayed on a live web app.
 
-Next, we will implement the PreprMiddleware function. Navigate to your `middleware.js` or the `middleware.ts`
+Next, implement the `PreprMiddleware` function. Go to your `middleware.js` or the `middleware.ts`
 file. If you don't have this file, you can create it in the root of your project.
 
 Then add the following code to the `middleware.ts` file:
@@ -44,18 +43,17 @@ export function middleware(request) {
 }
 ```
 
-The PreprMiddleware accepts a request and optional response property and returns a `NextRequest` object. 
+### Middleware functionality
+The `PreprMiddleware` accepts a request and optional response property and returns a `NextRequest` object. 
 This is done so you are able to chain your own middleware to it.
 
-### Middleware functionality
-The PreprMiddleware function will check on every request if the `__prepr_uid` cookie is set. If it is not set it will generate a new UUID and set it as a cookie.
-Then it returns a `Prepr-Customer-Id` header with the value of the `__prepr_uid` cookie. This makes for easy personalization & A/B testing implementation.
+The `PreprMiddleware` function checks every request if the `__prepr_uid` cookie is set. If it isn't, the function generates a new UUID and sets it as a cookie. Then it returns a `Prepr-Customer-Id` header with the value of the `__prepr_uid` cookie to simplify your personalization and A/B testing implementation.
 
-If the `PREPR_ENV` environment variable is set to `preview`, the PreprMiddleware function will also check for searchParams `segments` and `a-b-testing` in the URL.
-If these searchParams are set, the PreprMiddleware will set the `Prepr-Segments` and `Prepr-AB-Testing` headers with the values of the searchParams, and store its value in a cookie.
+If the `PREPR_ENV` environment variable is set to `preview`, the `PreprMiddleware` function also checks for searchParams `segments` and `a-b-testing` in the URL.
+If these searchParams are set, the PreprMiddleware sets the `Prepr-Segments` and `Prepr-AB-Testing` headers with the values of the searchParams, and stores its value in a cookie.
 
 ## Usage
-To set up the headers with your API calls, you can call the `getPreprHeaders()` helper function. This will return an array of headers that you can spread in your fetch call.
+To set your API request headers to query adaptive content or A/B testing content, you can call the `getPreprHeaders()` helper function. It returns an array of headers that you can spread in your fetch call.
 See the example code below in the `page.tsx` file. 
 
 ```javascript
@@ -78,7 +76,7 @@ const getData = async () => {
     })
 }
 ```
-See the javascript example code below in the `page.js`file.
+See the JavaScript example code below in the `page.js`file.
 
 ```javascript
 import { getClient } from '@/lib/client'
@@ -102,17 +100,24 @@ const getData = async () => {
 }
 ```
 
-### Installing the PreviewBar component
+### Installing the Adaptive Preview Bar component
+
+The preview bar component fetches all segments from the Prepr API. So, you need to give it access to do this as follows:
+
+1. In your Prepr environment, go to the  **Settings → Access tokens** page to view all the access tokens.
+2. Click the **Add access token** button to create a new access token, give it a name and choose the segments scope like in the image below.
+
+![Segments access token](https://assets-site.prepr.io//2mcoy87hhmfz-segments-access-token.png)
+
+3. Click the **Save** button and copy the generated *Access token*.
 
-For the PreviewBar to work we need to fetch all the segments from the Prepr API. To do this navigate to Prepr -> Settings -> Access tokens and create a new access token with the following scopes:
-- `segments`
+4. Add a new variable `PREPR_SEGMENTS_ACCESS_TOKEN` to the `.env` file and paste the value you just copied.
 
-Then copy the access token and navigate to your `.env` file and add the following environment variable:
 ```bash
-PREPR_SEGMENTS_ACCESS_TOKEN=<YOUR_ACCESS_TOKEN>
+PREPR_SEGMENTS_ACCESS_TOKEN=<YOUR-SEGMENTS-ACCESS-TOKEN>
 ```
 
-Next we will implement the PreviewBar component, navigate to your root layout file, this is usually `layout.tsx`.
+To implement the *Adaptive Preview Bar* component, navigate to your root layout file, this is usually `layout.tsx`.
 
 Then add the following code to the `layout.tsx` file:
 
@@ -144,8 +149,8 @@ export default async function RootLayout({children}: {children: React.ReactNode}
 }
 ```
 
-Now the PreviewBar component will be rendered on every page of your website. The PreviewBar component will show the segments and A/B testing variants in a dropdown. If you have added the `getPreprHeaders()` function 
-to your API calls it should automatically update the segments and A/B testing variants when you select a new one in the PreviewBar component.
+Now the *Adaptive Preview Bar* is rendered on every page of your website. This component shows the segments in a dropdown list and a switch for A and B variants for an A/B test.  If you have added the `getPreprHeaders()` function 
+to your API calls it automatically updates the segments and A/B testing variants when you select a new segment or variant.
 
 ### Helper functions