---
url: https://talkjs.com/docs/UI_Components/JavaScript/Classic
---

# Getting started

Ask a question Copy for LLM [View as Markdown](/docs/UI_Components/JavaScript/Classic.md)

The classic JavaScript SDK runs chat UI components inside of an iframe. If you're starting a new project, then also check out TalkJS [web components](/docs/UI_Components/JavaScript/), which you may find easier to customize. The classic JavaScript SDK remains fully supported, so you can safely keep using it and don't need to update any of your code.

This guide will help you quickly add TalkJS to your app and create a 1-on-1 chat (direct messages) between two users with the classic [JavaScript SDK](/docs/UI_Components/JavaScript/Classic/).

In the guide we'll walk you through installing TalkJS, viewing a conversation, and creating new users and conversations.

## Prerequisites

To make the most of this guide, you will need a [TalkJS account](/dashboard/signup/premium/).

You might also already have an existing app that you want to add TalkJS to.

## Add TalkJS to your app

Add the following script to your app to load TalkJS:

HTML

```html
{/* minified snippet to load TalkJS without delaying your page */}
<script>
(function(t,a,l,k,j,s){
s=a.createElement('script');s.async=1;s.src='https://cdn.talkjs.com/talk.js';a.head.appendChild(s)
;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
.push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
</script>
```

Then, for either a [chatbox](/docs/Features/Chat_UIs/#chatbox/) or an [inbox](/docs/Features/Chat_UIs/#inbox/) pre-built chat UI, include this container element in the place in which you want to add your chat:

HTML

```html
{/* container element in which TalkJS will display a chat UI */}
<div id='talkjs-container' style='width: 90%; margin: 30px; height: 500px'>
  <i>Loading chat...</i>
</div>
```

If you're adding a [popup](/docs/Features/Chat_UIs/#popup/) UI, you can omit this container, as the popup gets overlaid on top of your page. By default the popup displays in the bottom right corner, but you can [change the position of the popup button on your page](/resources/how-to-customize-the-popup-open-and-close-button/).

## View an existing conversation

Next, we'll view an existing conversation. Choose the tab for your preferred chat UI, and add the following code to your app:

**Chatbox**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'sample_user_alice',
  });

  const chatbox = session.createChatbox();
  chatbox.select('sample_conversation');
  chatbox.mount(document.getElementById('talkjs-container'));
});
```

**Inbox**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'sample_user_alice',
  });

  const inbox = session.createInbox();
  inbox.select('sample_conversation');
  inbox.mount(document.getElementById('talkjs-container'));
});
```

**Popup**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'sample_user_alice',
  });

  const popup = session.createPopup();
  popup.select('sample_conversation');
  popup.mount({ show: false });
});
```

Let's step through what this code is doing:

- You make a connection to the TalkJS servers, known as a [session](/docs/Concepts/Sessions/). You'll need to replace `<APP_ID>` with your own App ID, which you can find on the **Settings** page of your TalkJS [dashboard](/dashboard/login). For this tutorial, we recommend using the App ID for TalkJS's [Test Mode](/docs/Features/Environments/), which has built-in sample users and conversations which you'll use in this tutorial. You'll also need to specify a current user to send messages as. In this example, you're setting `userId` to be an existing user, the `sample_user_alice` sample user.

- Then you create the chat UI. Call the [`createChatbox`](/docs/UI_Components/JavaScript/Classic/Session/#Session__createChatbox) method for a chatbox, [`createInbox`](/docs/UI_Components/JavaScript/Classic/Session/#Session__createChatbox) for an inbox, or [`createPopup`](/docs/UI_Components/JavaScript/Classic/Session/#Session__createPopup) for a popup UI. Use the [`select`](/docs/UI_Components/JavaScript/Classic/Chatbox/#Chatbox__select) method to display the sample conversation with 'sample_group_chat' ID, and then use the [`mount`](/docs/UI_Components/JavaScript/Classic/Chatbox/#Chatbox__mount) method to render the UI. (The methods here are linked for the chatbox, but are also available on the inbox and popup UI.)
For example, for the chatbox UI, you should see something like this:

*Loading chat...*
Try sending Sebastian a message! You can also try switching your `userId` to `sample_user_sebastian` and viewing the other side of the conversation.

If you don't see the chat window, make sure that you entered your App ID, replacing `<APP_ID>` in the code.

## Create new users and conversations

So far in this guide we've used a sample user and conversation. Next, we'll create new users and a conversation between them, and sync them with the TalkJS servers. Usually, you would create users based on the data from your database. For this getting started guide, we've hard-coded our user data instead.

First, let's add a new current user, Nina, and a new conversation. Update your code with the highlighted lines:

**Chatbox**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'nina',
  });
  session.currentUser.createIfNotExists({
    name: 'Nina',
    email: 'nina@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
    welcomeMessage: 'Hi!',
  });

  const conversationRef = session.conversation('new_conversation');
  conversationRef.createIfNotExists();

  const chatbox = session.createChatbox();
  chatbox.select(conversationRef);
  chatbox.mount(document.getElementById('talkjs-container'));
});
```

