Avant Garde — Integration Guide

Overview

The avant garde component library lets you embed professional trading tools — sign-in, account management, and a full trading dashboard — into any website with a few lines of HTML. The two available components are:

<agt-connect-dropdown> — sign-in button & user menu <agt-dashboard> — full trading dashboard

Step 1 Contact our sales team

Before integrating, we need to provision an account for your organization. This sets up a secure app client tied to your domain and gives you the Client ID required in the next steps.

Email info@tradeagt.com View demo ↗

Step 2 Load the component library

Add two <script> tags to the <head> of every page that renders a component. The first loads the library from our CDN; the second supplies your Client ID.

index.html

<!-- 1. Load the component library from the CDN -->
<script
  type="module"
  src="https://components.tacoai.net/latest/agt-ui-components.umd.js"
  defer
></script>

<!-- 2. Supply your Client ID -->
<script type="text/javascript">
  window.AgtConnect = {
    config: {
      clientId: 'YOUR_CLIENT_ID',
    },
  };
</script>

Replace YOUR_CLIENT_ID with the Client ID provided by our team in Step 1.

Step 3 Host the OAuth callback page

After a user signs in, the identity provider redirects them to a callback URL on your domain. A small static HTML file must be hosted at that path for the redirect to complete correctly.

Create the file

Create agt-oauth-callback.html in your website's root directory with the following content:

agt-oauth-callback.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://components.tacoai.net/latest/agt-oauth-callback.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script
      type="text/javascript"
      src="https://components.tacoai.net/latest/agt-oauth-callback.js"
    ></script>
  </body>
</html>

Deploy and verify

Deploy the file alongside your index.html and confirm it is publicly accessible at:

https://<your-domain>/agt-oauth-callback.html

Step 4 Embed a component

Place one of the custom elements anywhere in your page <body>. The library handles authentication state automatically — no additional wiring required.

Connect Dropdown <agt-connect-dropdown>

A compact sign-in button that expands into a user menu after authentication. Best suited for navbars and headers.

<agt-connect-dropdown></agt-connect-dropdown>

Trading Dashboard <agt-dashboard>

A full-featured trading dashboard for dedicated pages or wide-layout integrations.

<agt-dashboard></agt-dashboard>

Step 5 Test the integration

After deploying your changes, run through this checklist to confirm everything is working correctly.

Script tags added to all relevant pages
OAuth callback page accessible at /agt-oauth-callback.html
Component renders on the page
OAuth sign-in completes and redirects back correctly
Sign-out redirect completes correctly
No CORS errors in the browser console

Running into issues? Email info@tradeagt.com — we're happy to help troubleshoot.