DevRevのPLuGウィジェットをWebサイトに埋め込んでみた
こんにちは、昴です。
今回はDevRevのPLuGウィジェットをWebサイトに埋め込んで、問い合わせチャットを表示させてみました。
はじめに
DevRevは、カスタマーサポートとプロダクト開発を一元管理するためのクラウドプラットフォームです。サポートチケットの管理からユーザーフィードバックの収集、開発タスクとの連携まで、一つのツールで対応できます。
その中でもPLuGは、WebサイトやWebアプリに埋め込んで使うカスタマーサポート用のチャットウィジェットです。画面右下にチャットボタンを表示させることで、ユーザーがその場から問い合わせを送れるようになります。ZendeskのWebウィジェットやIntercomのチャットバブルと同じジャンルのものです。
今回は、DevRevのコンソールでPLuGウィジェットを作成し、HTMLファイルに埋め込んで動作確認まで試していきます。
前提・検証環境
本記事の手順を進めるにあたり、以下の環境および権限が必要です。
- DevRevアカウントが開設済みであること
- Adminまたはそれに準じる権限を持つユーザーでログインしていること
- HTMLファイルを作成・編集できる環境があること（VSCodeなど）
- Vercelアカウントが開設済みであること（無料プランで可）
実践
PLuGウィジェットを作成する
まずDevRevコンソールから設定 > PLuG & ポータル > PLuGチャットへ移動し、「+ PLuG ウィジェット」をクリックします。
クリックすると下記のようなPLuGチャットの設定画面が開くので、ここから設定を行っていきます。
設定画面には「ユニークなアプリID」という項目があります。これがPLuGウィジェットをWebサイトに埋め込む際に使用するIDです。コピーボタンをクリックしてコピーしておきます。
画面右側にはウィジェットのプレビューが表示されており、後述するスタイル設定やタブの設定内容をリアルタイムで確認しながら調整できます。
埋め込みコードをHTMLに追加する
PLuG SDKの埋め込みには2つのscriptタグが必要です。<head> 内にSDKの読み込みタグを、<body> 内にアプリIDを使った初期化コードをそれぞれ追加します。
<!DOCTYPE html>
<html>
<head>
<title>PLuGテスト</title>
<script
type="text/javascript"
src="https://plug-platform.devrev.ai/static/plug.js">
</script>
</head>
<body>
<h1>テストページ</h1>
<script>
window.plugSDK.init({
app_id: "先ほどコピーしたアプリIDをここに貼る",
});
</script>
</body>
</html>
app_id の値を先ほどコピーしたアプリIDに置き換えてください。ダブルクォーテーション（"）は残したままにします。
VercelにデプロイしてHTTPS URLを取得する
今回はVercelを使ってHTMLファイルを公開します。GitHubリポジトリを作成してHTMLファイルをアップロードし、Vercelと連携するだけでHTTPS URLが発行されます。
手順は以下のとおりです。
- GitHubで新しいリポジトリを作成し、index.html をアップロードする
- vercel.com にログインし、「Add New Project」からGitHubリポジトリを選択する
- 「Deploy」をクリックする
デプロイが完了すると https://xxxxx.vercel.app 形式のURLが発行されます。
確認
発行されたVercelのURLをブラウザで開くと、画面右下にPLuGのチャットボタンが表示されます。
ボタンをクリックするとチャットウィンドウが開きます。
「Send us a message」からメッセージを送信すると、DevRev Botから自動返信が届きます。
まとめ
今回はDevRevのPLuGウィジェットをWebサイトに埋め込む手順をご紹介しました。
設定画面でアプリIDを確認し、2つのscriptタグをHTMLに追加するだけでチャットウィジェットを設置できます。file:// では動作しないためVercelなどで公開する必要がある点だけ注意が必要ですが、手順自体はとてもシンプルです。
本ブログが少しでも参考になれば幸いです。
