Update docs

docs/.vitepress/config.js

@@ -24,7 +24,7 @@ export default {
       level: [0, 0]
     },
     lineNumbers: false,
-    theme: 'css-variables'
+    theme: 'light-plus'
   },
 
   themeConfig: {

docs/external-integration/widgets.md

@@ -3,13 +3,27 @@
 PERSCOM.io offers powerful widgets that allow the integration of your organizational data into another website for display. Each widget is a
 snippet of HTML that can be injected into your website.
 
+![Widget Preview](https://raw.githubusercontent.com/DeschutesDesignGroupLLC/perscom-docs/master/resources/widget-preview.png)
+
 ## Prerequisites
 
 <!-- prettier-ignore -->
 ::: warning
 You must be [subscribed](https://docs.perscom.io/pricing) to the `Pro` plan to use this feature.
 :::
 
+## Trying It Out
+
+If you'd like to try the widgets out before using them on your website, you can preview every widget at
+[https://widget.perscom.io/](https://widget.perscom.io/). Please note, you must be subscribed to the `Pro` plan to use this feature. Please
+have an API key and your PERSCOM ID ready to log in. You can read more about how to access these in the
+[Authentication and Authorization](#authentication-and-authorization) section.
+
+<!-- prettier-ignore -->
+::: tip 
+For demonstration purposes, you can select all available scopes for the API key you will use to preview the widgets. 
+:::
+
 ## Choosing The Widget
 
 Each widget uses the same HTML code snippet to display the data. However, to set which widget you would like outputted, you must set the
@@ -105,16 +119,6 @@ the code snippet for it to take affect.
 </div>
 ```
 
-## Externally Accessing The Widget
-
-The PERSCOM.io widget can be accessed outside of the HTML code snippet that you used to post within your website. To see your widget live,
-without embedding it in a website, you can visit the URL's below. The `widgetId` corresponds with the [ID](#choosing-the-widget) of the
-widget you intend to view. Make sure to set `apiKey` and `perscomId` to the correct values.
-
-```html
-https://widget.perscom.io/{widgetId}?apikey={apiKey}&perscomid={perscomId}
-```
-
 ## Development
 
 The PERSCOM.io Widget project is **open source** and actively looking for developers to participate. If you have experience with frontend

docs/external-integration/widgets/calendar.md

@@ -28,7 +28,7 @@ Below is an example HTML code snippet that will output your calendar.
 
 The following is an example of the calendar widget being displayed within the PERSCOM.io application.
 
-![Widget Calendar Preview](https://perscom-cdn.s3.amazonaws.com/images/calendar-preview-1.png)
+![Calendar Preview](https://raw.githubusercontent.com/DeschutesDesignGroupLLC/perscom-docs/master/resources/calendar-preview.png)
 
 ## Scopes
 

docs/external-integration/widgets/forms.md

@@ -56,9 +56,9 @@ Below is an example HTML code snippet that will output your forms.
 
 The following is an example of the forms widget being displayed within the PERSCOM.io application.
 
-![Widget Forms Preview](https://perscom-cdn.s3.amazonaws.com/images/forms-preview-1.png)
+![Form Overview Preview](https://raw.githubusercontent.com/DeschutesDesignGroupLLC/perscom-docs/master/resources/form-preview.png)
 
-![Widget Forms Form Preview](https://perscom-cdn.s3.amazonaws.com/images/forms-preview-2.png)
+![Form Preview](https://raw.githubusercontent.com/DeschutesDesignGroupLLC/perscom-docs/master/resources/form-preview-1.png)
 
 ## Scopes
 

docs/external-integration/widgets/roster.md

@@ -28,9 +28,9 @@ Below is an example HTML code snippet that will output your roster.
 
 The following is an example of the roster widget being displayed within the PERSCOM.io application.
 
-![Widget Roster Preview](https://perscom-cdn.s3.amazonaws.com/images/roster-preview-1.png)
+![Roster Preview](https://raw.githubusercontent.com/DeschutesDesignGroupLLC/perscom-docs/master/resources/roster-preview.png)
 
-![Widget Roster User Preview](https://perscom-cdn.s3.amazonaws.com/images/roster-preview-2.png)
+![Roster User Preview](https://raw.githubusercontent.com/DeschutesDesignGroupLLC/perscom-docs/master/resources/roster-preview-1.png)
 
 ## Scopes