zoho-chat 中文文档教程
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;