DEV Community: Tawanda

How to customize email notifications in TalkJS

Tawanda — Wed, 19 Jan 2022 07:18:26 +0000

TalkJS is a chat API that supports all types of notifications, including email, desktop, SMS, and push notifications. In this guide, we will look into customizing the email body of the TalkJS email notifications.

Customizing TalkJS Email Notifications

TalkJS supports email notifications as a method to notify users of missing conversations when they are offline. The only requirement to facilitate this functionality is to have at least a single email associated with the user and enable the email notification option for the assigned role. According to TalkJS, these emails will get dispatched only if the following conditions are met.

The user is offline.
The user is online but has selected a different conversation in the UI.
The user is online and has selected the current conversation in the UI, but the browser tab/window is not focused.

Users can create an unlimited number of roles with customized emails and use those roles to send different types of emails to different user groups. The only limitation is the styles of legacy themes automatically getting applied for email notifications when they are used as the theme of the chat.

How to Change the Email Body

Now let's look at how to customize the email body. First, we need to create a role, modify the email body and then assign the created role to a user. Let's assume that we are customizing email notifications for a group chat in an educational platform that connects students and teachers.

How to create a Role

Roles allow developers to change the behavior of TalkJS to different users. These roles can be created in the Roles section of the TalkJS dashboard. Simply go to the Roles section and click on the “Create new role” button to create a new role.

Then these roles can be assigned to each user as shown below;

var student1 = new Talk.User({
    id: '555551',
    name: 'Dean',
    email: 'dean@gmail.com',
    photoUrl: 'https://i.ibb.co/rGHFSqL/D.png',
    role: 'student'
});

var student2 = new Talk.User({
    id: '555552',
    name: 'Mary',
    email: 'mary@gmail.com',
    photoUrl: 'https://i.ibb.co/cxwVNLW/M.png',
    role: 'student'
});

Changing Email Body

Within the role configurations, you can find the Email settings section, which contains all the available options to customize email notifications. Here, the HTML and Text templates are used to change the email body. HTML template will only appear to email clients with full HTML support. Otherwise, it will default to the Text template.

Before changing the email body, let’s see how the default HTML template appears to a user.

In the Email settings section, you can get the available fields from TalkJS that can be included in the email body using a limited Marco syntax.

Next, let’s do some simple modifications to see if the changes will get applied to the template. We will change the message content by adding a heading and two horizontal lines to separate the message.

<div>
    <h3>Student Message Room</h3>
    Hi <i>{{recipient.name}}</i>, <br/>
    <br/>
    {{sender.name}} has messaged you on {{conversation.subject}}:<br/>
    <br/>
    <p><h5>Messages</h5></p>
    <hr/>
    {{messages.all}}
    <br/>
    <hr/>
    <br/>
    <a href="https://example.com/inbox">Click here to join the chat.</a>
    <br/>
    <br/>
    On behalf of {{sender.name}},<br/>
    <br/>
</div>

Now the students will receive email notifications in the new format whenever they are offline.

Customized Email Format:

Advanced Email Body Customization

Now let's customize the email body. The easiest way to create a custom email template is to utilize a tool such as Unlayer. It enables users to quickly create an email template that will be fully compatible with all email clients and browsers. Let's create an email template using Unlayer as shown below and add the generated code to the HTML template section.

Unlayer Email Template:

Now we can simply add this temple to the HTML template section and save the role.

Now, the user will be shown the newly customized format when an email is triggered. That’s it, and you have successfully customized the email body of the notification email.

How to add chat into a Spring Boot App

Tawanda — Mon, 10 Jan 2022 08:24:12 +0000

In today’s article, we will be taking a slightly different direction than our previous ones. We will not be theming a TalkJS chat but integrating it with a Spring Boot application to retrieve user data. For the implementation, we will model an agent and a bunch of customers. This data will then be retrieved using a REST API from the Spring Boot application. For the sake of simplicity, we will use the in-memory H2 database, but you can expand it to other popular database options. You can find the entire source code for this project on GitHub.

Note

This tutorial does not implement Spring Security for authentication and authorization. Still, in a production scenario, the users must register themselves, and the passwords must be stored in a hashed format. Only authenticated users must be allowed to start the chat with the agent. On the other hand, the agents must authenticate themselves before attending to a customer as well.

Setting up the Spring Boot Application

To set up the Spring Boot application, the easiest way is to have Spring Tool Suite. You can install it from here. Launch the application and create a new Spring Starter project. The wizard will ask for a name and all the dependencies that you want to add. For this application, we need the following:

Spring Data JPA
Spring Web
H2 Database

Once you click Finish, it will set up a Spring Boot application that is ready to run. Open, application.properties present inside src/main/resources. Add the following lines to set up the H2 in-memory database.

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.H2Dialect
spring.jpa.hibernate.ddl-auto= update
spring.h2.console.enabled=true

