メインコンテンツにスキップ
すべてのコレクションチャットボットのリリースFacebook版
WEBサイトへのチャットボット設置方法(Facebookチャットプラグイン)
WEBサイトへのチャットボット設置方法(Facebookチャットプラグイン)

Facebookチャットプラグインを使って作成したボットを自社サイトやWEBページに設置し、より多くのユーザーさんに自動応答ボットを体験していただきましょう。

CrafterSupport avatar
対応者:CrafterSupport
1年以上前に更新

自社のホームページに訪問してくれたお客様にもチャットボットを利用してもらってコンバージョンに繋げたくありませんか?

Facebookでチャットボットを作った際、必ずホームページに設置してほしいのがこちら右下のプラグインです。

このプラグインによって、サイトの訪問者は下の画像のように、Facebookアカウントを利用して、またはログインせずゲストとしてボットと会話することができます。

※2020年Facebookのアップデートにより、ホームページに訪れた方がFacebookやMessengerアカウントを持っていなくてもゲストユーザーとしてチャットしてボットと会話をすることができるようになりました。

CraftChatではこれを設置することで、ページ訪問者のおよそ10%がチャットに話しかけてくれるようになりました。

こちらをセットアップする方法は、とても簡単です。

目次

1.Facebookページでの設定の変更・ソースコードの発行

Facebookページの「設定」画面に遷移してください。

※管理者の場合、Facebook内にて「ページ名」を検索するとこちらの画面が表示されます。

左側にあるメニューの下までいき、「設定」をクリックしてください。

そうすると、「ページ設定」>「一般」に自動で遷移します。

「一般」の中にある「メッセージ」を「編集」し、「ページにメッセージボタンを配置して、閲覧者からの非公開メッセージを受け付ける」にチェックが入っていることを確認してください。

(もしチェックがなければ、チェックを入れて、「変更を保存」してください)

その次に、「メッセージ」をクリックください。

下にスクロールすると、「ウェブサイトにMessengerを追加」という項目があります。こちらの「利用を開始」をクリックしてください。

「チャットプラグインの設定」というポップアップが表示されるので、右下にある「次へ」をクリック

言語を「日本語」に選択し、「あいさつ」は右下に表示する言葉(例:こんにちは!ご質問がありますでしょうか?)などを記述し「保存」してください。

右側にあるシミュレーションで表示を確認した後、「次へ」をクリックしてください。

次は色などデザインの変更ができます。特に色などにこだわりがない場合は、そのままでも大丈夫です。よければ「次へ」をクリック。

これで、ウェブサイトに貼り付けるコードができます!

「ウェブサイトドメイン」には、このチャットプラグインを表示したいウェブやサービスサイトのURLを入れて保存してください。写真では「https://craftchat.ai」を入れていますが、皆さんは自社サイトのURLをhttpsから入れて保存してください。

2.Facebookページで生成されたソースコードをサイトに追加する

あとは、「コードスニペット」からソースコードをコピーしましょう。

サイトの<body>タグの後に追加してください。

(WEBページへのプラグイン埋め込みの詳細についてはFacebook公式サイトもご参考ください)

カスタマーチャットプラグインの設置をして、サイト訪問者が話しかけてしまうようなウェブサイトにしましょう!

特定のメッセージからチャットを開始したい場合はWEBサイト設置のボットで特定のメッセージからチャットを開始するをご確認ください。


関連リンク


こちらの回答で解決しましたか?