現在のプランを確認
Suite、すべてのバージョン Team、Growth、Professional、EnterpriseまたはEnterprise Plus
メモ：この記事は、メッセージング用Web Widgetを使用するアカウントを対象としています。Web Widget（従来版）を使用している場合は、「Web Widget（従来版）でコンポーネントを設定する方法」を参照してください。

Web Widgetの設定が完了したら、Webサイトまたはヘルプセンターにインストールして、カスタマーが利用できるようにすることができます。また、Web Widget を埋め込むと、表示する場所や表示方法を細かく制御できます。

この記事では、次のトピックについて説明します。

  • Web WidgetをWebサイトにインストールする
  • Web Widgetをヘルプセンターにインストールする
  • Web Widgetを埋め込む

Web WidgetをWebサイトにインストールする

Web WidgetをWebサイトに設置するには、閉じタグ（</body>）の直前にコードスニペットを貼り付ける必要があるため、Webサイトのコードに関する基本的な知識が必要です。

次のビデオでは、Webサイトにメッセージングを追加する方法の概要について説明します。

Webサイトにメッセージングを追加する [1:40]

ヒント：許可リストを作成すると、Web Widgetを表示する場所をより細かく制御できます。詳しくは「許可リストを使用してWeb Widgetの表示場所を制御する方法」を参照してください。

WebサイトへWeb Widgetを追加するには

  1. 管理センターで、サイドバーの「 チャネル」をクリックし、「メッセージングとソーシャル」>「メッセージング」を選択します。
  2. インストールするWeb Widgetの名前をクリックします。
  3. 下へスクロールし、「インストール」をクリックして展開します。
  4. コードスニペットのフレームの下部にあるコピーアイコン（）をクリックします。
  5. ウィジェットを追加するWebページのソースコードで、HTMLの閉じタグ </body> の前にコードスニペットを貼り付けます。ウィジェットを表示させたいすべてのWebページでこの作業を繰り返す必要があります。

  6. コードを他の誰か（開発者など）に送信したい場合は、「コードをチームメンバーにメールで送信」をクリックします。
  7. Web Widgetを表示するようにファイアウォールが設定されていることを確認します。

Web Widgetをヘルプセンターにインストールする

ヘルプセンターへのウィジェットのインストールは、ワンクリックの簡単なプロセスで、テクニカルサポートは必要ありません。Web Widgetをインストールするには、ヘルプセンターを作成し、アクティブ化する必要があります。

Web Widgetをヘルプセンターに追加するには

  1. 管理センターで、サイドバーの「 チャネル」をクリックし、「メッセージングとソーシャル」>「メッセージング」を選択します。
  2. インストールするWeb Widgetの名前をクリックします。
  3. 下へスクロールし、「インストール」をクリックして展開します。
  4. 「Web Widgetをヘルプセンターに自動的に埋め込む」チェックボックスをクリックして選択します。

    ヘルプセンターを作成してアクティブ化していない場合、このオプションは表示されません。

  5. 「保存」をクリックします。

    Web Widgetがヘルプセンターのすべてのページに追加されます。

Web Widgetを埋め込む

埋め込みモードでは、Web Widgetを固定位置で表示されるフローティングオーバーレイとして表示するのではなく、ページ上の特定のHTMLコンテナ内に配置します。ウィジェットは指定したコンテナのサイズいっぱいに自動的に表示されるため、表示する場所や表示方法を正確に制御できます。たとえば、会話リストとメッセージを左右に並べて表示する分割ビューなど、高度なレイアウトに適しています。

埋め込みモードでは、JavaScriptの埋め込みAPIコールを使用して、モードとウィジェジェットの配置先（ターゲット）コンテナの両方を指定する必要があります。

埋め込みモードを使用するには、まずウィジェットのデフォルトの自動レンダリング動作を無効にしてください。

window.zEMessenger = {
  autorender: false
}

次に、コンテナのIDまたはクラスを指定して、ウィジェットを表示する場所を指定します。

zE('messenger', 'render', {
  mode: 'embedded',
  widget: {
    targetElement: '#messaging-container'
  }
});

Web Widgetは #messaging-container 要素内に表示され、CSSで指定したサイズと位置が適用されます。

詳細については、開発者向けドキュメントの「Web Widget embedded mode」を参照してください。さらに例を確認するには、「Embedded mode for the Zendesk Widget」を参照してください。

Powered by Zendesk