sidebar_position: 2

The Dashboard

Login to your Dashboard connected through:

A Visit the API Dashboard.

https://api.tryklas.com

Proceeding With The Sign In

• After Visiting The Url

• Enter your email and password
• And Login To Proceed to The Dashboard
• If You do not have and Account Proceed to Sign Up

Proceeding With The Sign Up

• After Visiting The Sign Up Page

• Enter your Company Name, Email and Password
• And Login To Proceed to The Dashboard
• If You do not have and Account Proceed to Sign Up
• After Sign Up Proceed to Sign In

Getting Your Public/ API Key

• After Signing In To The Dashboard

• Click on API Keys on the side bar
• copy the code in the API Key by clicking copy under the label API KEY

Using the public / API Key

• After Copying The Code from the Dashboard
• Paste Your Code As An .env variable for security Reasons
• But For Test Paste Your Code Directly as publicKey

import Connector from 'klas-api-sdk';

export default function MyReactPage() {
  const publicKey = process.env.REACT_NEXT_PUBLIC_KEY;

  const [roomID, setRoomID] = setState('');
  const [userID, setUserID] = setState('');
  const [name, setName] = setState('');
  const [email, setEmail] = setState('');
  const [topic, setTopic] = setState('');

  const connectToSdk = (e) => {
    e.preventDefault();
    if (roomID === '' ) {
      return alert('No Room ID');
    }
    Connector({
      roomID: roomID,
      userID: userID,
      name: name,
      email: email,
      topic: topic,
      pubKey: publicKey,
      isInstructor: false
    });
  }

  return (
    <div>
      <h1>Connect to Klas Live With SDK</h1>
      <p>Jump To Klas</p>
      <form onSubmit={connectToSdk}>
        <input value={roomID} onChange={(e)=>setRoomID(e.target.value)}/>
        <input value={userID} onChange={(e)=>setUserID(e.target.value)}/>
        <input value={name} onChange={(e)=>setName(e.target.value)}/>
        <input value={email} onChange={(e)=>setEmail(e.target.value)}/>
        <input value={topic} onChange={(e)=>setTopic(e.target.value)}/>
        <input type='submit' value='Connect To SDK'/>
      </form>
    </div>
  );
}

For instructors

Note:

For Students set isInstructor to true

Connector({
  roomID: roomID,
  userID: userID,
  name: name,
  email: email,
  topic: topic,
  pubKey: publicKey,
  isInstructor: true
});

For students

Note:

For Students set isInstructor to false

• Topic is not required while connecting a student

Connector({
  roomID: roomID,
  userID: userID,
  name: name,
  email: email,
  topic: topic,
  pubKey: publicKey,
  isInstructor: false
});