This will configure the H2 database and also enable the console to visually view and manage the data present inside the database.

Creating the Model and Repository

We will now model the user and create a repository to save and retrieve users. Spring Boot provides an easy-to-use interface JpaRepository, that already has most of the methods we need. The model class is shown below. We use the @Entity annotation to mark the class as an entity that will be present in a database. The @Table annotation denotes the name of the table.

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    @Column(name = "name")
    private String name;
    @Column(name = "dp")
    private String dp;
    @Column(name = "email")
    private String email;
    @Column(name = "role")
    private String role;
}

There are five fields for the user. The id is automatically generated by Hibernate which is used within Spring Boot for Object-Relational Mapping (ORM). The @Column annotation denotes each column's name within the database. We also have a constructor, getters, and setters for the above class, but it is not shown above since they are auto-generated.

The repository interface is by far the smallest in the project. We just need to have an empty interface that implements the JpaRepository. This lets us use all the methods that come with it.

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

Creating the Controller

Since this is a web application consisting of APIs, we need to create a controller. We have two endpoints. One is/createUser and the other is /getUser. The following code outlines the controller.

@CrossOrigin("*")
@RestController
public class UserController {

    @Autowired
    UserRepository userRepository;

    @PostMapping(value = "/createUser")
    public ResponseEntity<User> createUser(@RequestBody User user) {
    return new ResponseEntity<>(userRepository.save(user), HttpStatus.OK);
    }

    @GetMapping(value = "/getUser")
    public ResponseEntity<User> getUser(@RequestParam(required = true) Long userId) {
    return new ResponseEntity<>(userRepository.findById(userId).get(), HttpStatus.OK);
    }

}

The @Autowired annotation is used for dependency injection. We have the @GetMapping annotation to denote a GET request and a @PostMappingannotation to denote a POST request. To create a user, we use the save() method present inside the userRepository. Note that we don't check for errors here since there is no scope for variability here. All the data is pre-defined. In a production scenario, you must ensure that there are proper error checks. The @CrossOrigins annotation is present because we are making API calls within the localhost.

Creating users using the API and verifying them

Use the following payload to create an agent and a user. The application will be running on localhost:8080. You can use Postman to perform the API calls.

URL: localhost:8080/createUser TYPE: POST

{
    "name":"Tom Hardy",
    "dp": "https://randomuser.me/api/portraits/men/1.jpg",
    "email":"tom.hardy@operator.com",
    "role":"AGENT"
}

{
    "name":"John Morrison",
    "dp": "https://randomuser.me/api/portraits/men/62.jpg",
    "email":"john.morrison@operator.com",
    "role":"USER"
}

You should get a 200 OK response and the created user for both the API calls. Since we enabled the H2 console, we can also view the database contents at localhost:8080/h2-console.

Setting up the TalkJS application

Set up a TalkJS Inbox using our Getting Started Guide. In the script file, make changes to the code as follows.

(
    async function() {
    await Talk.ready;
    let agent = await getAgent();
    let user = await getUser();

    const session = new Talk.Session({
        appId: 'YOUR_APP_ID_HERE',
        me: user,
    });
    var conversation = session.getOrCreateConversation(Talk.oneOnOneId(user, agent));

    conversation.setAttributes({
        welcomeMessages: ["You can start typing your message here and one of our agents will be with you shortly.", "Please do not divulge any of your personal information."]
    })
    conversation.setParticipant(user);
    conversation.setParticipant(agent);

    var inbox = session.createInbox(conversation);
    inbox.mount(document.getElementById("talkjs-container"));
}());

Note that we use two asynchronous functions here, getAgent() and getUser() to retrieve the agent and user data. Add the following functions above the existing code inside the script file.

const getAgent = async () => {
    const response = await fetch('http://localhost:8080/getUser?userId=1');
    const data = await response.json();
    let agent = new Talk.User({
        id: data.id,
        name: data.name,
        photoUrl: data.dp,
        email: data.email,
        role: data.role
    });
    return agent;
}
const getUser = async () => {
    const response = await fetch('http://localhost:8080/getUser?userId=2');
    const data = await response.json();
    let user = new Talk.User({
        id: data.id,
        name: data.name,
        photoUrl: data.dp,
        email: data.email,
        role: data.role
    });
    return user;
}

Once we receive the user and agent data from our database through the API calls, we create Talk.User objects and map them to it. This will allow us to start a conversation with the users retrieved from the database.

Conclusion

We have successfully integrated a Spring Boot application with TalkJS and retrieved user data from an in-memory database through API calls. Even though this is a very simple example that showcases the capabilities of TalkJS, you can expand it to any production scenario by implementing authentication, authorization, role-based dashboards, and more. The entire source code for this project is available on GitHub.

