🤖 How to build a TalkJS component for Adalo

Step-by-step guide to creating a cross-platform component for the Adalo ecosystem.

Hello friends 👋🏿,

Today we're exploring how to build a TalkJS chat component for Adalo. TalkJS offers a ready-to-use chat interface, while Adalo is a no-code platform with a vibrant community seeking new components. Whether you're an independent developer or a SaaS company aiming to tap into the Adalo market, this guide is for you.

We'll cover the basics of creating components, highlighted by code snippets 🤖.

For an in-depth tutorial, refer to the full guide.

What we’ll build

We're creating a component using TalkJS's inbox UI that lets users message each other directly. It will include these features:

---

• Setting up users and participants in the Adalo editor.

• Seeing past conversations.

• Sending messages directly.

• Moving between inbox and chat view.

This guide details building the component step by step. To explore the completed demo code, you can jump straight to the finished version by visiting the repository here.

Prerequisites

Before we begin building, ensure you have:

• A free Adalo account with developer mode on.

• Your preferred IDE (I use Visual Studio Code).

• Node.js version >=10.2.

• A TalkJS account (free and unlimited during development).

• You can find your TalkJS appID by signing into your TalkJS account and navigating to the settings tab in your dashboard.

1. Create a new Adalo library

Create a new Adalo library using the `create-adalo-component` command in your terminal. Replace `chat-component` with whatever you’d like to name your folder.

npx create-adalo-component chat-component

Follow the prompts and make sure you choose “Functional” for the type of react component you would like to use.

2. Configure the manifest.json

Each component comes with a manifest.json file that defines its acceptable properties and the controls displayed in the Adalo editor.

Our chat component requires key inputs: TalkJS Application ID, UserID, and participant details for initiating chats. (🤖)

3. The component’s entry point

We're developing a cross-platform component compatible with iOS, Android, and web. Therefore, certain sections of our code will be exclusive to mobile platforms, while others are tailored for web use.

The `index.js` file in our main components folder is where we define the code and logic for our component, along with reusable code snippets applicable across both platforms.

For this section of the code:

• Install dependencies and transfer an editor image from the demo repository to your src folder for use in the Adalo editor (🤖). Skip installing ConversationUI for now; we'll cover that in the next section.
  

• Import React essentials, destructuring props for Adalo-specific attributes like 'editor' and '_height', and use useState for 'me' and 'other'(🤖).
  

• Set users for TalkJS with `userID`, `name`, and photo URLs; update states with useEffect (🤖).
  

• Show an editor image and an activity indicator for now. We'll discuss the `ConversationUI` component later, so no need to include it yet (🤖).
  

• Export the component for use (🤖).

4. The web version of the component

Create a `ConversationUI` folder for mobile and web versions. Add `index.web.js` for the web component, which will display the inbox and support one-on-one chats.

For this section of the code:

• Import dependencies and install TalkJS by running `npm install talkjs @talkjs/react` in your terminal (🤖).
  

• Define a `ConversationUI` component and its props (🤖).
  

• Use `useCallback` for `syncUser` to sync local users with TalkJS, and define `syncConversation` for chat management between users (🤖).
  

• Configure `Inbox` props, render chat with `Session` and `Inbox`, and export `ConversationUI` (🤖).

5. The mobile version of the component

For the mobile version of our chat component, we'll set up an `index.js` file in the `/ConversationUI` folder

TalkJs's React Native SDK uses two components for the inbox view: Chatbox and ConversationList. Setting `chatView` to true displays the Chatbox, while false shows the ConversationList.

For this section of the code:

• Import essential modules and the TalkJS package. Don’t forget to install TalkJS and dependencies via npm. (🤖)
  

• Create a`InboxHeader.js`(🤖) in the ConversationUI folder so the header on the mobile version matches the web version, and import a ChevronLeft icon (🤖) from a new /icons folder. Import the header into your `index.js` (🤖)
  

• Define `ConversationUI` with props for conversation management and initialize with useEffect based on `chatView` (🤖).
  

• Implement functions for selecting conversations and handling backpresses, then display the chatbox or inbox view as needed. (🤖)

6. Finishing up the main component and the final touches

With both conversational UI components complete, import them into our main component (🤖) and show it in the return (🤖)

Our component also needs install scripts to function on physical devices. These scripts allow for modifications wherever the component is deployed.

Create a new scripts folder and add the android code (🤖) in a file titled `install_android.sh` and the ios (🤖) in an `install_ios.s`

Then make the script executable by running the following in your root directory

chmod +x ./scripts/install_ios.sh 
chmod +x ./scripts/install_android.sh

To ensure Adalo recognizes them during publishing, include these scripts in `adalo.json` under iosInstallScript and androidInstallScript(🤖).

Conclusion

That wraps up the summary. For a more detailed guide, including testing and publishing insights, refer to the full blog post.

What components are you considering for the Adalo ecosystem? I'm eager to hear your feedback if you give it a try!