シェア:
){kind=small}
Bernard Sledeはサンフランシスコを拠点とするVonageの戦略的パートナーシップ担当ディレクター。キャリアを通じてイノベーションの普及に情熱を注いできた。グローバル・テクノロジーのリーダーであるインテル、HP、ドルビーでイノベーションの職務に携わり、起業家、企業VC、スタートアップ・アドバイザー、取締役としてテクノロジー・エコシステムで活発に活動してきた。パシフィック・サービス信用組合の理事を務める。
VonageコミュニケーションAPIが21世紀のリテール体験を可能にする方法
所要時間：1 分
この記事は、クリス・タンカーリーとの共同執筆によるものです。 クリス・タンカースリー
解決策を検討する前に、業界としての小売業が置かれている状況の深刻さを見てみよう。数年前、ある北米の大手小売企業の取締役が、同僚役員に「大変なことになっている」と憂慮のメールを送った。彼はある店舗を訪れたところ、多くの買い物客が携帯電話を持って歩き回り、商品の写真を撮っているように見えた。困惑した彼は、何人かに何をしているのかと尋ねた。
彼らは実際にスマホを使ってバーコードを読み取り、ライバルのオンラインショップの商品価格をチェックし、スマホで購入を済ませていたのだ。これは事実上、実店舗の小売業者がオンライン競合店のショールームとして機能していることを意味する！ショールーミング」と呼ばれるこの現象は、各小売業者が、もはや自社だけが利益を得ることのできない不動産資産を抱えていることを意味していた。
Covid-19の大流行が数ヶ月間、店舗への来店者数に大きな影響を与え、経済が再開した今、サプライチェーンの問題が増加し、店舗はスタッフの確保に苦労している。
UBSは次のように予測している。今後5年間で、米国だけで50,000店舗が閉鎖されると予測している。では、どうすればドアを開け続け、お客を呼び続けることができるのか？
これまで見てきたように、小売業は「ショールーミング」、フットトラフィックの減少、サプライチェーンの混乱、雇用問題といった大きな課題に直面している。デジタル・コミュニケーションは、新たな体験を可能にすることで、こうした課題の解決に貢献している。
調査によると、Videoを使った商談は、売り手にとって成功する可能性が高い。
ショールーミングの問題に話を戻すと、顧客が店舗にいる間にコミュニケーションを可能にすることで、遠隔地のセールスアシスタントは、センチメントを測定し、躊躇していることを把握し、質問に対応することで、その場で契約を成立させることができる。
例えば、買い物客が本当に比較ショッピングを考えているのであれば、エージェントは店内で買い物客とコミュニケーションを取りながら、即座に価格マッチングを行い、場合によっては配送や設置などの特別なクーポンやプロモーションを投入することもできる。顧客が購入の準備をしている間に、店舗が顧客のニーズに応えることができるのであれば、そうすべきである。
Vonage Video API を使用することで、買い物客は表情やリッチなインタラクションを可能にするものすべてとともに、話している人間を見ることができます。小売業者は、このような会話をビデオに切り替えることで、ROIを簡単に測定することができる（もちろん、買い物客の同意を得て）。
迅速な実装が可能なソリューションを視覚化するために、Vonageがパートナー数社と積極的に取り組んでいるコンタクトセンター増強のシナリオを紹介しよう：
高価なテレビを買おうとしている客が店に入ってきた；
小売業者はテレビにQRコードを貼り付けている；
買い物客はQRコードをスキャンし、携帯電話のウェブページにアクセスする；
このページで、買い物客は電話番号を入力し、Vonage SMSを使ってチャットすることができる。
この記事は、いくつかのギアを回転させるのに役立つことを意図していますが、Vonage APIが小売店とのやり取りでどのように役立つかについてのサンプルコードを見るために使用できるいくつかのサンプルコードがあります。サンプル・アプリケーションでは、Verify APIを使用してユーザーを検証する方法と、Voice APIを使用してサポート・エージェントにブラウザ内で電話をかける方法を紹介します。
Node.js v14以上
コマンドラインインターフェイスは、以下の方法でインストールできます。
npm install @vonage/cli -gコード例このソリューションがエンド・ツー・エンドで動作することを示す
ングロックローカルテスト用
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
このコード例では、Vonage Applicationsを作成する必要があります。アプリケーションを作成するには、コマンドラインインターフェースを使用します。CLIをまだセットアップしていない場合は、ターミナルで次のコマンドを実行してください。 vonage config:set --apiKey=api_key --apiSecret=api_secretここで、API キーとシークレットは、Vonage アカウントの設定にある API キーとシークレットです。 アカウントの設定ページで確認できます。
ローカルでアプリケーションを実行している場合は、ngrokを使用して外部エンドポイントを提供したいでしょう。ngrokのURLか(または他のホスティングのURL)をroutesで指定します。 /webhooks/answerを指定します。 /webhooks/eventsをイベント URL に指定します。
Vonageアプリケーションを作成する必要があります。アプリケーションには、Vonage に接続するために必要なセキュリティと設定情報が含まれています。ターミナルで、以下のコマンドを使用して Vonage アプリケーションを作成し、アンサー URL とイベント URL を ngrok またはホスティング URL に置き換えます：
Vonage Verifyを使用して、チャットリクエストが有効であることを確認することができます。まず、ユーザの電話番号を尋ねる小さなページを作成します：
// src/routes/verify.js
router.get('/', (request, response) => {
response.render('verify/start', {
item_name: request.query.item_name
})
})
// views/verify/start.pug
doctype html
html
head
title Store Chat Login
body
form(method="post")
div
label Enter your mobile phone number to start a chat with #{item_name}
div
input(name="mobile_number")
div
input(type="submit", value="Send Verification Code")ユーザーは自分の電話番号を入力することができ、私たちは確認要求を発射します。これにより、ユーザーの電話番号に4桁のコードが送信され、次の画面で入力できるようになります。
// src/routes/verify.js
router.post('/', (request, response) => {
vonage.verify.request({
number: request.body.mobile_number,
brand: 'Vonage Store Demo',
workflow_id: 6
}, (err, results) => {
if (err) {
console.error(err)
}
request.session.verify_request_id = results.request_id
request.session.mobile_number = request.body.mobile_number
request.session.save()
response.redirect('/verify/check')
})
})
// views/verify/check.pug
doctype html
html
head
title Store Chat Login
body
form(method="post")
div
label Please enter the verification code that was sent to you
div
input(name="verify_pin")
div
input(type="submit", value="Submit Verification Code")ユーザーは、自分のデバイスに送信されたPINを入力することができます。ほとんどの携帯端末はSMSメッセージを受信し、ユーザーがフォームに自動入力することもできます。ユーザーがSMSを受信しない場合、Vonageは携帯電話に電話をかけ、音声通話でPINを提供することも試みます。
// src/routes/verify.js
router.post('/check', async (request, response) => {
vonage.verify.check({
request_id: request.session.verify_request_id,
code: request.body.verify_pin
}, async (err, results) => {
if (err) {
delete request.session.verify_request_id
request.session.save()
} else {
request.session.verified = true
request.session.save()
request.session.user = await getUser(request.session.mobile_number)
response.redirect('/voice')
}
})
})
番号が確認されたら、ユーザを作成し、ユーザが後でブラウザから直接エージェントに電話できるようにします。 getUser()ユーザが存在しない場合は、自動的にユーザを作成します。
同時に、CRMやエージェントシステムと連動して、ユーザーがヘルプを要求したことをエージェントに知らせることができます。
QRコードの情報は、店舗の場所、テレビのブランド、モデル、価格に関する担当者に自動的に渡される。担当者は、買い物客の予備的な質問に答える。タイピングは必ずしも買い物客にとって便利ではないため、担当者はVonageのクリック・ツー・コール機能を使って、シームレスに音声会話に切り替えることができる。これは、顧客が通常のウェブページ、SMS、チャット、あるいは店舗独自のモバイルアプリを使用しているかどうかに関係なく適用されます。
いったんユーザーが認証されると、ウェブページはそのユーザーに私たちのシステムに電話するオプションを与えることができる。
// views/voice/index.pug
doctype html
html
head
title Store Chat Login
script(type="module", src="https://unpkg.com/nexmo-client@latest/dist/nexmoClient.js?module")
body
p
| You are currently logged in as
span(id="username")
p A chat agent will contact you via text shortly.
p
| If you would rather talk to an agent, click
button(type="button", id="call_agent") here
p
button(type="button", id="hangup") Hang Up始めに、ユーザが実際にエージェントにコンタクトしたり、電話を切ったりできるように、ページに2つのボタンを追加します。また、Vonage Client SDKを組み込み、ブラウザ内のメッセージングと音声のバックグラウンド設定を処理します。
ブラウザのコードに関しては、いくつかのことを行う必要がある。JWTと呼ばれる認証トークンを生成する必要がある。このトークンによって、ブラウザはVonage APIへのリクエストを行うことができ、ブラウザ内での呼び出しが容易になります。秘密鍵と呼ばれる秘密のテキスト・ブロックが必要なので、このトークンをサーバーサイドで生成します。
// src/routes/jwt.js
router.get('/jwt', (request, response) => {
const jwt = vonage.generateJwt({
sub: request.session.user.name,
acl: {
paths: {
'/*/users/\*\*': {},
'/*/conversations/**': {},
'/*/sessions/**': {},
'/*/devices/\*\*': {},
'/*/image/**': {},
'/*/media/**': {},
'/*/applications/\*\*': {},
'/*/push/**': {},
'/*/knocking/**': {},
'/\*/legs/\**': {}
}
}
})
response.json({ jwt })
})
サーバーはユーザー専用のJWTを作成し、フロントエンドはこれを保存します。このJWTを使用して、Vonage APIに接続することができます。 NexmoClientこれはClient SDKが提供するJavaScriptクラスです。
// views/voice/index.pug
async function getJwt() {
let jwt;
await fetch('/auth/jwt')
.then(results => results.json())
.then(data => {
jwt = data.jwt
})
.catch(err => console.error(err))
return jwt;
}
で Vonage API に接続したら、ユーザが適切なボタンをクリックしたときにエージェントを呼び出すリスナーをアタッチすることができます。 nexmo.createSession(jwt)に接続したら、ユーザが適切なボタンをクリックしたときにエージェントを呼び出すリスナーをアタッチします。また、"Hang Up "ボタンを配線して、ユーザが電話を終了できるようにします。
async function bootstrap() {
let jwt = await getJwt();
nexmo = new window.NexmoClient()
app = await nexmo.createSession(jwt)
document.getElementById('username').innerHTML = app.me.name
document.getElementById("call_agent").addEventListener('click', (event) => {
app.callServer('#{from_numer}');
})
app.on("member:call", (member, call) => {
document.getElementById('hangup').addEventListener('click', (event) => {
call.hangUp();
});
})
}
このブログ記事で説明したコードを実際に見てみたい方は Githubリポジトリ.
Vonage APIを使用することで、小売業の経営者は実店舗の顧客のニーズを満たし、競合他社への収益の流出を最小限に抑えることができます。Vonage APIは、ほぼすべてのプログラミング言語で様々なアプリケーションに追加することができ、ユーザがどのように連絡を取りたいかを決めることができます。
VonageコミュニケーションAPIをどのようにリテールエクスペリエンスに統合できるか、いくつかのアイデアが得られることを期待しています。
ご質問がある場合は VonageコミュニティSlackまたは ツイッター.