Step 2: Import CDN Script

⏱ 2 min

Add the Transcodes SDK to your website with a single script tag.

Add the Script

index.html


<script
  type="module"
  src="https://cdn.transcodes.link/{YOUR_PROJECT_ID}/webworker.js"
></script>

Replace {YOUR_PROJECT_ID} with your actual Project ID from the dashboard.

Installation Guide in Dashboard

Framework Examples

HTML

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <script
      type="module"
      src="https://cdn.transcodes.link/{YOUR_PROJECT_ID}/webworker.js"
    ></script>
  </head>
  <body>
    <button id="login-btn">Sign In</button>
  </body>
</html>

React / Next.js

pages/_document.tsx


import { Html, Head, Main, NextScript } from 'next/document';
 
export default function Document() {
  return (
    <Html>
      <Head>
        <script
          type='module'
          src='https://cdn.transcodes.link/{YOUR_PROJECT_ID}/webworker.js'
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Vue.js

public/index.html


<!DOCTYPE html>
<html>
  <head>
    <script
      type="module"
      src="https://cdn.transcodes.link/{YOUR_PROJECT_ID}/webworker.js"
    ></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Verify Installation

Open your browser console and check:


console.log(transcodes);
// Should output: { openAuthLoginModal, openAuthModal, openAuthMfaModal, ... }

Success! The Transcodes SDK is now loaded and ready to use.

What’s Next

SDK installed! Next: Step 3: Call MFA Modal