How to create a group chat with a chat API

Tawanda — Tue, 23 Nov 2021 14:41:13 +0000

Today, we'll show you how to create a group chat feature and embed it into your website or app by using the TalkJS Chat API. The API works with any platform or programming language so you can be sure it will work well with your stack.

Setting up the group chat

We will try to build a group chat for this tutorial that will allow students to discuss homework with the teacher.

Before we start work on the group chat, let's create a simple one-to-one chat following the Getting Started guide.

Your first chat app will look as above.

But this is a 1-on-1 chat. So we need to make some changes to the code to create a group chat.

The first step is to update your code by adding new users as below. We will add one teacher and two students as our users.

Don't forget to enter your own *appId * you can find in the TalkJS Dashboard.


Talk.ready.then(function() {
    var teacher = new Talk.User({
        id: "123456",
        name: "Alice",
        email: "alice@example.com",
        photoUrl:'https://images.pexels.com/photos/3671083/pexels-photo-3671083.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
    });

    window.talkSession = new Talk.Session({
        appId: \"YOUR_APP_ID\",
        me: teacher
    });

    var student1 = new Talk.User({
        id: "654321\",
        name: \"Sebastian\",
        email: \"sebastian\@example.com\",
        photoUrl:'https://images.pexels.com/photos/775358/pexels-photo-775358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500\'
    });

    var student2 = new Talk.User({
        id: "456789",
        name: "Steve",
        email: "steve@example.com",
        photoUrl:'https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
    });

});

Once you have added the users, it's time to create the conversations. Update your code like below.

const conversation = talkSession.getOrCreateConversation("CONVERSATION_ID");
conversation.setParticipant(teacher);
conversation.setParticipant(student1);
conversation.setParticipant(student2);

conversation.setAttributes({
    photoUrl: "https://i.picsum.photos/id/971/200/300.jpg?hmac=13ePfSXGucrfsPCzPjUZtNe5jYo83FTet0dk-Lk2Q4E",
    subject: "homework_assignment"
});

The CONVERSATION_ID is the parameter used to identify each conversation uniquely. To avoid security risks, we do not use simple numbers and letters when setting up actual conversation ids as a best practice. Instead, you can compute an HMAC of your conversation ID the same way you generate your Identity Verification signature. You can then use the HMAC as your conversation ID. You can find more information on how to secure your conversation ID here.

The next step is to mount the chatbox into your user interface. Add the following code to mount your chatbox.

const chatbox = talkSession.createChatbox();
chatbox.select(conversation);
chatbox.mount(document.getElementById("talkjs-container"));

Go to your application and try to load the chatbox. It will load as below.

In the code above, the value of me property is 'teacher.' So right now, what we are seeing is what the teacher, Alice, can see. Notice how the names of the other two members in the conversation are displayed at the top.

Creating roles

TalkJS provides the ability to create user roles. These user roles may come in handy, especially when you want to control user behavior and privileges. You can create these roles using the * TalkJS dashboard*. Click on Roles to add a role.

Let's create two roles: teacher and student. Click on the Create New Role button to create the role 'teacher.' Click on the "Create role" button. You will be redirected to your role's settings page.

Click on the Create New Role button again to create the 'student' role. Assume you don't want the students to share their assignments or papers in the chat to prevent copying. All you have to do is disable the file-sharing option in student role settings as below and save.

You can add those roles into your user object as below.

var teacher = new Talk.User({

    id: "123456",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: 'https://images.pexels.com/photos/3671083/pexels-photo-3671083.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    role: "teacher"
});

Customizing the UI with TalkJS Themes

Once you have created the roles, you can customize the TalkJS UI based on the user role. TalkJS uses the default theme when a role is not defined.

To create a role-specific theme, go to the Theme Editor in the TalkJS dashboard.

Click on Create new theme and give it a name.

Inside the teacher theme, go to the Layout tab.

Click on the collapsible panels (Global, Panels, Chat Portal, etc.) on the right to customize the teacher's interface. As an example, let's change the background color of the teacher's chatbox.

To apply the theme to the role, we need to go back to our teacher role's settings.

Under UI Theme, select 'Custom Theme' as 'Theme version' and 'teacher' as the 'Active theme.'

Save the change and reload the chatbox.

As you can see, the background color of the chatbox has changed as updated for our teacher role. However, if we log in as the student Sebastian, the background color is still white as the student role still uses the default theme.

There it is. A simple group chat in a few steps. As you can see, it's very easy to create roles and assign privileges and customize the UI based on the role. You may have also noticed how easy it is to edit the themes with TalkJS Theme Editor. So have fun creating group chats!

