> ## 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.

# Build a Custom Link

> Learn how to use Drivly Connect with your customers.

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 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>;

In this guide, we'll follow an example scenario on how to use Drivly Connect with the
`VIN decode` to vehicle history.

<StoryBoard>
  In this scenaorio, a `carfax` account is already `connected`. Tony, Pepper, and their daughter
  Morgan want to fly from New York City to Atlanta. They’ll be leaving on 11th June and returning a
  week later on 18th June. Tony and his family prefer flying business class.
</StoryBoard>

***

<Steps>
  <Step title="Launch Drivly Connect">
    <HeroContent>
      <img class="block" src="https://mintcdn.com/chrisrisner/RWKuBzNyztB4Jver/images/connect/CloudLotsConnect.svg?fit=max&auto=format&n=RWKuBzNyztB4Jver&q=85&s=5f07fb74fee515efcd9c71831c2172e1" alt="Hero Dark" width="1728" height="800" data-path="images/connect/CloudLotsConnect.svg" />
    </HeroContent>

    In this scenaorio, a `carfax` account is already `connected`.
    Drivly Connect allows you to connect all your automotive providers in on place and can be managed from the Drivly dashboard.
  </Step>

  <Step title="Connect a Provider">
    <HeroContent withGrid>
      <img class="block" src="https://mintcdn.com/chrisrisner/RWKuBzNyztB4Jver/images/connect/CloudLotzDashboard.svg?fit=max&auto=format&n=RWKuBzNyztB4Jver&q=85&s=bd406c6eb2f1e3ea1b08a10451dada9f" alt="Hero Dark" width="1728" height="800" data-path="images/connect/CloudLotzDashboard.svg" />
    </HeroContent>

    * **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.
    * **Select a provider** from Drivly’s extensive list of integrations.
    * **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. See here for applicable cases.
  </Step>

  <Step title="Receive Data">
    <HeroContent withGrid>
      <img class="block" src="https://mintcdn.com/chrisrisner/RWKuBzNyztB4Jver/images/connect/VehicleHistoryThree.svg?fit=max&auto=format&n=RWKuBzNyztB4Jver&q=85&s=0752140cf06c57431645a6da5d1d325f" alt="Hero Dark" width="1728" height="1097" data-path="images/connect/VehicleHistoryThree.svg" />
    </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.
  </Step>
</Steps>
