Overview

In this guide you learn how to add the Client SDK to your client-side JavaScript app.

Prerequisites

The Client SDK requires Node.js and NPM.

To add the Client SDK to your project

Navigate to your app

Open your terminal. If you have an existing app, navigate to its root. Otherwise, create a new directory for your project.

Add the Client SDK to your project

Install the Client SDK package

Add a default package.json by running:

npm init -y

Install the Client SDK using npm:

npm install @vonage/client-sdk -s

Import the Client SDK into your code

If your application is using ES6 module syntax, you can import the client module near the top of your application code:

import { VonageClient } from "@vonage/client-sdk";

If your application will run on a single page, you can load the module in your HTML using a script tag:

<script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>

Be sure to check that the path to vonageClientSDK.min.js is correct for your project structure.

Load the Client SDK package

Load the Client SDK from a Content Delivery Network (CDN):

Inside the <head> of your HTML file, add:

<!-- ******* Load vonageClientSDK from a CDN ****** -->
<script src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js"></script>

Add the Client SDK into your code

Near the top of your application code, add:

//********* Get a reference to vonageClientSDK **********
const vonageClientSDK = window.vonageClientSDK;

Note: This may not be needed in newer browsers. If you get an error about the vonageClientSDK being not found/defined, try this.

Using the Client SDK in your app

Creating Users and JWTs

A JSON Web Token (JWT) is necessary to log in to your Vonage Application. The Client SDK cannot manage users nor generate JWTs, so you must choose a method of handling it on the backend:

For onboarding or testing purposes, you can get your client-side app working before setting up a backend by generating a test JWT from the command line and hard-coding it in your client-side JavaScript.
For real world usage, you can deliver JWTs from the server using the Node or PHP backend SDKs, and set the jwt variable in your code by fetching that data:
widgets.copy
```
fetch("/getJwt")
  .then(results => results.json())
  .then(data => {
    jwt = data.token;
  })
  .catch(err => console.error(err));
```
Read more on generating JWTs in this article

Instantiate VonageClient and create a session

Instantiating the VonageClient varies on how you load the Vonage Client SDK.

If loaded with a <script> tag:

const client = new vonageClientSDK.VonageClient();

If loaded via import:

const client = new VonageClient();

To create a session, pass your JWT as the argument to createSession().

client.createSession(jwt)
  .then(sessionId => {
    console.log("Id of created session: ", sessionId);
  })
  .catch(error => {
    console.error("Error creating session: ", error);
  });

Session Status

If there are any errors with the session after it has been successfully created, you will receive them on the sessionError event listener on the instantiated VonageClient.

// After creating a session
client.on("sessionError", (reason) => {
  console.error("Session error reason: ", reason);
});

Conclusion

You added the Client SDK to your client-side JavaScript app, and created a session. You can now use the VonageClient client in your app, and use the Client SDK functionality.