Create a direct message chat with a contact list using TalkJS

Tawanda — Wed, 03 Nov 2021 13:15:27 +0000

In this tutorial we will create a direct message chat with a contact list using the TalkJS chat API. The chat will display a list of contacts from which a user can select a contact and open a chatbox with a conversation (and a history of that conversation if it exists).

This is similar to the functionality you see on platforms like Linkedin, WhatsApp and Telegram.

Setting up our chat

The first thing we will do is set up a basic HTML page on which we will display our chat. On this page we will embed the TalkJS API in a script as specified in the Getting Started Guide.

We start by creating a div to hold our chatbox and the contact list, using the code below:

<div style="display: flex; justify-content: center">
    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="width: 30%;>
        <i>Loading chat...</i>
    </div>

    <div id="contacts-list">
        <h2>Contacts</h2>
    </div>
</div>

Our div will have two divs within it with ids of talkjs-container and contact-list respectively. We also apply some basic styling so that the contacts-list div floats to the right side of the talkjs-container div.

The contact list

The contact-list div will be populated by the list of contacts we can chat with. In production it is likely that these users will be retrieved from a database or another location. In our case we will create an array of hardcoded users. The array will contain objects of the users, each with an id, name and photoUrl property.

So we add the following code to our script:

const contactsList = [
    {
        id: 1,
        name: 'Lisa',
        photoUrl: 'https://talkjs.com/images/avatar-1.jpg'
    },
    {
        id: 2,
        name: 'Alice',
        photoUrl: 'https://talkjs.com/images/avatar-2.jpg'
    },
    {
        id: 3,
        name: 'Tina',
        photoUrl: 'https://talkjs.com/images/avatar-3.jpg'
    },
    {
        id: 4,
        name: 'Lee',
        photoUrl: 'https://talkjs.com/images/avatar-4.jpg'
    },
    {
        id: 5,
        name: 'Pete',
        photoUrl: 'https://talkjs.com/images/avatar-5.jpg'
    },
    {
        id: 6,
        name: 'Dana',
        photoUrl: 'https://talkjs.com/images/avatar-6.jpg'
    },
    {
        id: 7,
        name: 'Ro',
        photoUrl: 'https://talkjs.com/images/avatar-7.jpg'
    },
];

After setting up up our array of users, the next step is to display them in the contacts-list div.

To display the contacts list we will loop through the contactsList array and use the contact objects inside that array to create a contacts list with usernames and profile pictures. We will also make the contacts clickable. Finally the list is rendered in the contacts-list div.

// Display contacts list on page
// Get contacts list container from the DOM
const contactsWrapper = document.getElementById('contacts-list');
// Loop through array and display each contact in contact-list div
for (let contact of contactsList) {
    // Extract contact details
    const id = contact.id;
    const username = contact.name;
    const photoUrl = contact.photoUrl;

    //create img tag to hold contact pic, give it a class name (for styling purposes) and add photo to it
    const contactPhoto = document.createElement('img');
    contactPhoto.classList.add('contact-photo');
    contactPhoto.src = photoUrl;

    // Create div to hold contact Name and add name
    const usernameDiv = document.createElement('div');
    usernameDiv.classList.add('contact-name');
    usernameDiv.innerText = username;

    // Create contact parent div and add to it contactPhotoDiv and usernameDiv
    const contactContainerDiv = document.createElement('div');
    contactContainerDiv.classList.add('contact-container');

    contactContainerDiv.appendChild(contactPhoto);
    contactContainerDiv.appendChild(usernameDiv);

    contactsWrapper.appendChild(contactContainerDiv);
};

Now that we have loaded our contact list, let us add some styling to make it look nicer.

Styling the contact list

Since we are going to be doing a bit of styling, we will open a style tag at the top of our page and put all our CSS code there.

We want to reduce the size of the profile pictures, make them rounded and also float the names to the right of the profile pictures. We will also add a hover pseudo-class so that the user can easily see which contact they can select, and change the cursor to a pointer when it hovers over a contact.

Let us add the following code to our page:

