> ## Documentation Index
> Fetch the complete documentation index at: https://docs.drivly.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Connecting Providers

> Learn how to use Drivly Connect.

export const StoryBoard = ({children}) => <div class="p-6 bg-gray-100/50 dark:bg-gray-800/25 rounded">
    <p class="text-base py-2 leading-6">{children}</p>
  </div>;

export const CustomInfo = ({children}) => <div class="my-4 px-5 py-4 overflow-hidden rounded-xl border border-zinc-500/20 bg-zinc-50/50 dark:border-zinc-500/30 dark:bg-zinc-500/10">
    <div class="flex items-start space-x-3">
      <div class="mt-0.5 w-4">
        <svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="flex-none w-5 h-5 text-zinc-400 dark:text-zinc-300" aria-label="CustomInfo">
          <path d="M8 0C3.58125 0 0 3.58125 0 8C0 12.4187 3.58125 16 8 16C12.4187 16 16 12.4187 16 8C16 3.58125 12.4187 0 8 0ZM8 14.5C4.41563 14.5 1.5 11.5841 1.5 8C1.5 4.41594 4.41563 1.5 8 1.5C11.5844 1.5 14.5 4.41594 14.5 8C14.5 11.5841 11.5844 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.3375 8.41563 7 8 7H7C6.5875 7 6.25 7.3375 6.25 7.75C6.25 8.1625 6.5875 8.5 7 8.5H7.25V10.5H6.75C6.3375 10.5 6 10.8375 6 11.25C6 11.6625 6.3375 12 6.75 12H9.25C9.66406 12 10 11.6641 10 11.25C10 10.8359 9.66563 10.5 9.25 10.5ZM8 6C8.55219 6 9 5.55219 9 5C9 4.44781 8.55219 4 8 4C7.44781 4 7 4.44687 7 5C7 5.55313 7.44687 6 8 6Z"></path>
        </svg>
      </div>
      <div class="flex-1 text-sm prose text-wrap text-zinc-900 dark:text-zinc-200">{children}</div>
    </div>
  </div>;

export const HeroContent = ({children, withGrid}) => <div>
    <div class="not-prose relative bg-gray-50/50 rounded-xl overflow-hidden dark:bg-gray-800/25">
      {withGrid && <div class="absolute grid content-center inset-0 bg-grid-neutral-200/20 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:bg-grid-white/5 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]" style={{
  backgroundPosition: '10px 10px',
  color: '#070712'
}}></div>}
      <div class="relative rounded-xl overflow-hidden flex justify-center">{children}</div>
      <div class="absolute inset-0 pointer-events-none border border-black/5 rounded-xl dark:border-white/5"></div>
    </div>
  </div>;

<Frame type="glass">
  <img src="https://mintcdn.com/chrisrisner/RWKuBzNyztB4Jver/images/connect/Hiw.png?fit=max&auto=format&n=RWKuBzNyztB4Jver&q=85&s=7f5f72036fa1675f7dcb01e2ed912830" width="3456" height="1862" data-path="images/connect/Hiw.png" />
</Frame>

Before you can get started with this guide, you'll need to [sign up](https://www.driv.ly/signup/) for a Drivly account – it takes about 1 minute!

Once you have an account, launch Drivly Connect – you'll be asked to agree to our privacy terms and permissions.

* **Read privacy disclosures** - Drivly Connect discloses data privacy practices right from the start, so you know where and how your data will be used.
* **Confirm permissions** - Drivly Connect displays the granular permissions needed to access the requested data. Drivly only shares and syncs data that has been approved.
* **Authenticate access** - Drivly Connect prompts your customer to enter their credentials and grant you access to requested data. Drivly Connect will only succeed if the user grants Drivly’s systems access, if applicable.

Users simply enter the login credentials associated with their accounts. Before you can make API requests to Drivly, you will need to link your service providers. It’s a simple 3-step process:

1. Select a data or service provider
2. Sign in
3. Give consent

***

## Connecting Providers

In this guide, we'll follow an example scenario on how to use Connect to get comprehensive details about a vehicles condition and history.

<StoryBoard>
  Chris purchased a 2022 Hyundai `KMHL24JJ5NA045583` ... explain the issues he faced with damage
  disclosures and between CarFax and AutoCheck and how Drivly's `VIN Decode API` solves this problem
  head on.
</StoryBoard>

To complete this scenario, we'll be:

1. Showing you how to use Connect with a Drivly API
2. Connecting vehicle history data providers: [Carfax](/connect/providers/carfax) and [AutoCheck](/connect/providers/autocheck)
3. Etc ...

<Steps>
  <Step title="Select a data or service provider">
    <HeroContent withGrid>
      <img class="block" src="https://mintcdn.com/chrisrisner/RWKuBzNyztB4Jver/images/connect/VehicleHistoryOne.png?fit=max&auto=format&n=RWKuBzNyztB4Jver&q=85&s=ad67466ed3e241d95e215564857a5b44" alt="Hero Dark" width="1728" height="1097" data-path="images/connect/VehicleHistoryOne.png" />
    </HeroContent>

    In this scenaorio, Chris already has a `Carfax` account connected.
    Explain with Carfax gives him and what's next...

    ```json theme={null}
    "lastOdometer": 93153,
      "estimatedOdometer": 93153,
      "salvage": false,
      "totalLoss": false,
      "lastTitleState": "FL",
      "vehicleHistory": [
        "clean",
      ],
    ```
  </Step>

  <Step title="Enter your account credentials">
    <HeroContent withGrid>
      <img class="block" src="https://mintcdn.com/chrisrisner/RWKuBzNyztB4Jver/images/connect/VehicleHistoryTwo.png?fit=max&auto=format&n=RWKuBzNyztB4Jver&q=85&s=44a7031104e04a6ec940aba8ce0c45a1" alt="Hero Dark" width="3456" height="2194" data-path="images/connect/VehicleHistoryTwo.png" />
    </HeroContent>

    Chris selects [AutoCheck](/connect/providers/autocheck) from the [provider list](/connect/integrations) and prompts him to enter his credentials for CloudLots. This will grant Drivly access to requested data from AutoCheck so Chris can use the `Enhanced VIN Decode API`.

    <CustomInfo>
      Drivly Connect will only succeed if the user grants Drivly’s systems access, if applicable.
    </CustomInfo>

    <br />
  </Step>

  <Step title="Receive Data">
    <HeroContent withGrid>
      <img class="block" src="https://mintcdn.com/chrisrisner/RWKuBzNyztB4Jver/images/connect/VehicleHistoryThree.png?fit=max&auto=format&n=RWKuBzNyztB4Jver&q=85&s=815a932533cb5b1f1285f2f001e93c44" alt="Hero Dark" width="3456" height="2194" data-path="images/connect/VehicleHistoryThree.png" />
    </HeroContent>

    That's it! Upon successful authentication, you will be redirected back to your application.

    Once the connection is established, you will receive a Drivly access token and can call the Drivly API platform.

    Below you can see an example response from Drivly's `Enhanced VIN Decode API`:

    ```json theme={null}
    "lastOdometer": 93153,
      "estimatedOdometer": 93153,
      "salvage": true,
      "totalLoss": false,
      "lastTitleState": "FL",
      "priceHistory": [
        [
          "2023-06-07",
          36999
        ],
        [
          "2023-06-07",
          36499
        ]
      ],
      "confidence": 0.99,
      "vehicleHistory": "1-damage"

    ```
  </Step>
</Steps>
