Step 3: Import CDN Script

⏱ 3 min read

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

Add the Script

Add the Transcodes WebWorker to your HTML:

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

Where to Add the Script

HTML File

Add it to the <head> or before the closing </body> tag:

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- Add here (recommended) -->
    <script
      type="module"
      src="https://cdn.transcodes.link/{YOUR_PROJECT_ID}/webworker.js"
    ></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- Or add here -->
  </body>
</html>

React / Next.js

Add to your index.html or _document.tsx:

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

Add to public/index.html:

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 if transcodes is available:


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

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

What’s Next

SDK installed! Next step: - Step 4: Call Auth Modals - Trigger authentication modals