<style>

    #contacts-list {
        margin-top: auto;
        width: 700px;
        border: #d0d8dc solid 1px;
        border-radius: 6px;
        height: 510px;
        color: #111;
        font-family: 'Open Sans', sans-serif;
    }

    #contacts-list h2 {
        color: #fff;
        background: #e7ecee;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 13.3px;
        font-weight: 700;
        margin: 0;
        padding-top: 20px;
        padding-left: 20px;
        text-align: left;
        height: 40px;
    }

    .contact-container {
        height: 50px;
        display: flex;
        margin: 5px 0;
        cursor: pointer; 
    }

    .contact-container:hover {
        background-color: #e7ecee;
    }

    .contact-name {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    img {
        height: 40px;
        width: 40px;
        border: #fff 2px solid;
        border-radius: 200px;
        margin-left: 20px;
        margin-right: 20px;
    }

</style>

The contact list will look as shown:

Loading the chatbox

After displaying the contact list we now want to initialize and load our chat interface.

We begin by asynchronously calling the Talk object. Once the promise is resolved, the rest of our code is loaded.

Talk.ready.then(function() {
    ...
})

Let us create a user called me who will be able to interact with the users from our array. As mentioned before, in production this user will likely be extracted from a database, or sent over a network in a data format such as the array above.

let me = new Talk.User({
    id: '0',
    name: 'Demi',
    photoUrl: 'https://talkjs.com/images/avatar.jpg'
});

We then use the appId to start and authenticate our chat Session with the TalkJS servers. This appId is found in the TalkJS dashboard, and without it the chat will not load.

Next we create and mount the chatbox where the conversation will be displayed:

const chatbox = talkSession.createChatbox();
chatbox.mount(document.getElementById('talkjs-container'));

We now want to create conversations between the user me and each of the users in the contactsList array. Here we make use of the Array.prototype.map() method which creates a new array populated with the results of calling a provided function on every element in the calling array.

// Create conversationBuilder objects for each user
const conversations = contactsList.map(function(user, index) {
    const talkUser = new Talk.User(user);

    conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, talkUser));

    conversation.setParticipant(me);
    conversation.setParticipant(talkUser);

    return conversation;
});

Connecting the chatbox to the contact list

The final step is to link our contacts to the appropriate chatbox, so that when a contact is selected a chatbox of that particular conversation loads.

To do this we need to get all instances of the contact-container class from the DOM, so we can listen in when any of the contacts is clicked. Then we add a click event listener to the resultant array and create a callback which is called when the event is triggered.

let contactsListDivs = document.getElementsByClassName('contact-container');
conversations.forEach(function(conversation, index) {
    contactsListDivs[index].addEventListener('click', function() {
    chatbox.select(conversation);
    });
});
}

Our final chat looks and functions as shown below:

Below is the full code for this tutorial.

<style>
    #contacts-list {
        margin-top: auto;
        width: 700px;
        border: #d0d8dc solid 1px;
        border-radius: 6px;
        height: 510px;
        color: #111;
        font-family: 'Open Sans', sans-serif;
    }

    #contacts-list h2 {
        color: #111;
        background: #e7ecee;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 13.3px;
        font-weight: 700;
        margin: 0;
        padding-top: 20px;
        padding-left: 20px;
        text-align: left;
        height: 40px;
    }

    .contact-container {
        height: 50px;
        display: flex;
        margin: 5px 0;
        padding: 5px 0;
        cursor: pointer; 
    }

    .contact-container:hover {
        background-color: #e7ecee;
    }

    .contact-name {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    img {
        height: 40px;
        width: 40px;
        border-radius: 200px;
        margin-left: 20px;
        margin-right: 20px;
    }
</style>

<div style="display: flex; justify-content: center;">
    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="width: 30%;">
    <i>Loading chat...</i>
    </div>

    <div id="contacts-list" style="width: 400px;">
        <h2>Contacts</h2>
    </div>

</div>

<script>
    const contactsList = [

        {
            id: 1,
            name: 'Lisa',
            photoUrl: 'https://talkjs.com/images/avatar-1.jpg'
        },
        {
            id: 2,
            name: 'Alice',
            photoUrl: 'https://talkjs.com/images/avatar-2.jpg'
        },
        {
            id: 3,
            name: 'Tina',
            photoUrl: 'https://talkjs.com/images/avatar-3.jpg'
        },
        {
            id: 4,
            name: 'Lee',
            photoUrl: 'https://talkjs.com/images/avatar-4.jpg'
        },
        {
            id: 5,
            name: 'Pete',
            photoUrl: 'https://talkjs.com/images/avatar-5.jpg'
        },
        {
            id: 6,
            name: 'Dana',
            photoUrl: 'https://talkjs.com/images/avatar-6.jpg'
        },
        {
            id: 7,
            name: 'Ro',
            photoUrl: 'https://talkjs.com/images/avatar-7.jpg'
        },
    ];

    // Display contacts list on page
    // Get contacts list container from the DOM
    const contactsWrapper = document.getElementById('contacts-list');
    // Loop through array and display each contact in contact-list div
    for (let contact of contactsList) {
        // Extract contact details
        const id = contact.id;
        const username = contact.name;
        const photoUrl = contact.photoUrl;

        //create img tag to hold contact pic, give it a class name (for styling purposes) and add photo to it
        const contactPhoto = document.createElement('img');
        contactPhoto.classList.add('contact-photo');
        contactPhoto.src = photoUrl;

        // Create div to hold contact Name and add name
        const usernameDiv = document.createElement('div');
        usernameDiv.classList.add('contact-name');
        usernameDiv.innerText = username;

        // Create contact parent div and add to it contactPhotoDiv and usernameDiv
        const contactContainerDiv = document.createElement('div');
        contactContainerDiv.classList.add('contact-container');

        contactContainerDiv.appendChild(contactPhoto);
        contactContainerDiv.appendChild(usernameDiv);

        contactsWrapper.appendChild(contactContainerDiv);
    };

    Talk.ready.then(function() {
    // Create user "me"
    let me = new Talk.User({
        id: '0',
        name: 'Josh',
        photoUrl: 'images/josh.webp'
    });

    // Start TalkJS Session
    window.talkSession = new Talk.Session({
        appId: 'tQWG4Gnl',
        me: me
    });

    // Create and mount the chatbox
    const chatbox = talkSession.createChatbox();
    chatbox.select(null);
    chatbox.mount(document.getElementById('talkjs-container'));

    // Create conversationBuilder objects for each user
    const conversations = contactsList.map(function(user, index) {
        const talkUser = new Talk.User(user);

        conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, talkUser));

        conversation.setParticipant(me);
        conversation.setParticipant(talkUser);

        return conversation;
    });

    // Listen for clicks on each contact and select the appropriate conversation
    let contactsListDivs = document.getElementsByClassName('contact-container');

    conversations.forEach(function(conversation, index) {
        contactsListDivs[index].addEventListener('click', () => {
        chatbox.select(conversation);
        });
    });
    });