**Inbox**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'nina',
  });
  session.currentUser.createIfNotExists({
    name: 'Nina',
    email: 'nina@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
    welcomeMessage: 'Hi!',
  });

  const conversationRef = session.conversation('new_conversation');
  conversationRef.createIfNotExists();

  const inbox = session.createInbox();
  inbox.select(conversationRef);
  inbox.mount(document.getElementById('talkjs-container'));
});
```

**Popup**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'nina',
  });
  session.currentUser.createIfNotExists({
    name: 'Nina',
    email: 'nina@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
    welcomeMessage: 'Hi!',
  });

  const conversationRef = session.conversation('new_conversation');
  conversationRef.createIfNotExists();

  const popup = session.createPopup();
  popup.select(conversationRef);
  popup.mount({ show: false });
});
```

Here you connect to TalkJS as a user with an ID of `nina`, and set initial user data if she does not yet exist. You then get a reference to a conversation with an ID of `new_conversation`, and set initial conversation data if it does not yet exist.

Next, create a second user, Frank, and add them to the conversation:

**Chatbox**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'nina',
  });
  session.currentUser.createIfNotExists({
    name: 'Nina',
    email: 'nina@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
    welcomeMessage: 'Hi!',
  });

  const otherRef = session.user('frank');
  otherRef.createIfNotExists({
    name: 'Frank',
    email: 'frank@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',
    welcomeMessage: 'Hey, how can I help?',
  });

  const conversationRef = session.conversation('new_conversation');
  conversationRef.createIfNotExists();
  conversationRef.participant(otherRef).createIfNotExists();

  const chatbox = session.createChatbox();
  chatbox.select(conversationRef);
  chatbox.mount(document.getElementById('talkjs-container'));
});
```

**Inbox**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'nina',
  });
  session.currentUser.createIfNotExists({
    name: 'Nina',
    email: 'nina@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
    welcomeMessage: 'Hi!',
  });

  const otherRef = session.user('frank');
  otherRef.createIfNotExists({
    name: 'Frank',
    email: 'frank@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',
    welcomeMessage: 'Hey, how can I help?',
  });

  const conversationRef = session.conversation('new_conversation');
  conversationRef.createIfNotExists();
  conversationRef.participant(otherRef).createIfNotExists();

  const inbox = session.createInbox();
  inbox.select(conversationRef);
  inbox.mount(document.getElementById('talkjs-container'));
});
```

**Popup**
```javascript
Talk.ready.then(function () {
  const session = new Talk.Session({
    appId: '<APP_ID>',
    userId: 'nina',
  });
  session.currentUser.createIfNotExists({
    name: 'Nina',
    email: 'nina@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
    welcomeMessage: 'Hi!',
  });

  const otherRef = session.user('frank');
  otherRef.createIfNotExists({
    name: 'Frank',
    email: 'frank@example.com',
    photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',
    welcomeMessage: 'Hey, how can I help?',
  });

  const conversationRef = session.conversation('new_conversation');
  conversationRef.createIfNotExists();
  conversationRef.participant(otherRef).createIfNotExists();

  const popup = session.createPopup();
  popup.select(conversationRef);
  popup.mount({ show: false });
});
```

In this updated code, you get a reference to the other user, `frank`, and set initial user data if he does not yet exist. You then get a reference to the `frank` participant in the conversation, and create the participant if it does not already exist, adding `frank` to the conversation.

You should now see something like this:

