Get up and running quickly with We Delivered It.

Getting Started


## What is We Delivered It?

**We Delivered It** is a powerful proof of delivery app designed to streamline the delivery process for businesses of all
sizes. With this app, businesses can easily track the delivery of their products in real-time, allowing them to ensure
that each package arrives at its destination on time and in good condition.

> The **We Delivered It** app is for internal use only. It is not intended for use by your customers.

**We Delivered It** is a user-friendly and efficient tool that enables drivers to capture signatures, take photos of packages,
and record delivery times and locations.

In today's fast-paced world, customers expect prompt and accurate delivery of their orders. By using **We Delivered It**,
businesses can meet these expectations and provide their customers with a seamless delivery experience. This app not
only improves the efficiency of the delivery process, but it also helps businesses maintain customer satisfaction and loyalty.

## Who is We Delivered It for?

**We Delivered It** is designed for businesses that deliver products to their customers. This includes businesses that ship
products to their customers, such as online retailers, as well as businesses that deliver products to their customers,
such as building supply companies.

Overall, **We Delivered It** is a valuable tool for any business that wants to optimize its delivery process and improve
customer satisfaction. Whether you're a small business owner or a large corporation, this app has the features and
functionality to meet your delivery needs.



This is a brief introduction to the We Delivered It app and how it can help your business.

Introduction


## Sign Up

