Web 用組み込みサービス開発者ガイド
j自動招待の設定とカスタマイズ
自動チャット招待を組み込みサービスのリリースと関連付けて、顧客をプロアクティブに招待してエージェントとのチャットを開始するように促します。招待は、[設定] で選択した条件に基づいてスライドしたり、フェードしたり、ページの任意の場所に表示したりできます。独自の HTML と CSS を使用して、招待を自社ブランドに合わせることもできます。招待を使用するには、コードスニペットをバージョン 4.0 にアップグレードしてください。
コードを記述する前に、[設定] で招待と組み込みサービスリリースを設定します。Salesforce Classic の [設定] から、[クイック検索] ボックスに「[チャット] ボタン」と入力し、[[チャット] ボタンと招待] を選択します。組み込みサービスリリースで使用する予定のチャットリリースに招待を関連付けます。次に、組み込みサービスリリースを作成または編集し、使用するチャット設定のチャットリリースと招待を選択します。
組み込みチャットリリースと通常のチャットリリースでは、招待の動作に次の違いがあることに注意してください。
- モバイルブラウザを使用する顧客には位置とアニメーションが適用されません。招待はチャットボタンの上に「フェード」アニメーションで表示されます。
- カスタムアニメーションはサポートされていません。
- 組み込みチャットボタンでサポートされていない [事前チャットフォームページ]、[事前チャットフォーム URL]、[カスタムチャットページ]、[招待画像]、[リソースのサイト] 項目は、組み込みチャットの招待でもサポートされていません。
- コミュニティの組み込みチャットコンポーネントでは招待を使用できません。
リリースに招待を設定し、4.0 のコードスニペットを用意できたら、コードスニペットに <!-- Invitations - Static HTML/CSS/JS --> から始まるセクションがあります。ここで、招待の動作を定義し、必要に応じて独自の HTML や CSS を追加します。
独自の HTML や CSS を使用する場合は、次のことに注意してください。
- HTML を <div id=”snapins_invite></div>. で正しくラップします。<div> には CSS プロパティ visibility: hidden も含めます。これによってアニメーションやルールが [設定] で指定したとおりに機能します。
- 招待を組み込みチャットリリースに追加すると、デフォルトの HTML と CSS が生成され、スニペットが再生成されます。デフォルトの招待では、組み込みサービス設定で選択したフォント、プライマリ色、セカンダリ色が使用されます。
- アバター画像を設定すると (コードスニペット内の embedded_svc.settings.avatarImgURL を定義することで設定)、デフォルトの HTML と CSS ではその画像は招待の左上に表示されます。
招待を使用する場合、組み込みサービスのコードスニペットで次の 2 つの JavaScript 関数を上書きします。
- embedded_svc.inviteAPI.inviteButton.acceptInvite()
- embedded_svc.inviteAPI.inviteButton.rejectInvite()
カスタム変数ルールを使用する場合は、次の関数も使用します。
- embedded_svc.inviteAPI.inviteButton.setCustomVariable()
自動招待コードの例
次のコード例はコードスニペットのデフォルトの HTML、CSS、JavaScript 関数を示しています。バージョン 4.0 以降のコードスニペットで組み込みチャットリリースに招待を追加し、コードスニペットを再生成すると、このコードが含まれます。