Adding the DataVault Connect button manually

If you can't or don't want to use the script method, you can manually add the DataVault Connect button to your site. by following the steps below:

Build the authorization url

You'll need to have a page on your site or app where you will use a TARTLE DataVault Connect button to start the flow. This is not an actual <button> element, but a link (<a>) styled as a button, with a url that you will construct using your client details.

Constructing the authorization url

const authorizationUrl = new URL(
  `/oauth/authorize?${new URLSearchParams({
    client_id,
    response_type: 'code',
    redirect_uri,
    code_challenge,
    code_challenge_method: 'S256',
    scope: 'push_packet',
    state,
  })}`,
  'https://source.tartle.co',
)
  • Name
    client_id
    Type
    string
    Description

    Your app's unique identifier. You received when you created the client and you can find it in your developer settings.

  • Name
    response_type
    Type
    string
    Description

    This is a standard OAuth 2.0 parameter, always set it to code.

  • Name
    redirect_uri
    Type
    string
    Description

    The URL where TARTLE will send the user after authorization. Must exactly match the redirect URI registered with your application, refer to the developer settings for the exact value.

  • Name
    code_challenge
    Type
    string
    Description

    A Base64 encoded SHA256 hash of your PKCE code verifier used to prevent authorization code interception attacks. For more information on how to generate and use this value, see the Security Guide.

  • Name
    code_challenge_method
    Type
    string
    Description

    This is a standard OAuth 2.0 parameter, always set it to S256.

  • Name
    scope
    Type
    string
    Description

    Set to 'push_packet'. We currently only support access to write to the packets associated with your OAuth application.

  • Name
    state
    Type
    string
    Description

    A random string used to prevent CSRF attacks. For the best practices when generating this value, see the Security Guide.

Add the button to your site

Using the authorization url you just built, you will then add the DataVault Connect button, which is a styled link (<a>).

In order to adhere to our design guidelines please use the following html and css:

Button html

<a
  className="tartle-datavault-button"
  href={authorizationUrl}
  target="_blank"
  rel="noopener noreferrer"
>
  <div className="logo-container">
    <svg
      viewBox="0 0 35 40"
      fill="none"
      className="logo-cube"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs id="defs1" />
      <path
        d="M 17.162176,39.288721 34.3247,29.6706 34.2922,9.87187 17.1292,0 0,9.9281 0.032495,29.7268 17.162176,39.288721 17.204142,35.299053 3.77803,27.556 3.75303,12.0864 17.1367,4.33042 l 13.41,7.71228 0.025,15.4695 -13.367558,7.786853 z"
        fill="currentColor"
        id="path1"
      />
      <g id="layer1">
        <path
          d="M 30.5467,12.0427 17.1367,4.33042 3.75303,12.0864 17.16235,19.64436 Z"
          fill="currentColor"
          id="path1-8"
          style={{ fill: '#7c7c7c', fillOpacity: 1 }}
        />
      </g>
      <g id="layer2">
        <path
          d="M 17.204142,35.299053 17.16235,19.64436 3.75303,12.0864 3.77803,27.556 Z"
          fill="currentColor"
          id="path1-8-5"
          style={{ fill: '#c8c8c8', fillOpacity: 1 }}
        />
      </g>
      <g id="layer3">
        <path
          d="M 17.204142,35.299053 17.149865,19.62251 30.5467,12.0427 l 0.025,15.4695 z"
          fill="currentColor"
          id="path1-8-5-9"
          style={{ fill: '#ffffff', fillOpacity: 1 }}
        />
      </g>
    </svg>
    <svg
      className="tartle-logo"
      viewBox="0 0 35 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M17.9966 39.1338L34.3247 29.6706L34.2922 9.87187L17.1292 0L0 9.9281L0.032495 29.7268L13.0075 37.1904L16.8555 39.4037V20.5498H25.8913V16.4419H4.58537V20.5498H13.0075V32.865L3.77803 27.556L3.75303 12.0864L17.1367 4.33042L30.5467 12.0427L30.5717 27.5122L17.9966 34.8008V39.1338Z"
        fill="currentColor"
      />
    </svg>
  </div>
  <span>DataVault Connect</span>
</a>

Button css

.tartle-datavault-button {
  margin: 0 auto;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  background-color: hsl(170, 72%, 47%);
  color: hsl(180, 100%, 12%);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition:
    background-color 0.2s ease-in-out,
    scale 0.15s ease-in-out;
}

.tartle-datavault-button:hover {
  text-decoration: none;
  background-color: hsla(170, 72%, 42%);
}

.tartle-datavault-button span {
  margin-left: 0.5rem;
  user-select: none;
}

.tartle-datavault-button .logo-container {
  display: grid;
  grid-template-columns: 1fr;
}

.tartle-datavault-button .logo-container svg {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(180, 100%, 12%);
  grid-row-start: 1;
  grid-column-start: 1;
}

.tartle-datavault-button:hover .tartle-logo {
  opacity: 0;
  rotate: 180deg;
  animation: pulse 0.3s ease-in-out;
}

.tartle-datavault-button:hover .logo-cube {
  opacity: 1;
  rotate: 360deg;
  animation: pulse 0.3s ease-in-out;
}

.tartle-logo,
.logo-cube {
  transition:
    opacity 0.3s ease-in-out,
    rotate 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    scale 0.3s ease-in-out;
}
.tartle-logo {
  opacity: 1;
  rotate: 0deg;
}
.logo-cube {
  opacity: 0;
  rotate: 180deg;
}

.tartle-datavault-button:active {
  scale: 0.95;
}

.tartle-datavault-button:active .logo-cube {
  scale: 0.35;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}

After that, you're ready to continue by handling the redirect.

Was this page helpful?