talkweb

ReactTalk – Talkweb Chat Component

Modern, flexible chat widget for React applications.

import { ReactTalk } from "talkweb";
import "talkweb/talkweb.css";

<ReactTalk
  darkModeDisabled={false}
  isSandbox={false}
  blinkTitle={true}
  token={token}
  typeCode={"default"}
  about={
    showAppLink: true,
    headerText:
    "تاک، در سال 1396 متولد شد. این پیام رسان با هدف ایجاد ارتباط عمیق و سازنده و درک نیازمندی‌های سازمانی و غیرسازمانی تولید و توسعه داده شده است. امید است با توجه به شرایط حال حاضر، تاک هر روز در مسیر توسعه پایدار و ایجاد بستری امن و سریع قدمی محکم‌تر بردارد.",
    footerText:
    "برای تماس با واحد پشتیبانی تاک می‌توانید از لینک زیر جهت برقراری ارتباط با کارشناسان مربوطه استفاده نمایید <a target=\"_blank\" href=\"https://tilin.ir/K9kQ78R\" style=\"color:#667085;text-decoration: underline;\">https://tilin.ir/K9kQ78R</a>",
    title: "پیام‌رسان تاک",
    logo: "/assets/logo-talk.svg"
  }
  // bgDarkUrl={"/assets/background/7.webp"}
  bgDarkUrl={"/assets/bg-dark.svg"}
  bgLightUrl={"/assets/bg-light.svg"}
  clearCache={this.clearCache}
  customClassName={style.Podchatbox}
  AsideBanner={<PromoteAppInstallationBanner />}
  ref={this.chatRef}
  {...serverConfig(
    this.switchingAllowence ? IsSandbox : false,
    this.foreignSiteAllowence
  )}
  asyncLogging={{
    consoleLogging: this.switchingAllowence
  }}
  onRetryHook={this.retryHook}
  onTypingHook={this.onTypingHook}
  onSignOutHook={this.signOutHook}
  originalServer
/>;

Features

Light / dark theme support with custom background images Server environment switching (production / sandbox) Custom sidebar banner Typing indicator & retry handling callbacks Async logging control Foreign site / cross-origin support toggle React ref access to chat instance CSS class name overriding

Installation

 npm install talkweb
# or
yarn add talkweb
# or
pnpm add talkweb

import "talkweb/talkweb.css";

Quick start (functional component)

function App() {
  const token = "your-auth-token-here";

  return (
    <div style={{ height: "100vh" }}>
      <ReactTalk
        token={token}
        bgDarkUrl="/assets/bg-dark.svg"
        bgLightUrl="/assets/bg-light.svg"
      />
    </div>
  );
}