Skip to main content

React Setup

Use the native component package in React apps: @aithinks/chatbot-react-widget.

Requirements: react and react-dom ≥ 18

Install​

npm install @aithinks/chatbot-react-widget

Props​

PropTypeRequiredDefaultDescription
appIdstringYes—Widget application ID
defaultLanguage'tr' | 'en'No—Default language
useBrowserLanguagebooleanNo—Use the browser language

Usage​

import { Widget } from '@aithinks/chatbot-react-widget';

export default function App() {
  return (
    <Widget
      appId="YOUR_APP_ID"
      defaultLanguage="tr"
      useBrowserLanguage={false}
    />
  );
}

Default export also works:

import Widget from '@aithinks/chatbot-react-widget';

TypeScript​

import { Widget, type IWidget, Language } from '@aithinks/chatbot-react-widget';

const props: IWidget = {
  appId: 'YOUR_APP_ID',
  defaultLanguage: Language.TR, // or 'tr'
  useBrowserLanguage: true,
};

export default function App() {
  return <Widget {...props} />;
}

React + Web Component (optional)​

You can also use the Web Component package inside React; language props are not available as attributes on this package.

import '@aithinks/chatbot-widget-element';

export default function App() {
  return <chatbot-widget appid="YOUR_APP_ID" />;
}

TypeScript JSX type extension:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'chatbot-widget': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          appid: string;
        },
        HTMLElement
      >;
    }
  }
}

Next steps​