If you prefer, you can instead create and sync [users](/docs/REST_API/Users/#creating-or-updating-a-user) or [conversations](/docs/REST_API/Conversations/#setting-conversation-data) from your backend with
our [REST API](/docs/REST_API/). If you
want to only sync users or conversations with the REST API, you can disable syncing in the browser. See [Browser
Synchronization](/docs/Features/Security/Browser_Synchronization/) for
more details.

## Customize the UI

You can customize the look, feel, and behavior of your chat UI with HTML and CSS, using the Theme Editor in your TalkJS dashboard. To get started with customization, make sure you have the [Theme Editor enabled](#enable-the-theme-editor), and then follow the [theming guide](/docs/UI_Components/JavaScript/Classic/Themes/).

### Enable the Theme Editor

To enable the Theme Editor:

1. On the TalkJS dashboard, go to [Project settings](/dashboard/project/settings).
2. In the section **Dashboard settings**, select **Enable UI Theme Editor (Classic SDKs)**, and save your changes.
You can now edit your app's theme directly from the [Themes](/dashboard/themes) section of your dashboard.

## Next steps

In this guide, you've added a powerful user-to-user chat to your app. You also learned more about the fundamentals of TalkJS, and how it all fits together.

Most importantly, you've built a starting point to try out all the features TalkJS offers. For example, you could create a new UI theme in the [Theme Editor](/docs/Features/Themes/), customize your chat with [action buttons](/docs/Guides/JavaScript/Classic/Action_Buttons_Links/?framework=javascript-classic) or [HTML panels](/docs/Guides/JavaScript/Classic/HTML_Panels/?framework=javascript-classic), or enable [email notifications](/docs/Features/Notifications/Email_Notifications/).

For more ideas, try browsing the many [examples](https://github.com/talkjs/talkjs-examples/tree/master/react) we offer for different use cases.

Before you go live, make sure you enable authentication. Authentication keeps your user data secure, by ensuring that only legitimate users can connect to your chat. For details, see: [Authentication](/docs/Features/Security/Authentication/).

## Full code example

Here's what your working example should look like, in full:

**Chatbox**
```html
<!doctype html>

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />

    <title>TalkJS tutorial</title>
  </head>

  {/* minified snippet to load TalkJS without delaying your page */}
  <script>
    (function(t,a,l,k,j,s){
    s=a.createElement('script');s.async=1;s.src='https://cdn.talkjs.com/talk.js';a.head.appendChild(s)
    ;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
    .push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
  </script>

  <script>
    Talk.ready.then(function () {
      const session = new Talk.Session({
        appId: '<APP_ID>',
        userId: 'nina',
      });
      session.currentUser.createIfNotExists({
        name: 'Nina',
        email: 'nina@example.com',
        photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
        welcomeMessage: 'Hi!',
      })
      
      const otherRef = session.user('frank')
      otherRef.createIfNotExists({
        name: 'Frank',
        email: 'frank@example.com',
        photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',
        welcomeMessage: 'Hey, how can I help?',
      });

      const conversationRef = session.conversation('new_conversation');
      conversationRef.createIfNotExists();
      conversationRef.participant(otherRef).createIfNotExists();

      const chatbox = session.createChatbox();
      chatbox.select(conversationRef);
      chatbox.mount(document.getElementById('talkjs-container'));
    });
  </script>

  <body>
    {/* container element in which TalkJS will display a chat UI */}
    <div id='talkjs-container' style='width: 90%; margin: 30px; height: 500px'>
      <i>Loading chat...</i>
    </div>
  </body>
</html>
```

**Inbox**
```html
<!doctype html>

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />

    <title>TalkJS tutorial</title>
  </head>

  {/* minified snippet to load TalkJS without delaying your page */}
  <script>
    (function(t,a,l,k,j,s){
    s=a.createElement('script');s.async=1;s.src='https://cdn.talkjs.com/talk.js';a.head.appendChild(s)
    ;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
    .push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
  </script>

  <script>
    Talk.ready.then(function () {
      const session = new Talk.Session({
        appId: '<APP_ID>',
        userId: 'nina',
      });
      session.currentUser.createIfNotExists({
        name: 'Nina',
        email: 'nina@example.com',
        photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
        welcomeMessage: 'Hi!',
      })
      
      const otherRef = session.user('frank')
      otherRef.createIfNotExists({
        name: 'Frank',
        email: 'frank@example.com',
        photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',
        welcomeMessage: 'Hey, how can I help?',
      });

      const conversationRef = session.conversation('new_conversation');
      conversationRef.createIfNotExists();
      conversationRef.participant(otherRef).createIfNotExists();

      const inbox = session.createInbox();
      inbox.select(conversationRef);
      inbox.mount(document.getElementById('talkjs-container'));
    });
  </script>

  <body>
    {/* container element in which TalkJS will display a chat UI */}
    <div id='talkjs-container' style='width: 90%; margin: 30px; height: 500px'>
      <i>Loading chat...</i>
    </div>
  </body>
</html>
```

**Popup**
```html
<!doctype html>

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />

    <title>TalkJS tutorial</title>
  </head>

  {/* minified snippet to load TalkJS without delaying your page */}
  <script>
    (function(t,a,l,k,j,s){
    s=a.createElement('script');s.async=1;s.src='https://cdn.talkjs.com/talk.js';a.head.appendChild(s)
    ;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
    .push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
  </script>

  <script>
    Talk.ready.then(function () {
      const session = new Talk.Session({
        appId: '<APP_ID>',
        userId: 'nina',
      });
      session.currentUser.createIfNotExists({
        name: 'Nina',
        email: 'nina@example.com',
        photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
        welcomeMessage: 'Hi!',
      })
      
      const otherRef = session.user('frank')
      otherRef.createIfNotExists({
        name: 'Frank',
        email: 'frank@example.com',
        photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',
        welcomeMessage: 'Hey, how can I help?',
      });

      const conversationRef = session.conversation('new_conversation');
      conversationRef.createIfNotExists();
      conversationRef.participant(otherRef).createIfNotExists();

      const popup = session.createPopup();
      popup.select(conversationRef);
      popup.mount({ show: false });
    });
  </script>
</html>
```