Webページにチャットボットを埋め込もう!誰でも簡単に対話型人工無能ボットを作れる「Meya.ai」とは? | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

Webページにチャットボットを埋め込もう!誰でも簡単に対話型人工無能ボットを作れる「Meya.ai」とは?

今年、注目のチャットボット。
LINE, Twitter, Facebook, Slack等
様々なツールと連携できるようにもなり、よく目にすることも増えてきました。

MicroSoftの「りんな」のような、対話型ボットをWebサイトに埋め込みたいですよね。

ただ、難しそうですよね。
そんな課題を解決するのがご紹介する「Meya.ai」です。

実際に作りながら、見ていきましょう。

Botプラットフォーム「Meya.ai」とは

対話型人工無能ボットを簡単に作成できるプラットフォームです。

人工知能ではなく、人工無能ですが、
エンジニアでなくても、GUI(ブラウザ操作)だけでチャットボットを作成することができます。

もう一つの特長として、Twitter, Slackなどのチャットツールとも連携が容易であり、
Webサイトにチャットボットツールを搭載できるスニペットも生成してくれます。

また、無料で使用できます。
では、実際に作っていきましょう。

「Meya.ai」のアカウントを作ってみよう

まず、下記のURLにアクセス
https://meya.ai/

top

「GET STARTED」をクリックして、登録画面に進みましょう。

registor

アカウント名とメールアドレスを記入し、[SIGN UP FOR FREE]をクリックします。

complete

アカウント作成が完了しますので、メールを待ちます。

チャットボットを作成しよう!

mail

メールの内容を確認して、赤枠からサインイン画面に遷移してください。

signin

パスワードを記入して、「SET PASSWORD」をクリックします。

account

すると、アカウント画面に遷移するので、
さっそく「CREATE A BOT!」をクリックし、BOTを作っていきましょう。

Bot type

今回は、「WelcomeBot」テンプレートが用意されているので、そちらを選択します。

Bot name

チャットボットの名前を決めます。
今回は、[Test Bot]という名前をつけます。
記入後、「CREATE BOT!」をクリックします。

Bot setting

チャットボットが作成されましたので、設定していきましょう。
「EDIT IN BOT STUDIO」をクリックしてください。

Bot setting

チャットボットの設定画面に入ります。
右側赤枠の「Flows」にyml形式で命令が書かれており、
「Components」にPythonで命令の処理が書かれています。

左側の赤枠は、チャットボットをテストすることができます。
テンプレートとして既に、[start(チュートリアル), gif(gif画像を取得), joke(ジョークを取得), weather(天気を取得)]等のキーワードが用意されておりますので、一度、試しに打ってみてください。

中央の赤枠はコードを書き換えたり、生成したりします。
ここでチャットボットを設定していきます。

ざっと説明しましたので、右上の「NEW FLOW」をクリックして、設定していきましょう。

Bot setting

上記のような画面になりますので、
[INTENT TYPE]を[KEYWORD]に、
[SETTINGS]のコードの”KEYWORD”を”testbot”に変更します。

これでKEYWORDの値をチャットでたたくと、そのキーワードに応じたチャットが返ってきます。

その後、右上の[Hide]をクリックします。

Bot setting

上記の画面になりますので、命令文を書いていきます。

まず、[EMPTY TEMPLATE]をクリックしますとテンプレートが出てくると思います。

コードの”your_flow_name”を”testbot”に変更し、
次に、”first:”を削除します。

最後に[CARDS]の中から[Complete Card]をクリックします。

Code

すると、上記のようなコードになります。
今回は、画像を取得し、その画像に対しての質問を答えれるようにボタンを用意してくれる命令にしました。
[Complete Card]だけではなく、さまざまな処理がありますので、是非、試してみてください。

完了すれば、右上の[SAVE]をクリックします。

Bot setting

それでは、右側のチャット画面からテストしてみましょう。
[testbot]と打ち込み、上記のようにかわいいくまさんの画像がでてきており、
ボタンが2つでてきていれば、完了です。

collaboration

チャットボットはひとまず完成したので、次にWebページに埋め込むためのスクリプトを取得しましょう。
DASHBOARDのIntegrationsからWebを選択します。

collaboration

上記のような画面がでてきますので、
色を変えられたいなら、Enter settingで変更できますが、
とくに変えられないならそのまま[SAVE]をクリックしてください。

collaboration

するとCode snippet でスニペットがでてきますので、
[Copy]をクリックして、スニペットを埋め込みたいサイトに埋め込んでください。

Sample site

実際にスニペット埋め込んだ画面がこちらです。
右下にチャットボットアイコンがでてきています。
こちらをクリックすると、

Sample site

このように、チャット画面がでてきますね。
Webページに埋め込み完了です!

まとめ

いかがでしたでしょうか?

「Meya.ai」の概要から、
Webページにチャットボットを埋め込むまでをご紹介しました。

今回はあまり人工無能について触れていませんが、
設定にこだわると簡単に人工無能チャットボットを作れます。

是非、一度使ってみてください。

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】
メールアドレス【必須】
※携帯・フリーアドレスは不可
電話番号【必須】

利用規約』『プライバシーポリシー』に同意する