Integrate chat into your Bildr app with TalkJS

Bildr is an all-in-one no-code platform that allows you to build scalable, data-driven web apps, fast. With TalkJS, you can seamlessly add delightful one-on-one conversations, group chat, or an AI chat bot directly into your Bildr app.

This guide will help you integrate TalkJS chat into your Bildr app. By the end of this guide you will have a working example of TalkJS chat in Bildr.

Prerequisites

To integrate TalkJS chat into Bildr, you’ll need the following:

• A TalkJS account. You can try TalkJS for free.
• A Bildr account with a project to which you would like to add TalkJS chat.

Step 1: Load TalkJS into your Bildr app

Begin by loading TalkJS into your Bildr app.

1. Login to Bildr.
2. From your Bildr dashboard, select the project that you’d like to add TalkJS chat to.
3. In your project workspace, from the Workspaces & Pages section, select the page to which you want to add TalkJS chat.

To add TalkJS to a Bildr app, you need to add custom code. You can add custom code in Bildr in one of the following three ways:

• Use the Run Javascript function (v2) action, which allows you to run a custom-written JavaScript function within a sequence of actions (a ‘Flow’).
• Use the Code block element, which allows you to add a block of code that you can either execute or display.
• Use the New Action Type option, available from the Action menu of your project, which allows you to create a fully custom action type in which to execute your code.

This guide uses the Code block element, but you can use any of these options that fits your project best.

4. From the Element menu item, choose Insert Element.
5. From the Drag & Drop Elements menu that opens, in the Embeds section, select Code Block and drag it on to your page.

6. Select your code block to open its settings. In the Properties tab, under Tag Name, select ‘script’ from the dropdown menu.

7. In the same tab, in the Raw Code section, add the following code snippet:

<!-- minified snippet to load TalkJS without delaying your page -->
(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,[]);

8. Save your changes.

While it doesn’t show up in the preview yet, you’re now loading TalkJS onto your page in your Bildr app.

Step 2: Add a container element to display your chat

Next, add a container to display TalkJS chat in your Bildr app.

1. From the Element menu item, choose Insert Element, select Code Block and drag it on to your page.
2. Select your code block to open its settings. In the Properties tab, under Tag Name, select ‘div’ from the dropdown menu.
3. In the Raw Code section, add the following code snippet:

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

4. Save your changes.

You now have a container to display TalkJS chat in your Bildr app. Your preview should show a ‘Loading chat…’ placeholder text.

Step 3: Initialize a chat session

Initialize a TalkJS chat session in your app.

1. From the Element menu item, choose Insert Element, select Code Block and drag it on to your page.
2. Select your code block to open its settings. In the Properties tab, under Tag Name, select ‘script’ from the dropdown menu.
3. In the Raw Code section, add the following code snippet:

<!-- initialize TalkJS -->
await Talk.ready;
const me = new Talk.User({
  id: '123456',
  name: 'Alice',
  email: 'alice@example.com',
  photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
  welcomeMessage: 'Hey there! How are you? :-)',
});
const session = new Talk.Session({
  appId: 'YOUR_APP_ID',
  me: me,
});
const other = new Talk.User({
  id: 'ravi',
  name: 'Ravi',
  email: 'Ravi@example.com',
  photoUrl: 'https://talkjs.com/images/avatar-6.jpg',
  welcomeMessage: 'Hey, how can I help?',
});

const conversation = session.getOrCreateConversation(
  Talk.oneOnOneId(me, other)
);
conversation.setParticipant(me);
conversation.setParticipant(other);

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

4. In this code snippet, replace APP_ID with your own app ID. You can find your app ID on the Settings page of your TalkJS dashboard.
5. Save your changes.

You now have a working TalkJS chat on your page. To try out your chat interactively, open your page from the Preview menu, and type a message in the chat.

The current code creates a chat box UI. If you’d like to have a different chat UI, you can choose from a range of pre-built chat UIs, including an inbox with a list of conversations, and a pop-up widget.

In addition to one-on-one chats, you can also create group chats.

Step 4: Add your own user data

The current example of a TalkJS chat in your Bildr app works with hard-coded dummy data for both users and the conversation. To replace these hard-coded values with your own user data, you can use Bildr’s data collections.

Bildr automatically creates a ‘Users’ database collection for each project. You can access your empty user data collection from your project navigation, by selecting either Data Collections or Users.

You can update both the fields of a user record, and manually add new users to your Users data collection.

A user record in Bildr has a number of default fields, including id, createdDate, and status. You can add your own custom fields to these default ones, as follows:

1. Go to your Users data collection, and select the new field button.
2. In the ‘Create a new field’ pop-up that appears, specify the Name and the Type of value for the field that you want to add, and select create new field button. Fields for a User in TalkJS are the following (fields marked with * are required for the chat to function):

• id*
• name*
• email
• phone
• photoUrl
• locale
• welcomeMessage
• role
• custom

3. To manually add records for actual users to your collection, select + new user.
4. In the pop-up that appears for the new user, fill out the user’s login ID, and optionally a password and a duration after which to timeout a user’s session. Confirm the details by selecting create end user.
5. To fill out or update other fields in the newly created user record, select the ‘edit’ icon at the beginning of the user record. Close the user record once you’re done editing.

You now have a collection of user data in Bildr that you can dynamically load and access throughout your app — both in regular Bildr page elements, and with any custom Javascript code in your project.

To use Bildr variables in your custom code, you’ll need to use one or more Bildr API (bapi) helper functions. Using methods such as setPageVariable and getPageVariable, you can set a variable on a page, as well as search for and return a page variable from a page.

For more information on using bapi helper functions, as well as working with data collections and variables in Bildr, see:

• Documentation for the Bildr API (bapi): Bildr Helper Extensions
• Bildr Default & Custom Data Collections
• Filter & Bind your Data Collections into Your Pages
• Setting & Clearing Variables in Bildr
• Use Variables in Actions  - Set Elements, Capture data, and Conduct Logic

Add chat on multiple pages

If you’d like to add chat to multiple pages throughout your app, you can set one or more of the custom code blocks used to load and display TalkJS into a Bildr block that can be reused anywhere in your project.

Be sure to adjust the user and conversation details for each chat, to match which user should be able to chat with whom, and from which page.

To set a code section as a block, go to the settings section for the code block that you’re editing, and select set as block.

You can now insert this reusable code block into any of your Bildr pages, by going to the Insert menu and selecting Insert Block.

Do you have further questions about integrating TalkJS into Bildr? We’re happy to help. Get in touch.