Tutorials · · 6 min read

How to integrate TalkJS chat into a Bubble app

The purpose of this how-to guide is to help you integrate TalkJS messaging functionality into your no-code Bubble app. By the end of this guide you will have a working example of TalkJS chat in Bubble.

How to integrate TalkJS chat into a Bubble app

Bubble is a no-code platform that allows you to build marketplaces, SaaS apps, dashboards, social networks, CRMs, and other tech products, fast. By integrating TalkJS chat into your Bubble app, you can build one-on-one conversations, group chat, a messaging and notification center, or integrate an AI chat bot with a superior chat experience right from your app—all within minutes, not months.

This how-to guide will help you integrate TalkJS messaging functionality into your Bubble app. By the end of this guide you will have a working example of TalkJS chat in Bubble.

An overview of a Bubble clothing and textile marketplace app. At the top is a navigation menu, search bar, and a button ‘Sell now’. The left half the screen holds a large image of a red and purple cashmere scarf, folded, with product information underneath. To the right of the image is a TalkJS chat box window with the conversation subject ‘Cashmere Scarf - Made in Italy’ and participants talking about details of the product offered.
TalkJS chat integrated into a Bubble clothing and textile marketplace app

Assumptions

For the purposes of this guide, we assume that:

Identification, authentication, and authorization of users in Bubble falls outside the scope of this guide.

1. Create an area for your chat

The first step in integrating TalkJS into your Bubble app is to create an area for the chat in the design of your app. To do so, you will use one of the core building blocks of creating apps in Bubble, namely Elements. To create an area in your app where your chat will live, you will use an HTML element.

<!-- 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>

<!-- 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>
Code snippet to place in your HTML element editor
Bubble app workspace with page and element navigation at the top, and high-level category navigation in the left sidebar. The sidebar shows the options: ‘Design’, ‘Workflow’, ‘Data’, ‘Styles’, ‘Plugins’, ‘Settings’, and ‘Logs’. At the center of the workspace is an HTML element. In the pop-up editor of the HTML element, in the ‘Appearance’ tab, a code snippet is inserted to place a TalkJS chat.
Bubble app workspace with an HTML element and a pop-up element editor

2. Enable Javascript in Bubble

To build your TalkJS app, you’ll need to run Javascript in Bubble. Bubble does not allow you to run Javascript directly. To run Javascript, you will need to install a plugin. In this guide we’ll use the Toolbox plugin, but other plugins are available.

3. Create a chat session

You currently have an area for your TalkJS chat, but no active session with users and messages yet. Let’s change that. You will use Bubble Workflows to add and run the Javascript code needed to create a TalkJS chat session.

Talk.ready.then(function () {
 var me = new Talk.User({
   id: '123456',
   name: 'Priya',
   email: 'priya@example.com',
   photoUrl: 'https://talkjs.com/images/avatar-3.jpg',
 });
 window.talkSession = new Talk.Session({
   appId: '<YOUR_APP_ID>',
   me: me,
 });
 var other = new Talk.User({
   id: '654321',
   name: 'Zadie',
   email: 'zadie@example.com',
   photoUrl: 'https://talkjs.com/images/avatar-2.jpg',
   welcomeMessage: 'Hey, how can I help?',
 });

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

conversation.setAttributes({
 subject: 'New conversation',
});

 conversation.setParticipant(me);
 conversation.setParticipant(other);

 var chatbox = window.talkSession.createChatbox();
 chatbox.select(conversation);
 chatbox.mount(document.getElementById('talkjs-container'));
});
Code snippet to place in the Script section of your Run javascript action editor
Bubble app workspace with page and workflow navigation at the top, and high-level category navigation in the left sidebar. The sidebar shows the options: ‘Design’, ‘Workflow’, ‘Data’, ‘Styles’, ‘Plugins’, ‘Settings’, and ‘Logs’. At the center of the workspace is a gray box with the text “When Page is loaded”, and next to it a box with a dotted outline stating “Click here to add an event”. Underneath the “When Page is loaded” box is a banner containing smaller boxes. The first of these smaller boxes has the text “Step 1 Run javascript” and a delete button, this is followed by an arrow to the next box, with the text “Click here to add an action…”.  At the center is a pop-up editor with the header “Run javascript”, with at the top a field labeled “Script” that contains a TalkJS code snippet.
Bubble app workspace with a Run javascript action and a pop-up action editor
A preview of an otherwise empty Bubble app with TalkJS chat functionality. The preview shows a chat window with a Chatbox UI. At the top of the chat window is a profile image of a person, with next to it the name “Zadie” and a subject header with “New conversation”. An opening message from Zadie states “Hey! How can I help? 🙂”. In the message field, the current user types multiple responses, which are sent to the chat.
A working example of a TalkJS chat in an otherwise empty Bubble app

You have now created a one-on-one chat with a Chatbox UI. TalkJS also allows you to create group chats. And instead of a chat box interface, you can also choose an Inbox UI, which includes a message list and allows users to switch conversations, or a Pop-up UI, which only shows up when a user clicks to open it.

Next steps

You now have a working example of a TalkJS chat in your Bubble app.

The current working example still contains hard-coded dummy data both for users and for the conversation. In a production environment, you will want to replace these hard-coded values with data loaded dynamically from your database. In the code snippet that you entered in the Script editor in the Run javascript action, this concerns the current user of the conversation:

var me = new Talk.User({
   id: '123456',
   name: 'Priya',
   email: 'priya@example.com',
   photoUrl: 'https://talkjs.com/images/avatar-2.jpg',
});
Code snippet that sets data for the current user

The other user in the conversation:

var other = new Talk.User({
  id: '654321',
  name: 'Zadie',
  email: 'zadie@example.com',
  photoUrl: 'https://talkjs.com/images/avatar-3.jpg',
  welcomeMessage: 'Hey, how can I help?',
});
Code snippet that sets data for the other user

The optional conversation subject:

conversation.setAttributes({
 subject: 'New conversation',
});
Code snippet that sets an optional conversation subject

Bubble allows you to fetch user data either directly from your Bubble database, or from a connected external SQL database.

Dynamically loading user data from either a Bubble database or from an external database falls outside of the scope of this how-to guide. For those further steps, Bubble has detailed information in the Bubble manual:

You might also benefit from reading the documentation of the Toolbox plugin, which provides additional instructions on how to load data into Bubble dynamically.


Do you have further questions about integrating TalkJS into Bubble? Get in touch as we’re happy to help.

Read next