</script>

Further customizations

It is possible to further customize your chat using the Theme Editor to make the UI look like WhatsApp, or Discord or Youtube. Check out more tutorials on the TalkJS website.

Happy coding!

How to build a custom support chat solution with TalkJS

Tawanda — Fri, 24 Sep 2021 12:23:03 +0000

Developers usually use the TalkJS API for 1-on-1, group, or live stream chat, but today we're going to show you how to make a simple chat for the customer support use case.

The chat will look like the one you see when you visit the TalkJS website. It's shown below.

Things to do

Set up the chat
Add features to the chat
Style the chat

Setting up the chat

To set up the chat we will follow the Getting Started instructions in the Docs. This gives us a working inbox which we can then customize. Remember to use your TalkJS appId, this is found in the dashboard. Without the TalkJS appId the chat will not load.

First we embed the script for the TalkJS API on the webpage. This loads the TalkJS API from the CDN. We also specify a div where the chatbox will be rendered once it's fetched from the CDN.

Then we use another script to initiate the chat. This involves defining users. Also, this is where we need the appId. One of the users, Alice, is set as current user. This could be the administrator or service provider.

We create another user, to whom Alice will talk, and then create a conversation between the two using a unique ID. Once the conversation is created, we set the participants and then create the chatbox for that conversation. After creating the chatbox, we mount it inside the div with the id ‘talkjs-container’.

In this case, Sebastian is the person to whom we are talking to. In production, he would be a client who wants to chat with the service provider.

Lastly we create a variable to hold the chatbox and then mount it.

After following these steps the chatbox should look like this:

Adding Features

To give the customer support chat a more human feel we want to add a profile picture to the user. To do this we include a photoUrl property in the User Object, which is a link to the profile picture. If nothing is specified here, by default it displays the initials of the user.

We can edit the code like this:

var me = new Talk.User({
    id: "103489",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: "/https://talkjs.com/images/avatar.jpg"
});

We also want to add a default message that a customer sees when they open the chat, for example containing a link to docs, availability or other resources. ( Such as you see on the TalkJS live chat).

To do this we use the setAttributes method. ConversationBuilder.setAttributes can also be used to set a subject, and even a display picture of the whole chat, as opposed to the profile pictures on individual participants.

So we add the following code:

conversation.setAttributes({
    subject: "Team TalkJS",
    photoUrl: "https://talkjs.com/images/logo.jpg", // Should be an absolute path
    welcomeMessages: [
        "Hi, welcome. We are usually online during working hours but feel free to leave a message at any time.",
        "You can also check our <https://example.com/docs|docs>" 
    ]
})

The chat will now look like this:

At this point let us create 2 more users to simulate a real support conversation. Add the following code:

var other1 = new Talk.User({
    id: '237644',
    name: 'Jon',
    email: 'jon@example.com'
});
var other2 = new Talk.User({
    id: '2267363',
    name: 'Chloe',
    email: 'chloe@example.com'
});

After simulating a couple of conversations we'll get a screen like this:

Additionally we want to allow customers to send attachments. These attachments are tied to user Roles, allowing certain groups of users to send attachments, while restricting others. So we navigate to the dashboard and create a new role, let's call it customer and then make sure the Allow file sharing box is marked.

