ナレッジベース

この使用例では、いくつかの WebChat SDKの実装例を説明します。

この例では、Webサイト上の「ヘルプ」ボタンがクリックされると、Webチャットが開き、特定のフローが起動します。

1. ユーザーに送信するフローを作成する

このガイドでは、すでに希望に沿ったフローが作成されていることを前提とします。

例として、ユーザーにヘルプを求めるかどうかを確認する、非常にシンプルなフローを示します。助けが必要な場合、フローはユーザーをエージェントに割り当てます。

To 独自のフローを構築する方法については、こちらの記事を参照してください。

フローエディターが開いている間、後で使用するためにフローIDをコピーします。フローIDは、https://app.chatvisor.com/#/entities/flows/show/<FLOWID>のURLで確認できます。

この例では、フローIDは5f17ecec3564c64604a1cc4bです。

2. ウェブサイトにSDKメソッドを実装する

まず、'Open Chat' と 'Trigger Flow' API メソッドをウェブサイトに実装する必要があります。これらの詳細は こちらをご覧ください。

HTML

ここでは、チャットウィンドウを開き、フローを起動するためのボタンを作成します。

    <button onclick="getHelp()">Need help?</button>

JavaScript

ここでSDKのメソッドを実装します。

/** 
* open webchat and trigger 'Customer Help' flow
*/
function getHelp() {
    CV.webchat.open();
    CV.webchat.triggerFlow("5f17ecec3564c64604a1cc4b");
}

これにより、WebChatウィンドウが開き、フローが作動し、顧客は必要に応じてエージェントと迅速に連絡を取ることができます。

CV.webchat.open()とCV.webchat.triggerFlow()のドキュメントは こちらです。

3. 結果確認

ユーザーがウェブサイト上でこのボタンをクリックすると、チャットが開き、次のようなフローが表示されます：