🙄

React製のWebページにチャットボットを設置できるライブラリを公開しました！

2022/11/20に公開

JavaScript

この記事の要旨

チャットボットを簡単に設置できるReactコンポーネントを公開しました！
「mebo」という会話AI構築サービスで作ったチャットボットを設置できます
チャットボットをいろんな用途でご活用ください！

公開したライブラリ

react-mebo-chatbot

mebo(ミーボ)という会話AI構築サービスで作成したチャットボットを、React製のWebページに簡単に設置できるライブラリです。

ページ右下にチャットボットを開くためのボタンを設置し、ボタンクリックでチャットボットのウィンドウが表示されます。

こちらからデモがご覧いただけます。

利用方法

1. チャットボットの作成

mebo(ミーボ)を利用してチャットボットを作成しましょう。
https://mebo.work/

meboの利用方法はこちらのZenn Booksに記載しています。

2. チャットボットを公開

meboでチャットボットを作成したら、meboの公開設定画面でチャットボットを公開しましょう。

公開をすると、チャットボットの公開URLが入手できるのでコピーします。

3. Reactプロジェクトにチャットボットを設置する

まずは、必要なライブラリをインストールします。

npm経由

npm install react-mebo-chatbot

yarn経由

yarn add react-mebo-chatbot

チャットボットを設置するページのtsxファイルで、必要なコンポーネントをインポートします。

import { ChatBoxImageButton, ChatBoxTextButton } from "react-mebo-chatbot"

インポートができたら、コンポーネントをページの任意の箇所に追加します。

      <ChatBoxTextButton
        buttonWidth={200}
        buttonHeight={80}
        chatSrc='<チャットページのURL>'
        buttonLabel='DEMO用の会話AIと話す'
        buttonBorderRadius={10}
        chatHeaderColor={"#303f9f"}
        chatHeaderTitle={"DEMO用のチャットボット"}
      />

チャットページのURLは、上でコピーしたmeboの公開用のURLです。

コンポーネントの種類

コンポーネントには下記の２種類があります。

ChatBoxImageButton: 自由な画像を利用したチャットボット用のボタン
ChatBoxTextButton: 自由にテキストを設定できるチャットボット用のボタン

ChatBoxImageButton

ページ右下にチャットボット表示用の「画像」を設置します。

実装例 (最小設定 ※必須の項目のみ指定)

      <ChatBoxImageButton
        chatSrc='<チャットページのURL>'
        imageButtonImage='<画像のURL>'
      />

Optionalのパラメータを設定することで、ボタンの見た目をカスタマイズできます。

    // チャットボットの公開URLを指定
    chatSrc: string; 👈 必須

    // チャット画面表示ボタンのプロパティ
    imageButtonImage: string; 👈 必須 // 画像のsrc (URL)
    buttonWidth?: number; // ボタンのWidth
    buttonHeight?: number;// ボタンのHeight
    buttonBorderRadius?: number; // ボタンのRadius
    buttonMerginRight?: number; // ボタンの右下のマージン
    buttonMerginBottom?: number; // ボタンの下のマージン

    // チャット画面のヘッダー用プロパティ
    chatHeaderColor?: string; // チャット画面のヘッダーの色
    chatHeaderTitle?: string; // チャット画面のヘッダーのタイトル

例(100×100の画像を用いたボタン)

      <ChatBoxImageButton
        chatSrc='チャットボットのURL'
        imageButtonImage='画像URL'
        buttonWidth={100}
        buttonHeight={100}
      />

ChatBoxTextButton

ページ右下にチャットボット表示用のテキスト付きのボタンを設置します。

実装例 (最小設定 ※必須の項目のみ指定)

      <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; // チャット画面のヘッダーのタイトル

以上の手順で、Reactのページにチャットボットを設置できます。
meboを利用すると様々なユースケースに対応したチャットボットが簡単に構築できますので、ぜひお試しください！

ご不明な点等ありましたら、お気軽に下記Twitterまでお問い合わせください。
最後までお読みいただきありがとうございました！

Twitter: https://twitter.com/maKunugi