Ionic chat with TalkJS: no separate SDK needed

Ionic React

Install the React components and the Data API, as the React getting-started guide does:

npm install @talkjs/react-components @talkjs/core

Then add a chat page. This is the page we ran:

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { Chatbox } from '@talkjs/react-components';
import '@talkjs/react-components/default.css';
import { getTalkSession } from '@talkjs/core';
import { useEffect } from 'react';

const appId = '<APP_ID>';
const userId = 'sample_user_alice';
const otherUserId = 'sample_user_sebastian';
const conversationId = 'sample_conversation';

export default function ChatPage() {
  useEffect(() => {
    const session = getTalkSession({ appId, userId });
    session.currentUser.createIfNotExists({ name: 'Alice' });
    session.user(otherUserId).createIfNotExists({ name: 'Sebastian' });
    const conversation = session.conversation(conversationId);
    conversation.createIfNotExists();
    conversation.participant(otherUserId).createIfNotExists();
  }, []);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Chat</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent scrollY={false}>
        <Chatbox
          style={{ width: '100%', height: '100%' }}
          appId={appId}
          userId={userId}
          conversationId={conversationId}
        />
      </IonContent>
    </IonPage>
  );
}

Our code, not from the TalkJS docs; the data setup follows the React guide’s createIfNotExists pattern. We ran it in Ionic React 9.0.8 with @talkjs/react-components 0.3.11 on Oct 20, 2026.

scrollY={false} stops ion-content from scrolling, so only the chat’s own message list scrolls. Swap Alice and Sebastian for your own users when you wire up login.

In Chrome at phone size (390 by 844), the chat filled ion-content exactly, 788 of 788 pixels, with the composer at the bottom. Sent messages survived a reload, and a message we posted from the server as Sebastian arrived live.

More on the React side: React chat with TalkJS.

Ionic Angular

Same chat, as a web component. Install the packages from the Angular getting-started guide:

npm install @talkjs/web-components @talkjs/core

The page is a standalone component with CUSTOM_ELEMENTS_SCHEMA. The Angular guide says to add it “to the @Component.schemas array of the Angular component to which you’re adding the chat,” so Angular recognizes <t-chatbox>.

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonContent } from '@ionic/angular/ion-content';
import { IonHeader } from '@ionic/angular/ion-header';
import { IonTitle } from '@ionic/angular/ion-title';
import { IonToolbar } from '@ionic/angular/ion-toolbar';
import '@talkjs/web-components';
import '@talkjs/web-components/default.css';
import { getTalkSession } from '@talkjs/core';

@Component({
  selector: 'app-chat',
  imports: [IonHeader, IonToolbar, IonTitle, IonContent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <ion-header>
      <ion-toolbar><ion-title>Chat</ion-title></ion-toolbar>
    </ion-header>
    <ion-content [scrollY]="false">
      <t-chatbox
        style="width: 100%; height: 100%;"
        [app-id]="appId"
        [user-id]="userId"
        [conversation-id]="conversationId"
      />
    </ion-content>
  `,
})
export class ChatPage {
  appId = '<APP_ID>';
  userId = 'sample_user_alice';
  otherUserId = 'sample_user_sebastian';
  conversationId = 'sample_conversation';

  ngOnInit() {
    const session = getTalkSession({ appId: this.appId, userId: this.userId });
    session.currentUser.createIfNotExists({ name: 'Alice' });
    session.user(this.otherUserId).createIfNotExists({ name: 'Sebastian' });
    const conversation = session.conversation(this.conversationId);
    conversation.createIfNotExists();
    conversation.participant(this.otherUserId).createIfNotExists();
  }
}

Ours too. We ran it in Ionic Angular 9.0.8 on Oct 20, 2026, then added the data setup (the Angular guide’s pattern) and compiled it again.

The imports use Ionic 9’s per-component paths. Ionic 8 apps import from @ionic/angular/standalone, so import the Ionic components the way your app already does.

Two things tripped us up. First, on Angular 22 the build failed on the default.css import (TypeScript error TS2882) until we added a one-line type declaration in src/css.d.ts. That line is ours too:

declare module '*.css';

Second, the page needs the ion-page class. With the component placed straight inside ion-app, the chat was 56 px tall and only its header showed. Routed through ion-router-outlet, the host element gets ion-page from Ionic and the chat filled the screen. Outside the router, add class="ion-page" to the host yourself; we only tested the routed version.

For Angular without Ionic, see Angular chat with TalkJS.

Ionic Vue

Install the same two packages as Angular, from the Vue getting-started guide:

npm install @talkjs/web-components @talkjs/core

Vue needs one setting, and here Ionic Vue differs from the Vue guide. The guide’s Vite config treats every tag with a - in its name as a custom element. In Ionic Vue, that also matches ion-page, ion-content and the other Ionic tags, so Vue treats Ionic’s own tags as plain HTML and never uses the Ionic Vue components. Match only the TalkJS tags, in vite.config.ts:

import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // only TalkJS tags (t-chatbox, t-inbox, ...) are custom elements
          isCustomElement: (tag) => tag.startsWith('t-'),
        },
      },
    }),
  ],
};

This is the Vue guide’s Vite config with one line changed, the commented one. The change is ours.

Then the page:

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import '@talkjs/web-components';
import '@talkjs/web-components/default.css';
import { getTalkSession } from '@talkjs/core';

const appId = '<APP_ID>';
const userId = 'sample_user_alice';
const otherUserId = 'sample_user_sebastian';
const conversationId = 'sample_conversation';

const session = getTalkSession({ appId, userId });
session.currentUser.createIfNotExists({ name: 'Alice' });
session.user(otherUserId).createIfNotExists({ name: 'Sebastian' });
const conversation = session.conversation(conversationId);
conversation.createIfNotExists();
conversation.participant(otherUserId).createIfNotExists();
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar><ion-title>Chat</ion-title></ion-toolbar>
    </ion-header>
    <ion-content :scroll-y="false">
      <t-chatbox
        style="width: 100%; height: 100%;"
        :app-id="appId"
        :user-id="userId"
        :conversation-id="conversationId"
      />
    </ion-content>
  </ion-page>
</template>

We wrote this page too. On Oct 20, 2026, we compiled it with Vue’s SFC compiler (3.5.44) under both rules. With ours, every ion- tag went through its Ionic Vue component; with the guide’s, none did.

For Vue without Ionic, see Vue.js chat with TalkJS.

Before you go live: sign user tokens

The samples above run with authentication off, which is how new TalkJS accounts start. Before launch, your server signs a JWT for each user with your secret key, and the app passes it to the session with setToken. The secret key never goes in the app. To refresh tokens, set onNeedToken once, as in this sample from the advanced authentication docs:

// You only need to set `onNeedToken` once,
// not every time you call `getTalkSession`
const session = getTalkSession({
  appId: '<APP_ID>',
  userId: '<USER_ID>',
});

session.onNeedToken = async () => {
  // Fetch the token from your endpoint
  const response = await fetch('https://<YOUR_DOMAIN>/talkjs/auth');
  const token = await response.text();

  // Pass it to the session
  session.setToken(token);
};

The authentication guide shows the server side; its example tokens expire after 24 hours. When the token flow works, turn on authentication on the Settings page of your dashboard, under Security settings.