We should also go back to the user variables and add the role property. The code for the users will now look like this:

var other = new Talk.User({
    id: "854791",
    name: "Sebastian",
    email: "sebastian@example.com",
    role: "customer"
});

The chatbox will now have a small + button on the typing field that allows the customer to attach a file, as shown below:

By default the chat is an Inbox UI panel. However for most customer support live chats, the popup can be minimised. We want to implement this popup for the customer-facing side of the app, while maintaining the inbox interface for the support staff.

To implement the popup interface we use Session.createPopup to create it, and then call it using mount.

In the customer facing code we can replace:

const inbox = talkSession.createInbox({ selected: conversation });
inbox.mount(document.getElementById('talkjs-container'));

with:

const chatPopup = talkSession.createPopup(conversation);
chatPopup.mount({ show: true });

The customer facing chat UI is now a popup that looks as shown below:

Styling

TalkJS comes with a configurable UI and it is up to the developer to tweak it in the Theme Editor to get a particular look. The Theme Editor allows editing using CSS. By targeting relevant CSS classes, it is fast and easy to make edits in the layouts.

In this tutorial we will only apply minimal styling just to show what is possible.

In the TalkJS dashboard we navigate to Theme Editor and to the ChatHeader Component.

The `ChatHeader` component

The ChatHeader component contains the UI code for the chatbox or inbox header.

We want to remove the names of the chat participants and only leave the subject. In the Theme Editor templates the names of the participants are rendered as a subtitle of the chat. To remove the subtitle we need to delete line 45:

<div class="subtitle">{{ names }}</div>

We also want to get rid of the search box, so that the chat looks like the TalkJS one.

In line 52 we can delete the following code, which removes the search icon:

<SearchButton t:if="{{ showSearchButton }}" class="action-button">
    <Icon type="search" />
</SearchButton>

The chat pop up will look like this:

The service provider backend is still an inbox with the ability to support multiple conversations as shown below:

We have only scratched the surface of what is possible using the Theme Editor, many more possibilities exist. For example, one can style it to look like WhatsApp, or Discord, or Slack.

Conclusion

Hope you had a great time coding! We know this is a pretty basic customer support setup but one that will do the job, you can get it working in a few hours and it's working pretty fine for the technical support here at TalkJS.

How to build a live comments section similar to Youtube Live

Tawanda — Thu, 23 Sep 2021 08:51:54 +0000

Let us imagine you are running an online class on cooking, where you deliver live lessons via video, like Youtube. You might need a real time chat that allows your students to comment in real-time as they follow along. In this tutorial we'll show how to build a group chat with live comments inspired by Youtube Live using the TalkJS API and The Theme Editor.

Let's get started.

Setting Up Our Project

We need to do the following:

Create a group conversation.
Create role(s).
Create and customize our theme for the role(s).

Creating a group conversation

First we'll create a group conversation with multiple users. This is covered in the Group Chats docs. Remember to use your TalkJS appId, this is found in the dashboard. You may want to add the photoUrl property to each user so they get an avatar. Free images can be found on places like pexels, unsplash etc.

We can specify a subject using session.setAttributes. We then use the chatbox UI mode to render our chat:

Talk.ready.then(function() {
    ...
    conversation.setAttributes({
        subject: "Cooking With Alice"
    });
    var chatbox = talkSession.createChatbox(conversation);
    chatbox.mount(document.getElementById("talkjs-container"));
})

Our chat will look like this:

Creating Roles

Now we need to create roles for our users in the dashboard. In the header of the dashboard, click on Roles and add a new role. You can name this whatever you want, for example "youtube".

We then need to add the role property to our users, and specify it to be our newly created role, in our case youtube.

var me = new Talk.User({
    id: "123456",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: "/path_to_photo",
    role: "youtube"
});

....

var other1 = new Talk.User({
    id: "234567",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: "",
    role: "youtube"
});

Activating a theme

The theme that is used to display a TalkJS chat UI depends on the current user's role. If no role is set, the default theme is used.

To configure a theme for a role, go to dashboard, and click Roles, then create or select a role and scroll down to the "UI Theme" section and click on edit.

Customizing our Theme

Now that we have our role all set up, we can customise our layout to look better using the Theme Editor. We'll draw some inspiration from Youtube Live's chat feature.

Things To Do

Change Font to Youtube's font
Remove rounded corners from the chatbox
Remove Avatar and group member names
Change header background color to white
Have all messages on the left side and remove timestamp
Remove the backgrounds on chat bubbles
Display message text next to the username
Reduce gap between messages

The `Chatbox` Layout

We start by customizing the whole chatbox to get it closer to the Youtube one.
The first thing we'll do is change the font to Roboto. So in our Theme Editor we navigate to Layouts >> Global and change the font to Roboto.