First step is to [sign up](http://www.wedeliveredit.com/pricing) for a plan. Choose the plan that suits your needs and get started.
You can choose to sign up with an email and password or with a Gmail account. Once you have signed up, you will be taken to a simple
onboarding page where you can add team name. This can be your company name or any other name you want to use to identify your team.
You can change the name anytime from the settings page.

> Please note that the free version of **We Delivered It** is limited to 1 user and 3 active deliveries at a time.
> If you need more users or deliveries, please [upgrade](http://www.wedeliveredit.com/pricing) to a paid plan.

## Profile & Team Settings
To edit your profile and team settings, click on the **Settings** on the menu on the left. The first tab displayed will be your personal profile.
Here you can set yopur name and profile picture. You can also change how you sign in, your email address and your password from here.

Select the Team tab to edit your team settings. You can change your team name, logo and add an address, email address and contact name.
This team name, address, email and contact name will be printed on the proof of delivery pdfs.

> Please note that the logo image will be cropped to a square and sized to a maximum of 200px x 200px.

## Add Team Members

If you are on a paid plan, you can invite team members to join your team. You can add as many team members as you want, however,
if you go over the limit of your plan, you will be charged for the extra users.

To invite a new user, click **Settings** on the menu on the left, then click **Team** tab, and then click **Members**.
Then click **Invite Members** button.
Enter the email address of the user you want to invite and select the role you want to assign to the user.
You can assign the following roles: ```Owner```, ```Admin```, ```Member``` and ```Driver```.
You can create multiple invites at once by clicking **+ Add another one**. Once you are finished, click the **Create Invites** button.

The new invites will be displayed in the **Pending Invites** section. You can copy the invite link by click the copy button and send it to the user you want to invite.
See the image below for an example. You can also delete the invite by clicking the **X** button. Once an invite has been accepted,
it will be moved to the **Members** section.

><Image src="/assets/images/help-images/copy-invite-link-4.png" alt="copy invite" width={1002} height={337} className={'rounded-lg'}/>
Any existing members will be displayed in the members section.
Clicking the three dots to the right of the member name will display a menu with the following options: ```Change Role```, ```Transfer Ownership``` and ```Remove```.

## Add Vehicles

You can add vehicles to your team. Vehicles are used to assign deliveries to. You can add as many vehicles as you want.
You must be logged in as an owner or admin to add or edit vehicles.

Click on vehicles on the menu on the left and then click **New Vehicle** at the top of the page. Fill in the vehicle name and description.
When you are done, click **Create Vehicle**.

To edit a vehicle, click on the vehicle name on the vehicles page to expand it. Then click the **View/Edit** button.
You can change the name, description, and add an image. Once you have made the changes, click the **Update Vehicle** button.

> Please note that vehicle images are cropped to a square and sized to a maximum of 200px x 200px.

## Start Adding Deliveries

Once you have added at least one vehicle, you can start adding deliveries. Click on the **Deliveries** on the menu on the left.
Then click **New Delivery** at the top of the page. Fill in the delivery details and click **Create Delivery**. The minimum information required is
the order #/name, vehicle and the date. You can optionally add a customer name, an address, a description, and a delivery time slot.

> Please note that if you do not enter a delivery address, you will not be able to use the location distance or popup map features.

Deliveries are listed grouped by date. You can expand a delivery to view the details by clicking the delivery name.
Complete deliveries will have a grey checkmark and pending deliveries will have an amber exclamation mark. See image below.

><Image src="/assets/images/help-images/delivery-status-1.png" alt="delivery status image" width={250} height={226} className={'rounded-lg'}/>

When a delivery is marked as complete, the **PDF** button will be visible. Clicking the **PDF** button will generate a proof of delivery pdf and
automatically download it. You can email this to the customer if needed.

When a delivery is marked as complete, it can be archived. Archived deliveries are not displayed in the deliveries list, but can still be
viewed by searching the archive. To archive a delivery, expand the delivery and click the **Archive Toggle**. See image below.

><Image src="/assets/images/help-images/archive-toggle.png" alt="delivery preview image" width={1234} height={344} className={'rounded-lg'}/>

Click the **View/Edit** button to edit the delivery. When editing a delivery, you can change the order #/name, customer name, address, description,
delivery time slot, vehicle, and the delivery status. Once you are done, click **Update Delivery**. once a signature has been added to a delivery, and saved,
it is locked an cannot be changed again. The same applies for the two photos.

If you are logged in as a driver, you can only add a signature, enter who signed it and edit the description. You can also add photos of the delivery

Click the trash bin button to delete the delivery.

## Team Messages

Team messages are a great way to keep your team informed about any important updates. For example, reminding them of procedures or
letting them know when certain vehicles or drivers are not available. You can add team messages from the team messages page.
You must be an owner or admin to add or edit team messages. Messages are displayed on the dashboard for all users.

> Please note that team messages are not included in the free version of **We Delivered It**.
> If you need this feature, please [upgrade](http://www.wedeliveredit.com/pricing) to a paid plan.

To add a team message, click on the **Team Messages** on the menu on the left and then click **New Message** at the top of the page.
Fill in the title, message and select the importance of the message. Once you are done, click **Create Message**.

To edit a message, click on the message title on the messages page to expand it. Then click the **View/Edit** button.
You can change the title, message, importance, and add an image. Once you have made the changes, click the **Update Message** button.

> Please note that message images are cropped to a square and sized to a maximum of 200px x 200px.

## Dashboard

The dashboard is the first page you will see when you log in. It displays the total deliveries, pending deliveries and any active team messages.
There are also buttons to add a new delivery and view deliveries. If logged in as a driver, the **New Delivery** button will not be available.


This short guide will help you get up and running quickly with We Delivered It. We will be adding new content to this guide regularly, so check back often.

More advanced topics on getting the most out of We Delivered It.

Advanced


## Install as App in Chrome

Installing **We Delivered It** as a Progressive Web App (PWA) on Chrome has several benefits. Firstly, PWAs are faster
and more responsive than traditional websites because they use modern web technologies to cache resources and data,
reducing load times. Additionally, PWAs can be installed directly onto your device, giving users the feel of a native app
without requiring them to visit an app store. Finally, PWAs use less data than traditional apps, making them a great option
for users in areas with limited internet access.

1. Open Google Chrome on your computer.
2. Go to the **We Delivered It** website.
3. Wait for the page to load completely.
4. Click on the three-dot menu icon in the top right-hand corner of your browser.
5. Click on "**Install We Delivered It**" from the dropdown menu.
6. A pop-up window will appear. Click on "Install" to continue.
7. The PWA will then begin to download and install. It may take a few seconds or minutes depending on the size of the app.
8. Once the installation is complete, you'll be able to access the PWA directly from your computer's home screen or launchpad (depending on your computer's operating system).
9. You can then start using the **We Delivered It** app as you would any other native app on your computer.

> Note: The above instruction apply to both Windows and Mac computers.

> Note: If you're using Chrome on an Android device, you can install by tapping on the "Add to Home screen" option in the browser menu.





Step-by-step guide on how to install as an app on Chrome.

Install as App on Chrome


## Install as App on IOS

Installing **We Delivered It** as a Progressive Web App (PWA) on IOS has several benefits. Firstly, PWAs are faster
and more responsive than traditional websites because they use modern web technologies to cache resources and data,
reducing load times. Additionally, PWAs can be installed directly onto your device, giving users the feel of a native app
without requiring them to visit an app store. Finally, PWAs use less data than traditional apps, making them a great option
for users in areas with limited internet access.

1. Open Safari on your iOS device.
2. Go to the **We Delivered It** website.
3. Wait for the page to load completely.
4. Tap the Share icon in Safari (the square with an upward arrow at the bottom of the screen).
5. Scroll down on the Share sheet that pops up and tap the "Add to Home Screen" button.
6. You can customize the name by editing the text in the field provided, then tap "Add" in the top-right corner of the screen.
7. After tapping "Add", you'll be taken back to your iOS home screen. Look for the newly added **We Delivered It** icon.
8. Tap the new icon to open the **We Delivered It**.
9. **We Delivered It** will now open in full screen, without any Safari UI. Additionally, it will now be available on your home screen just like any other app.

That's it! You've now successfully installed **We Delivered It** on your iOS device.





Step-by-step guide on how to install as an app on IOS devices.

Install as App on IOS

All about Clara Software, the makers of We Delivered It.

About


Clara Software is devoted to creating simple, useful and affordable web applications that solve real problems for small businesses. We design our own software, with a focus on making things simple and accessible for all users, even those who would describe themselves as "non-techy".

We specialize in high-quality custom web apps. We build secure, scalable, and user-friendly products that are designed to increase your productivity and drive your business forward.

Based in Vancouver BC Canada. We started 25 years ago with Visual Basic and MS Access.
We now use the latest web development tools and services.

[//]: # (- [React]&#40;https://reactjs.org&#41; `JavaScript library`)

[//]: # (- [Next.js]&#40;https://nextjs.org&#41; `React Javascript framework`)

[//]: # (- [Tailwindcss]&#40;https://tailwindcss.com&#41; `CSS framework`)

[//]: # (- [Prismic]&#40;https://prismic.io&#41; `Headless CMS`)

[//]: # (- [Python]&#40;https://www.python.org&#41; `Programming language`)

[//]: # (- [Supabase]&#40;https://supabase.com&#41; `Database, authentification and more...`)

[//]: # (- [Firebase]&#40;https://firebase.google.com&#41; `Database, hosting, cloud functions and more...`)

[//]: # (- [Vercel]&#40;https://vercel.com&#41; `Hosting, cloud functions`)

[//]: # (- [Webstorm]&#40;https://www.jetbrains.com/webstorm&#41; `IDE`)

[//]: # (- [VS Code]&#40;https://code.visualstudio.com&#41; `IDE`)

[//]: # (- [Userbase]&#40;https://userbase.com&#41; `Database`)

[//]: # (- [Github]&#40;https://github.com&#41; `Code repository, source control`)

[//]: # 'Thank you for taking the time to read. If you have any questions or want to see more from me, please '

[Follow us on Twitter](https://twitter.com/dermotf)


Clara Software is devoted to creating simple, useful and affordable web applications that solve real problems for small businesses.

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    h2: "h2",
    a: "a",
    span: "span",
    p: "p",
    strong: "strong",
    ol: "ol",
    li: "li",
    blockquote: "blockquote"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.h2, {
      id: "install-as-app-in-chrome",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#install-as-app-in-chrome",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Install as App in Chrome"]
    }), "\n", _jsxs(_components.p, {
      children: ["Installing ", _jsx(_components.strong, {
        children: "We Delivered It"
      }), " as a Progressive Web App (PWA) on Chrome has several benefits. Firstly, PWAs are faster\nand more responsive than traditional websites because they use modern web technologies to cache resources and data,\nreducing load times. Additionally, PWAs can be installed directly onto your device, giving users the feel of a native app\nwithout requiring them to visit an app store. Finally, PWAs use less data than traditional apps, making them a great option\nfor users in areas with limited internet access."]
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Open Google Chrome on your computer."
      }), "\n", _jsxs(_components.li, {
        children: ["Go to the ", _jsx(_components.strong, {
          children: "We Delivered It"
        }), " website."]
      }), "\n", _jsx(_components.li, {
        children: "Wait for the page to load completely."
      }), "\n", _jsx(_components.li, {
        children: "Click on the three-dot menu icon in the top right-hand corner of your browser."
      }), "\n", _jsxs(_components.li, {
        children: ["Click on \"", _jsx(_components.strong, {
          children: "Install We Delivered It"
        }), "\" from the dropdown menu."]
      }), "\n", _jsx(_components.li, {
        children: "A pop-up window will appear. Click on \"Install\" to continue."
      }), "\n", _jsx(_components.li, {
        children: "The PWA will then begin to download and install. It may take a few seconds or minutes depending on the size of the app."
      }), "\n", _jsx(_components.li, {
        children: "Once the installation is complete, you'll be able to access the PWA directly from your computer's home screen or launchpad (depending on your computer's operating system)."
      }), "\n", _jsxs(_components.li, {
        children: ["You can then start using the ", _jsx(_components.strong, {
          children: "We Delivered It"
        }), " app as you would any other native app on your computer."]
      }), "\n"]
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Note: The above instruction apply to both Windows and Mac computers."
      }), "\n"]
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Note: If you're using Chrome on an Android device, you can install by tapping on the \"Add to Home screen\" option in the browser menu."
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Getting Started

Advanced

About

Install as App on Chrome

Step-by-step guide on how to install as an app on Chrome.

Install as App in Chrome

Table of Contents