この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

自動招待の設定とカスタマイズ

自動チャット招待を組み込みサービスのリリースと関連付けて、顧客をプロアクティブに招待してエージェントとのチャットを開始するように促します。招待は、[設定] で選択した条件に基づいてスライドしたり、フェードしたり、ページの任意の場所に表示したりできます。独自の HTML と CSS を使用して、招待を自社ブランドに合わせることもできます。招待を使用するには、コードスニペットをバージョン 4.0 にアップグレードしてください。

コードを記述する前に、[設定] で招待と組み込みサービスリリースを設定します。Salesforce Classic の [設定] から、[クイック検索] ボックスに「[チャット] ボタン」と入力し、[[チャット] ボタンと招待] を選択します。組み込みサービスリリースで使用する予定のチャットリリースに招待を関連付けます。次に、組み込みサービスリリースを作成または編集し、使用するチャット設定のチャットリリースと招待を選択します。

組み込みチャットリリースと通常のチ��ットリリースでは、招待の動作に次の違いがあることに注意してください。

モバイルブラウザを使用する顧客には位置とアニメーションが適用されません。招待はチャットボタンの上に「フェード」アニメーションで表示されます。
カスタムアニメーションはサポートされていません。
組み込みチャットボタンでサポートされていない [事前チャットフォームページ]、[事前チャットフォーム URL]、[カスタムチャットページ]、[招待画像]、[リソースのサイト] 項目は、組み込みチャットの招待でもサポートされていません。
コミュニティの組み込みチャットコンポーネントでは招待を使用できません。

リリースに招待を設定し、4.0 のコードスニペットを用意できたら、コードスニペットに  から始まるセクションがあります。ここで、招待の動作を定義し、必要に応じて独自の 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 以降のコードスニペットで組み込みチャットリリースに招待を追加し、コードスニペットを再生成すると、このコードが含まれます。

ここに示したコードサンプルで使用されているオブジェクト項目名、組織 ID、ボタン ID、スタイルシートは、組み込みサービス実装によっては動作しない可能性があります。このサンプルを使用する場合は、必ず情報を自分のものに置き換えてください。

メモ

1<!-- Start of Invitations -->
2<div class="embeddedServiceInvitation" id="snapins_invite" aria-live="assertive" role="dialog" aria-atomic="true">
3    <div class="embeddedServiceInvitationHeader" aria-labelledby="snapins_titletext" aria-describedby="snapins_bodytext">
4        <img id="embeddedServiceAvatar">
5        <span class="embeddedServiceTitleText" id="snapins_titletext">Need help?</span>
6        <button type="button" id="closeInvite" class="embeddedServiceCloseIcon" aria-label="Exit invitation">&times;</button>
7    </div>
8    <div class="embeddedServiceInvitationBody">
9        <p id="snapins_bodytext">How can we help you?</p>
10    </div>
11    <div class="embeddedServiceInvitationFooter" aria-describedby="snapins_bodytext">
12        <button type="button" class="embeddedServiceActionButton" id="rejectInvite">Close</button>
13        <button type="button" class="embeddedServiceActionButton" id="acceptInvite">Start Chat</button>
14    </div>
15</div>
16
17<style type='text/css'>
18    #snapins_invite { background-color: #FFFFFF; font-family: "Salesforce Sans", sans-serif; overflow: visible; border-radius: 8px; visibility: hidden; }
19    .embeddedServiceInvitation { background-color: transparent; max-width: 290px; max-height: 210px; -webkit-box-shadow: 0 7px 12px rgba(0,0,0,0.28); -moz-box-shadow: 0 7px 12px rgba(0,0,0,0.28); box-shadow: 0 7px 12px rgba(0,0,0,0.28); }
20    @media only screen and (min-width: 48em) { /*mobile*/ .embeddedServiceInvitation { max-width: 332px; max-height: 210px; } }
21    .embeddedServiceInvitation > .embeddedServiceInvitationHeader { width: inherit; height: 32px; line-height: 32px; padding: 10px; color: #FFFFFF; background-color: #222222; overflow: initial; display: flex; justify-content: space-between; align-items: stretch; border-top-left-radius: 8px; border-top-right-radius: 8px; }
22    .embeddedServiceInvitationHeader #embeddedServiceAvatar { width: 32px; height: 32px; border-radius: 50%; }
23    .embeddedServiceInvitationHeader .embeddedServiceTitleText { font-size: 18px; color: #FFFFFF; overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; align-self: stretch; flex-grow: 1; max-width: 100%; margin: 0 12px; }
24    .embeddedServiceInvitationHeader .embeddedServiceCloseIcon { border: none; border-radius: 3px; cursor: pointer; position: relative; bottom: 3%; background-color: transparent; width: 32px; height: 32px; font-size: 23px; color: #FFFFFF; }
25    .embeddedServiceInvitationHeader .embeddedServiceCloseIcon:focus { outline: none; }
26    .embeddedServiceInvitationHeader .embeddedServiceCloseIcon:focus::before { content: " "; position: absolute; top: 11%; left: 7%; width: 85%; height: 85%; background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; pointer-events: none; }
27    .embeddedServiceInvitationHeader .embeddedServiceCloseIcon:active, .embeddedServiceCloseIcon:hover { background-color: #FFFFFF; color: rgba(0,0,0,0.7); opacity: 0.7; }
28    .embeddedServiceInvitation > .embeddedServiceInvitationBody { background-color: #FFFFFF; max-height: 110px; min-width: 260px; margin: 0 8px; font-size: 14px; line-height: 20px; overflow: auto; }
29    .embeddedServiceInvitationBody p { color: #333333; padding: 8px; margin: 12px 0; }
30    .embeddedServiceInvitation > .embeddedServiceInvitationFooter { width: inherit; color: #FFFFFF; text-align: right; background-color: #FFFFFF; padding: 10px; max-height: 50px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
31    .embeddedServiceInvitationFooter > .embeddedServiceActionButton { font-size: 14px; max-height: 40px; border: none; border-radius: 4px; padding: 10px; margin: 4px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; }
32    .embeddedServiceInvitationFooter > #acceptInvite { background-color: #005290; color: #FFFFFF; }
33    .embeddedServiceInvitationFooter > #rejectInvite { background-color: #FFFFFF; color: #005290; }
34</style>
35
36<script type='text/javascript'>
37    (function() {
38        document.getElementById('closeInvite').onclick = function() { embedded_svc.inviteAPI.inviteButton.rejectInvite(); };
39        document.getElementById('rejectInvite').onclick = function() { embedded_svc.inviteAPI.inviteButton.rejectInvite(); }; // use this API call to reject invitations
40        document.getElementById('acceptInvite').onclick = function() { embedded_svc.inviteAPI.inviteButton.acceptInvite(); }; // use this API call to start chat from invitations
41        document.addEventListener('keyup', function(event) { if (event.keyCode == 27) { embedded_svc.inviteAPI.inviteButton.rejectInvite(); }})
42    })();
43</script>
44<!-- End of Invitations -->

Web 用組み込みサービス開発者ガイド

自動招待の設定とカスタマイズ

自動招待コードの例