zoho-chat 中文文档教程

发布于 2年前 浏览 15 项目主页 更新于 2年前

Zoho-chat React 组件

您可以在此处查看实时 Storybook

安装:

  # NPM
  npm install zoho-chat

  # Yarn
  yarn add zoho-chat

用法:

  <ZohoChat
    url={"<Your URL>"}
    widgetCode={"<Your widget code>"}
  />

输入道具

interface Props{
  widgetCode: string;
  url: string;
  onlineIcon?: string;
  offlineIcon?: string;
  language?: Languages;
  position?:
    | 'topright'
    | 'topleft'
    | 'bottomright'
    | 'bottomleft'
    | 'right'
    | 'left';
  visible?: 'hide' | 'show' | number;
}

type Languages =
  | 'en'
  | 'fr'
  | 'de'
  | 'es'
  | 'nl'
  | 'nb'
  | 'tr'
  | 'ru'
  | 'pt'
  | 'it'
  | 'ko'
  | 'ja'
  | 'da'
  | 'pl'
  | 'ar'
  | 'hu'
  | 'pt_PT'
  | 'zh'
  | 'iw'
  | 'ga'
  | 'ro'
  | 'th'
  | 'sv'
  | 'el'
  | 'cs'
  | 'sk'
  | 'hr'
  | 'hy'
  | 'ka'
  | 'fa_IR'
  | 'bg';

您还可以使用自定义组件打开聊天框,有一个自定义挂钩,您可以像这样使用它:

import { useZohoChat, ZohoChat } from 'zoho-chat';

function App() {
  const { click, ready } = useZohoChat();

  return (
    <>
      <ZohoChat
        url={"<Your URL>"}
        widgetCode={"<Your widget code>"}
        visible={'hide'}
      />
      {ready && (
        <button onClick={click}>
          {"It's a custom component => click to Open!"}
        </button>
      )}
    </>
  );
}

export default App;

Zoho-chat react component

You can check live Storybook here

Install:

  # NPM
  npm install zoho-chat

  # Yarn
  yarn add zoho-chat

Usage:

  <ZohoChat
    url={"<Your URL>"}
    widgetCode={"<Your widget code>"}
  />

Input props

interface Props{
  widgetCode: string;
  url: string;
  onlineIcon?: string;
  offlineIcon?: string;
  language?: Languages;
  position?:
    | 'topright'
    | 'topleft'
    | 'bottomright'
    | 'bottomleft'
    | 'right'
    | 'left';
  visible?: 'hide' | 'show' | number;
}

type Languages =
  | 'en'
  | 'fr'
  | 'de'
  | 'es'
  | 'nl'
  | 'nb'
  | 'tr'
  | 'ru'
  | 'pt'
  | 'it'
  | 'ko'
  | 'ja'
  | 'da'
  | 'pl'
  | 'ar'
  | 'hu'
  | 'pt_PT'
  | 'zh'
  | 'iw'
  | 'ga'
  | 'ro'
  | 'th'
  | 'sv'
  | 'el'
  | 'cs'
  | 'sk'
  | 'hr'
  | 'hy'
  | 'ka'
  | 'fa_IR'
  | 'bg';

Also you can use your custom component to open chat box, there is a custom hook and you can user it like this:

import { useZohoChat, ZohoChat } from 'zoho-chat';

function App() {
  const { click, ready } = useZohoChat();

  return (
    <>
      <ZohoChat
        url={"<Your URL>"}
        widgetCode={"<Your widget code>"}
        visible={'hide'}
      />
      {ready && (
        <button onClick={click}>
          {"It's a custom component => click to Open!"}
        </button>
      )}
    </>
  );
}

export default App;
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文