diff --git a/src/documentation/60.delivery-options.md b/src/documentation/60.delivery-options.md
index ebb87392..572bf785 100644
--- a/src/documentation/60.delivery-options.md
+++ b/src/documentation/60.delivery-options.md
@@ -10,45 +10,69 @@ This is the documentation for the stable version of the Delivery Options. If you
This is the MyParcel delivery options module for use in any e-commerce platform's checkout, by [MyParcel] and [SendMyParcel] customers. It's used to show your customers the possible delivery and/or pickup options for their location, based on your settings.
-## Getting started
+## Installation
First, you need to add the delivery options script to your page. You can do this using your favorite package manager or by including the script from the CDN in your HTML.
-### CDN
+- [Option 1: CDN](#option-1-cdn)
+- [Option 2: Install via package manager](#option-2-install-via-package-manager)
+
+### Option 1: CDN
This is the easiest way. Include Vue 3 and the `@myparcel/delivery-options` JavaScript and CSS from the CDN in your HTML.
```html
-
-
+
+
+ href="https://cdn.jsdelivr.net/npm/@myparcel/delivery-options@6/dist/style.css" />
```
-### Package manager
+Or, when there is already a different version of Vue on the page, you can use a compiled version of the delivery options that includes Vue. This way you can avoid conflicts between Vue versions.
+
+```html
+
+
+```
+
+::: tip
+Continue to [usage](#usage) to see how to initialize the delivery options.
+:::
+
+### Option 2: Install via package manager
Install the package using your favorite package manager.
-#### Plain JavaScript
+And include the script and CSS in your project.
```js
import '@myparcel/delivery-options/dist/myparcel.js';
import '@myparcel/delivery-options/dist/style.css';
```
-Add the wrapper div to your html:
+::: tip
+Continue to [usage](#usage) to see how to initialize the delivery options.
+:::
-```html
-
-```
+## Usage
+
+If you're using Vue 3, you can use the Vue component. If you're using plain JavaScript, you can use the plain JavaScript version.
+
+- [Vue 3](#usage-option-1-vue-3)
+- [Plain JavaScript](#usage-option-2-plain-javascript)
-#### Vue 3
+### Usage option 1: Vue 3
+
+When you're developing in an existing Vue 3 app, you can use the Vue component instead. This is the easiest way to use the delivery options. See the [configuration](#configuration) section for all possible options. You can use the [smallest possible configuration](#smallest-possible-configuration) as an example and/or starting point.
```vue
@@ -67,9 +94,78 @@ const configuration = ref(
```
+::: tip
+Continue to the [configuration](#configuration) section to see all possible options.
+:::
+
+### Usage option 2: Plain JavaScript
+
+Create a wrapper div in your html where you want the delivery options to appear.
+
+```html
+
+```
+
+Then, initialize the delivery options with your configuration. See the [configuration](#configuration) section for all possible options. For now, we will use the [smallest possible configuration](#smallest-possible-configuration) as an example.
+
+```js
+const configuration = {
+ // This is the default selector, you can change it to any CSS selector you want. Make sure it only selects one element.
+ selector: '#myparcel-delivery-options',
+ address: {
+ cc: 'NL',
+ postalCode: '2132JE',
+ number: '31',
+ street: 'Antareslaan 31',
+ city: 'Hoofddorp',
+ },
+ config: {
+ platform: 'myparcel',
+ carrierSettings: {
+ postnl: {},
+ },
+ },
+};
+
+document.dispatchEvent(
+ new CustomEvent('myparcel_update_delivery_options', {detail: configuration}),
+);
+```
+
+::: tip
+See the [configuration](#configuration) section to see all possible options.
+:::
+
+To retrieve the selected delivery options, you can listen for the `myparcel_updated_delivery_options` event.
+
+```js
+document.addEventListener('myparcel_updated_delivery_options', (event) => {
+ console.log(event.detail);
+});
+```
+
+When you change your selection in the rendered delivery options, the event will be fired with the new selection.
+Example output:
+
+```json lines
+{
+ "carrier": "postnl",
+ "date": "2024-04-10 00:00:00.000000",
+ "deliveryType": "morning",
+ "isPickup": false,
+ "packageType": "package",
+ "shipmentOptions": {
+ "signature": true,
+ "onlyRecipient": true
+ }
+}
+```
+
+This can then be used to update the shipping costs in your checkout.
+
## Configuration
-Almost all settings can be set globally or per carrier. If you set a setting globally, it will be used for all carriers unless you override it for a specific carrier.
+Almost all settings can be set globally or per carrier. If you set a setting globally, it will be used for all carriers unless you override it for a specific carrier. How you should pass the configuration to the delivery options depends on whether you're using the Vue component or plain JavaScript. See the [usage](#usage) section for more information.
::: tip
For the most comprehensive information, you can check out our [Sandbox]. Here you can see (and try) all the possible configuration options and see the result in real-time.
@@ -144,7 +240,7 @@ In this example the drop-off days are as follows:
| Wednesday | 15:00 (default) | 9:30 (default) |
| Friday | 14:00 | 9:30 (default) |
-### Smallest possible config
+### Smallest possible configuration
Most keys of the config are optional. The only required keys are:
@@ -178,10 +274,14 @@ All delivery types and options are enabled by default. This has the following re
-### Full reference
+### Full configuration reference
+
+These are all the possible configuration options. The `strings` object is used for translations. The `config` object is used for all other settings.
```json lines
{
+ // string, CSS selector for the element where the delivery options will be rendered. Optional, defaults to "#myparcel-delivery-options".
+ "selector": "#myparcel-delivery-options",
"address": {
// string, ISO 3166-1 alpha-2 country code
"cc": "NL",