Ana içeriğe geç

React Kurulumu

React uygulamalarında native bileşen paketini kullanın: @aithinks/chatbot-react-widget.

Gereksinimler: react ve react-dom ≥ 18

Kurulum​

npm install @aithinks/chatbot-react-widget

Props​

PropTipZorunluVarsayılanAçıklama
appIdstringEvet—Widget uygulama kimliği
defaultLanguage'tr' | 'en'Hayır—Varsayılan dil
useBrowserLanguagebooleanHayır—Tarayıcı dilini kullan

Kullanım​

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

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

Default export da kullanılabilir:

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, // veya 'tr'
  useBrowserLanguage: true,
};

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

React + Web Component (opsiyonel)​

İsterseniz Web Component paketini de React içinde kullanabilirsiniz; dil prop’ları bu pakette attribute olarak yoktur.

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

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

TypeScript JSX tip genişletmesi:

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

Sonraki adımlar​