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

Aura コンポーネントを使用した事前チャットページ UI のカスタマイズ

カスタム Aura コンポーネントを使用して、事前チャットのユーザインターフェースの項目、レイアウト、ボタン、画像、入力規則、その他の部分をカスタマイズします。

開始する前に、事前チャットを含む組み込みサービスリリースがすでに設定されていることを確認します。次に、開発者コンソールに移動し、[File (ファイル)] | [New (新規)] | [Lightning Component (Lightning コンポーネント)] をクリックします。コンポーネントの名前と説明を入力し、[Submit (送信)] をクリックします。

  1. 事前チャットのインターフェースを実装します。

    aura コンポーネントの開始タグを次のように変更します。

    1<aura:component implements="lightningsnapin:prechatUI">

    このコードは lightningsnapin:prechatUI インターフェースを実装します。これによって [設定] の [組み込みサービス] で事前チャットページとしてこのコンポーネントを選択できるようになります。

  2. 事前チャット API コンポーネントを作成します。
    1<lightningsnapin:prechatAPI aura:id="prechatAPI"/>

    このコードが提供する API を使用して、事前チャットページのユーザインターフェースをカスタマイズできます。

  3. 初期化 aura ハンドラを追加します。

    このアクションは、���ンポーネントが初期化されるときにコールされます。

    1<aura:handler name="init" value="{!this}" action="{!c.onInit}" />

    コンポーネントの表示には別個のハンドラがあります。

    メモ

  4. マークアップを追加します。

    ボタン、画像、検証、その他の作成したいものを作成します。[設定] の [組み込みサービス] で指定した項目を使用してレイアウトを完全に制御できます。

  5. コンポーネントコントローラに初期化アクションを追加します。
    1/**
    2 * On initialization of this component, set the prechatFields attribute and render prechat fields.
    3 * 
    4 * @param cmp - The component for this state.
    5 * @param evt - The Aura event.
    6 * @param hlp - The helper for this state.
    7 */
    8onInit: function(cmp, evt, hlp) {
    9   // Get prechat fields defined in setup using the prechatAPI component.
    10   var prechatFields = cmp.find("prechatAPI").getPrechatFields();
    11
    12   // Render your fields
    13},
  6. チャット開始のハンドラを追加します。

    ボタン要素にクリックハンドラを追加します。顧客はこのボタンを使用してチャットを要求します。

    1/**
    2 * Function to start a chat request (by accessing the chat API component)
    3 *
    4 * @param cmp - The component for this state
    5 */
    6onStartButtonClick: function(cmp) {
    7    // Make an array of field objects for the library.
    8    var fields = // Get your prechat fields.
    9        
    10    // If the prechat fields pass validation, start a chat.
    11    if(cmp.find("prechatAPI").validateFields(fields).valid) {
    12        cmp.find("prechatAPI").startChat(fields);
    13    } else {
    14        console.warn("Prechat fields did not pass validation!");
    15    }
    16},
  7. コンポーネントを保存し、[設定] の [組み込みサービス] でコンポーネントを選択します。

    コンポーネントを保存した後に、[設定] の [組み込みサービス] のチャット設定に移動します。作成したコンポーネントが事前チャットページ用のカスタムコンポーネントとして選択できるようになっています。