In the Panels section of Layouts we can delete the value in the borderRadius field or set it to zero to remove the rounded corners.

We also have to give the whole Chatbox a faint grey background, (#f9f9f9), and change the Panel Footer to a backgroundColor of white (#fff).

The `ChatHeader` Component

The ChatHeader component contains the UI code for the chatbox or inbox header. We can delete the following lines 38-40, to get rid of the avatar :

<div class="image">
    <ConversationImage conversation="{{conversation }}" />
</div>

To remove the user lists we need to delete line 41:

<div class="subtitle">{{ names }}</div>

We then scroll down to the .header class and and change the background-color to #FFF (white) from the default gray and then add a border-bottom of 1px solid #FAFAFA. This gives the header a faint gray bottom border.

Our chatbox panel now looks like so:

The `UserMessage` Component

In the Theme Editor, we navigate to the UserMessage component. This is where most of the code for our UI lives.

We want all our messages to be on the left side. To achieve this we find the .message-row.by-me class (line 90) and delete it or remove the flex-direction property.

We then replace lines 67 -71:

<div t:if="{{ sender.isMe == false and conversation.others.length > 1 }}"
    class="message-author"
    style="color: {{ sender.id | random_color }}">
    {{ sender.name }}
</div>

with:

<div t:if="{{ conversation.others.length > 0 }}" class="message-author"
    style="color: gray; font-size: 13px">
   {{ sender.name }}
</div>

This changes the randomly assigned username colors to a fixed gray one and sets a font size of 13px.

We then remove the timestamps and status ticks from the chats by navigating to line 73 and deleting timestamp="{{ timestamp }}" floatTimestamp="auto" showStatus="{{ sender.isMe }}".

<MessageBody body="{{ body }}" timestamp="{{ timestamp }}" floatTimestamp="auto" showStatus="{{ sender.isMe }}" isLongEmailMessage="{{isLongEmailMessage}}" />

Our chat will look like this:

We have made some progress, but we still need to have our texts show up next to the avatar like on Youtube, and remove the chat bubble backgrounds.

To have our messages float besides the username, we go to the .message class and add the following:

display: flex;

We also want to remove the border properties, so we delete the associated border properties, ie border-radius, border-width and border-style. We also delete background-color. The message class should look like so:


.message {
    white-space: normal;
    overflow: hidden;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
    border-color: #E7ECEE;
    color: #111;
    display: flex;
}

Still in the UserMessage component, we find the class .by-me.message and delete the border-color and background-color properties. We also change the color property to match the default text, in this case a shade of black (#111).

Edit the .message-row class to:

margin-bottom: 0.5rem;
margin-top: 0.5rem;
display: flex;

Our Chat UI will look like this:

Wrapping Up

We need to do a few final tweaks to move our messages closer to the usernames. For this we navigate to the MessageBody subcomponent and change the .text class padding property to

.text { padding: 0.5rem 0 0 0; }

We also need to delete the .by-other .message class to better align the messages.

Lastly we can go to the Avatar top level component and change the .avatar width and height to 2rem to make the avatars a little smaller.

At which point our chat UI would look like this:

So there we have it, our final live comments chatroom inspired by Youtube and built using the TalkJS API.

You can further customise it to achieve your desired look, including adding unread message counters, changing fonts and more, or even make it look like WhatsApp or Discord all while using the Theme Editor and the TalkJS API. TalkJS is extremely flexible and allows you to build many different kinds of layouts in a short time.

DEV Community: Tawanda

How to customize email notifications in TalkJS

Customizing TalkJS Email Notifications

How to Change the Email Body

How to create a Role

Changing Email Body

Advanced Email Body Customization

How to add chat into a Spring Boot App

Note

Setting up the Spring Boot Application

Creating the Model and Repository

Creating the Controller

Creating users using the API and verifying them

Setting up the TalkJS application

Conclusion

How to create a group chat with a chat API

Setting up the group chat

Creating roles

Customizing the UI with TalkJS Themes

Create a direct message chat with a contact list using TalkJS

Setting up our chat

The contact list

Styling the contact list

Loading the chatbox

Connecting the chatbox to the contact list

Further customizations

How to build a custom support chat solution with TalkJS

Things to do

Setting up the chat

Adding Features

Styling

The ChatHeader component

Conclusion

How to build a live comments section similar to Youtube Live

Setting Up Our Project

Creating a group conversation

Creating Roles

Activating a theme

Customizing our Theme

Things To Do

The Chatbox Layout

The ChatHeader Component

The UserMessage Component

Wrapping Up

The `ChatHeader` component

The `Chatbox` Layout

The `ChatHeader` Component

The `UserMessage` Component