「react-mebo-chatbot」はReactで開発したプロジェクトに、スピーディにチャットボットを設置するためのReactコンポーネントです。mebo(ミーボ)という、チャットボット構築サービスで作成したチャットボットを簡単にサイトへ埋め込めます。
公式サイト
https://mebo.work
公式ガイド
https://zenn.dev/makunugi/books/f3d9eb62b6d133
meboはプログラミング不要で簡単に会話型AI(チャットボット)を構築することができるWebサービスです。短時間で様々な用途に活用ができる会話型AIを構築できます。
Reactで開発したWebページの右下にチャットボット呼び出し用のボタンを設置します。
詳細は後述しますが、ボタンのデザインは変更が可能です。
meboで作成したチャットボットを簡単にReact製のWebサービスで利用できます。
公式サイトの右下にあるボタンから、実際の挙動をご覧いただけます。 https://mebo.work
こちらからミーボを利用して、チャットボットを作成してください。
チャットボットの作成の詳細は公式ガイドをご参照ください。
https://zenn.dev/makunugi/books/f3d9eb62b6d133
チャットボットを作成したら、公開設定画面(要ログイン)にてチャットボットを「一般公開」してください。
公開ができると、チャットページのURLが取得できます。
npm経由
npm install react-mebo-chatbot
yarn経由
yarn add react-mebo-chatbot
import
import { ChatBoxImageButton, ChatBoxTextButton } from "react-mebo-chatbot"
コンポーネントは2種類あります。
- ChatBoxImageButton
- ChatBoxTextButton
これらいずれかのコンポーネントをrootページもしくはチャットボットを設置したいページへ追加します。
<ChatBoxTextButton
buttonWidth={200}
buttonHeight={80}
chatSrc='<チャットページのURL>'
buttonLabel='DEMO用の会話AIと話す'
buttonBorderRadius={10}
chatHeaderColor={"#303f9f"}
chatHeaderTitle={"DEMO用のチャットボット"}
/>
ページ右下にチャットボット表示用の「画像」を設置します。
実装例 (最小設定 ※必須の項目のみ指定)
<ChatBoxImageButton
chatSrc='<チャットページのURL>'
imageButtonImage='<画像のURL>'
/>
パラメータ一覧
// チャットボットの公開URLを指定
chatSrc: string; 👈 必須
// チャット画面表示ボタンのプロパティ
imageButtonImage: string; 👈 必須 // 画像のsrc (URL)
buttonWidth?: number; // ボタンのWidth
buttonHeight?: number;// ボタンのHeight
buttonBorderRadius?: number; // ボタンのRadius
buttonMerginRight?: number; // ボタンの右下のマージン
buttonMerginBottom?: number; // ボタンの下のマージン
// チャット画面のヘッダー用プロパティ
chatHeaderColor?: string; // チャット画面のヘッダーの色
chatHeaderTitle?: string; // チャット画面のヘッダーのタイトル
// チャットボットのウィンドウの表示イベント
onChatBoxOpend?: () => void;
onChatBoxClosed?: () => void;
ページ右下にチャットボット表示用のテキスト付きのボタンを設置します。
実装例 (最小設定 ※必須の項目のみ指定)
<ChatBoxTextButton
chatSrc='<チャットページのURL>'
buttonLabel='<ボタンに表示する文言>'
/>
パラメータ一覧
// チャットボットの公開URLを指定
chatSrc: string; 👈 必須
// チャット画面表示ボタンのプロパティ
buttonTextColor?: string; // ボタンのテキストカラー
buttonBackgroundColor?: string; // ボタンの背景色
buttonLabel: string; 👈 必須 // ボタンの文言
buttonWidth?: number; // ボタンのWidth
buttonHeight?: number;// ボタンのHeight
buttonBorderRadius?: number; // ボタンのRadius
buttonMerginRight?: number; // ボタンの右下のマージン
buttonMerginBottom?: number; // ボタンの下のマージン
buttonFontSize?: number; // ボタンのフォントサイズ
// チャット画面のヘッダー用プロパティ
chatHeaderColor?: string; // チャット画面のヘッダーの色
chatHeaderTitle?: string; // チャット画面のヘッダーのタイトル
// チャットボットのウィンドウの表示イベント
onChatBoxOpend?: () => void;
onChatBoxClosed?: () => void;
react-mebo-chatbot is licensed under the MIT license.
Copyright © 2022, maKunugi