Web Widget（従来版）の高度なカスタマイズ

すべてのSuiteプランで利用可能すべてのSupportプランで利用可能

Quick Look: 管理センター >「チャネル」>「従来版」>「Web Widget」

管理者は、管理センターからWeb Widget（従来版）内のコンポーネントの初期設定を完了し、開発者と協力してWeb Widget（従来版）をWebサイトに追加した後、必要に応じて開発者と協力してWeb Widget（従来版）をさらにカスタマイズできます。

この記事では、Web Widget（従来版）の高度なカスタマイズ方法を管理者向けに説明します。「Web Widget（従来版）で他に何ができるか」という疑問を持つ管理者に回答を提供することを目的としています。管理者のためのカスタマイズプロセスを説明し、Web開発者の仕事に必要な開発者ドキュメンテーションのある場所を示します。

Web開発者（または自分でWebサイトを開発する管理者）で、この記事に記載されているAPI設定とコマンドに関する完全なドキュメントや他のコードサンプルをご覧になりたい場合は、Web Widget（従来版）APIの開発者向けドキュメントを参照してください。

この記事では、次のトピックとウィジェットのカスタマイズについて説明します。

Web Widget（従来版）のカスタマイズを計画する
Web Widget（従来版）APIのドキュメントを探す
別の言語でウィジェットを表示する
ユーザーの連絡先情報をあらかじめフォームに入力する
チケットへのファイル添付を無効にする
ランチャーの配置を変更する
ウィジェットの配置をオフセットする
ウィジェットの要素のカラーをカスタマイズする
ウィジェットの表示順序を変更する
特定のページ上で機能を制限する
ウィジェットのテキストをカスタマイズする
問い合わせフォームに件名を追加する
「元の記事を表示」ボタンを非表示にする
検索結果を制限する
ヘルプセンターの検索プレースホルダテキストをカスタマイズする
Web Widget（従来版）内でのTalkの高度な設定
Web Widget（従来版）内でのChatの高度な設定
エンドユーザーに複数のコンタクトオプションを提供する
複数のWeb Widget（従来版）要素のフォーマットコード

Web Widget（従来版）をWebサイトに追加する方法については、「Web Widget（従来版）を使用してカスタマーサービスをWebサイトに埋め込む方法」を参照してください。

Web Widget（従来版）ドキュメントの一覧については、「Web Widget（従来版）関連のリソース」を参照してください。

Web Widget（従来版）のカスタマイズを計画する

Support管理者がWeb開発者であることは滅多になく、ほとんど場合、他の人と協力してWeb Widget（従来版）のカスタマイズを行ないます。Web Widget（従来版）やWebサイトを自分でカスタマイズすることはしません。変更を実装するために、自社のWeb開発者か、または外注の契約開発者の協力を得ます。

カスタマイズ作業では、Web開発者はWebサイトのHTMLにコード（Web Widget（従来版）API）を追加します。一方、管理者にもこの作業で果たすべき役割があります。管理者は、Web Widget（従来版）に対してどのようなカスタマイズが可能であるかを理解し、要望をWeb開発者に伝える必要があります。

HTMLに詳しい管理者の方は、開発者と同じようにカスタマイズをご自分で行ってもかまいません。いずれにせよ、Web Widget（従来版）をカスタマイズする際に管理者がとるプロセスには、いくつかの計画を必要とし、以下のステップが含まれます。

この記事に記載された情報を参考にして、どのような高度なカスタマイズが可能かを理解する。
Web Widget（従来版）の開発要件のリストを作成するために社内の主要な利害関係者から話を聞く。どんな色を使いたいか、Web Widget（従来版）をどのように動作させたいか、など。
必要なカスタマイズのリストを作成する。できるだけ具体的にし、Web開発者が参照できるAPIドキュメントへのリンクを掲載する。
Web開発者にリストを渡し、WebサイトのHTMLに変更を加えてWeb Widget（従来版）をカスタマイズしてもらう。

Web Widget（従来版）APIのドキュメントを探す

開発者がZendesk開発者サイトでWeb Widget（従来版）APIドキュメントを探すのに役立つ重要な情報を以下に示します。

更新され整理された開発者向けドキュメントとAPI構文：Web Widget（従来版）API構文が更新され、Web Widget（従来版）API開発者向けドキュメントも再編成され、お探しのコマンドや設定を見つけやすくなりました。製品チャネル別（ヘルプセンター、チケット、Chat、Talk）、またはコア設定とコマンド別にドキュメントを整理しました。詳しくは、「Web Widget API（従来版）の開発者向けドキュメント」を参照してください。

新しいChat API：古いChat（Zopim）APIと新しいWeb Widget（従来版）APIとの対応関係については、「Chat Widget構文から統一されたWeb Widget（従来版）構文への移行」を参照してください。

別の言語でウィジェットを表示する

デフォルトでは、Webサイトに埋め込まれたWeb Widget（従来版）のテキストは、エンドユーザーがブラウザで使用している言語で表示されます。たとえば、エンドユーザーのブラウザの言語がドイツ語のdeに設定されている場合、ウィジェットのテキストはドイツ語でそのユーザーに表示されます。Web Widgetがヘルプセンターに埋め込まれている場合、ヘルプセンターの言語設定に基づいてテキストが表示されます。

Web Widget（従来版）は、Zendeskでサポートされている言語のサブセットをサポートしています。エンドユーザーのブラウザの言語がWeb Widget（従来版）でサポートされない場合は、ウィジェットは英語で表示されます。ウィジェットがエンドユーザーのブラウザの言語情報を取得できない場合、デフォルトでは、ウィジェットはZendesk Supportで指定された言語で表示されます。

setLocaleコマンドを使用して、ウィジェットのテキストが常に特定の言語で表示されるようにウィジェットをカスタマイズできます。このコマンドはウィジェットの言語のみ設定し、ホストページの言語は上書きしません。

詳しくは、setLocaleコマンドに関する開発者用ドキュメントを参照してください。

ユーザーの連絡先情報をあらかじめフォームに入力する

ユーザーの名前、メールアドレス、そして電話番号が問い合わせフォームにあらかじめ自動的に入力されるようにしておくと、サイト訪問者が入力する手間や時間を省き、不満を抑えることができます。対象フォームには、チケットフォーム、プレチャットフォーム、およびChatオフラインフォームなどがあります。IDおよび事前入力の設定を使用します。

事前入力設定を使用してユーザー情報を読み取り専用に設定することもできます。これにより、同じユーザーが重複したSupportアカウントを持つことを防ぐことができます。

詳細については、IDおよび事前入力の設定に関する開発者向けドキュメントを参照してください。

チケットへのファイル添付を無効にする

チケットの添付ファイルを有効にした場合、ユーザーは、Web Widget（従来版）から送信するチケットにファイルを添付できるようになります。ただし、このオプションは必要に応じて無効にすることができます。

詳しくは、contactForm オブジェクトのファイル添付設定に関する開発者用ドキュメントを参照してください。

ランチャーの配置を変更する

Web Widget（従来版）のデフォルトの表示位置はブラウザの右下です。ユーザーがWeb Widget（従来版）をクリックすると、ウィジェットが上の方に拡大して開きます。

ページごとにWeb Widget（従来版）の表示位置を変えることができます（ページの左側または右側に配置できます。ページの上部に配置すると、クリックしたときに下の方に拡大して開きます）。Web Widget（従来版）をページの左上、右上、左下、または右下に配置するには、位置設定を使用します。

詳細については、位置設定に関する開発者向けドキュメントを参照してください。

ウィジェットの配置をオフセットする

オフセット設定を使用して、デスクトップまたはモバイルデバイスでのWeb Widget（従来版）の位置を変更できます。最初の位置設定を参照点として使用し、次にオフセット設定を使用してWeb Widget（従来版）をその位置から上下左右に（ピクセル単位で）移動します。

詳細については、オフセット設定設定に関する開発者向けドキュメントを参照してください。

ウィジェットの要素のカラーをカスタマイズする

Web Widget（従来版）管理ページから、Web Widget（従来版）の全体的な配色（テーマカラー）、およびランチャー、問い合わせボタン、およびヘッダーのテキストのカスタムカラー（テーマカラーのテキスト）を指定できます（「Web Widget（従来版）のコンポーネントの設定」を参照））

ただし、特定の要素のカラーをカスタマイズしたい場合は、カラー設定を使用する必要があります。これらのWeb Widget（従来版）の各コンポーネントに合わせて固有のカラーを選択できます。

ランチャー
ボタン
ボタンのテキスト
結果のリスト（results_list）
ヘッダー
記事へのリンク

アクセシビリティの目的で、Web Widget（従来版）は、WCAGガイドラインで指定されている最小のコントラスト比を保証するために、アルゴリズムを使用してカラーを自動調整します。

Web Widget（従来版）要素のカラーのカスタマイズの詳細については、カラー設定に関する開発者向けドキュメントを参照してください。

ウィジェットの表示順序を変更する

zIndex設定（Web Widget（従来版）の主要設定の1つ）を使用して新しい値を設定し、サイトの同じ場所に表示される他の要素と相対的に、Web Widget（従来版）の表示方法を変更することができます。

詳しくは、zIndex設定に関する開発者用資料を参照してください。

特定のページのウィジェット機能を抑制する

Web Widget（従来版）で問い合わせフォーム、Chat、Talk、およびヘルプセンターを有効にしてから、suppress設定を使用して、サイトの特定のページで提供される機能をニーズに合わせて変更できます。

たとえば、suppressを使用して次のことができます。

一部のページからヘルプセンターにアクセスできる
Chatまたは問い合わせフォームから他のページに移動させない
サインインして識別されたユーザーに段階的なサービスレベルを提供する

詳細については、suppress設定に関する開発者向けドキュメントを参照してください。

ウィジェットのテキストをカスタマイズする

下の表にリストしたWeb Widget（従来版）コンポーネントのテキストを変更できます。また、ヘルプセンターの検索プレースホルダのテキストをカスタマイズすることもできます。

コンポーネント	説明
	オブジェクト: ランチャー設定： chatLabel 説明：Chatが有効で、ヘルプセンターがオンになっていない場合のランチャーボタンのテキスト。デフォルトのテキスト：Chat
	オブジェクト: ランチャー設定： label 説明：ランチャーボタンのテキストデフォルトのテキスト：Web Widget（従来版）の管理ページの定義に従って、「ヘルプ」、「サポート」または「フィードバック」。
	オブジェクト： helpCenter 設定： title 説明：ヘルプセンターページのタイトルデフォルトのテキスト：ヘルプ
	オブジェクト： contactForm 設定： title 説明：問い合わせフォームのタイトルデフォルトのテキスト：Web Widget（従来版）の管理ページの定義に従って「メッセージを残す」または「お問い合わせ」
	オブジェクト： helpCenter 設定： messageButton 説明：ヘルプセンターフォームの問い合わせフォームを読み込むボタンのテキスト（最大20文字）デフォルトのテキスト：Web Widget（従来版）の管理ページの定義に従って「メッセージを残す」または「お問い合わせ」
	オブジェクト： helpCenter 設定： chatButton 説明：ヘルプセンターフォームに表示される、Chatの呼び出しボタンのテキスト（最大20文字）デフォルトのテキスト：Web Widget（従来版）の管理ページの定義に従って、「ヘルプ」、「サポート」または「フィードバック」。

translationsオブジェクトを使用して、Web Widget（従来版）に表示されるデフォルトテキストの一部を変更できます。翻訳は、ランチャー、ヘルプセンター、問い合わせフォームなど、機能ごとにグループ化されます。

メモ：ロケール名にワイルドカード文字（*）を指定すると、そのテキストはすべてのロケールに適用されます。

使用可能な言語コードのリストは、「Zendesk Supportでサポートされている言語の言語コード」の表で参照できます。

ロケールの翻訳は、エンドユーザーのブラウザ言語によってトリガされます。また、エンドユーザーのブラウザの言語設定を無視し、ウィジェットを常に特定の言語で表示されるようにすることもできます。詳しくは、「別の言語でウィジェットを表示する」を参照してください。

問い合わせフォームに件名を追加する

contactFormオブジェクトのsubject設定を使用して、Web Widget（従来版）のデフォルトの問い合わせフォームに件名を含めるように設定できます。

デフォルトの問い合わせフォームは、エンゲージメントを促し、問い合わせフォームへの入力時に効率的なユーザーエクスペリエンスを提供するように作られています。デフォルトの問い合わせフォームには件名が含まれていませんが、一部のカスタマー向けに、サポートエクスペリエンスの向上の目的で件名を追加することもできます。

詳細については、contactFormオブジェクトのsubject設定に関する開発者向けドキュメントを参照してください。

「元の記事を表示」ボタンを非表示にする

「元の記事を表示」ボタンは、Web Widget（従来版）内の記事とヘルプセンター自体の記事をリンクさせます。helpCenterオブジェクトおよびoriginalArticleButtonオブジェクトをfalseに設定して使用することで、このボタンを非表示にできます。

詳細については、helpCenterオブジェクトのoriginalArticleButton設定に関する開発者向けドキュメントを参照してください。

検索結果を制限する

helpCenterオブジェクトのfilter設定を使用すると、Web Widget（従来版）から実行された検索の結果の記事を、カテゴリ、セクション、およびラベルに基づいて絞り込むことができます。詳しくは、filter設定に関する開発者向け文書を参照してください。

ページを下へスクロールすると、検索結果を制限する方法を説明した開発者向けドキュメントに含まれていないその他の例をいくつかご覧いただけます。

メモ：複数のセクション、カテゴリ、またはラベルを指定するには、カンマで値を区切ります（カンマの前後にスペースは不要）。

検索結果を特定のセクションに絞り込むには

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        section: '200154474-Announcements'
      }
    }
  }
};
</script>

検索結果を特定のカテゴリに絞り込むには

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General'
      }
    }
  }
};
</script>

検索結果を複数のカテゴリにまたがるコンテンツに絞り込むには

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '115000669485,201742209' 
      }
    }
  }
};
</script>

検索結果を特定のラベルを持つコンテンツにに絞り込むには

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        label_names: 'orders'
      }
    }
  }
};
</script>

検索結果を特定のカテゴリおよび特定のラベルのコンテンツに絞り込むには

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General',
        label_names: 'Label One,Label Two,Label Three'
      }
    }
  }
};
</script>

ヘルプセンターの検索プレースホルダテキストをカスタマイズする

ヘルプセンターの検索ボックスに表示されるデフォルトのプレースホルダテキストは、「何をお探しでしょうか?」です。このテキストをユーザーの言語と一致するように、または特定のテキストが特定の言語で表示されるようにカスタマイズできます。詳しくは、searchPlaceholder設定に関する開発者用資料を参照してください。

状況依存ヘルプが有効になっている場合は、お勧めの記事を表示するようにWeb Widget（従来版）を設定することもできます。これにより、カスタマーがより簡単にセルフサービスを行えるようになります。詳しくは、helpCenterオブジェクトのsetSuggestionsコマンドに関する開発者用ドキュメントを参照してください。

Web Widget（従来版）内でのTalkの高度な設定

Web Widget（従来版）でのTalkの動作を定義する設定を複数作成できます。各設定では、ニーズや好みに応じて、Web Widget（従来版）内のTalkのコールルーティングおよび表示オプションをカスタマイズできます。

各設定でカスタマイズできる主な属性は次のとおりです。

Web Widget（従来版）の折り返し電話リクエストのルーティング先となるエージェントグループ
Web Widget（従来版）の折り返し電話リクエストの優先順位
Web Widgetに「折り返し電話をリクエスト」か「電話をかける」、または両方のオプションを表示する
Web Widget（従来版）に予想待機時間を表示する

Web Widget（従来版）でTalkの設定を1つだけ作成した場合、その設定が、Talkが利用可能なときに常にWeb Widget（従来版）に表示されるデフォルトの設定になります。

Web Widget（従来版）でTalkの設定を複数作成した場合、Talkの識別名設定を使用して、目的の設定を指定することができます。

メモ：Talk設定のAPIリクエストの識別名は、スペースや大文字と小文字などを含め、Talk設定の識別名と完全に一致している必要があります。

詳細については、talkオブジェクト、nickname設定に関する開発者向けドキュメント、および「Web Widget（従来版）用のZendesk Talk設定の構成」を参照してください。

Web Widget（従来版）内でのChatの高度な設定

Web Widget（従来版）でオンラインチャットを使用している場合、Web Widget（従来版）にZendesk Chatの機能を追加して、Webサイトの訪問者がエージェントとチャットしたり、ファイルを送受信して問題を解決できるようにすることができます。エージェントはまた、サイト訪問者に積極的にメッセージを送信して、訪問者が何か助けを求めているかどうかを確認することもできます。

詳しくは、chatオブジェクトに関する開発者向けドキュメントを参照してください。

Webとチャットウィジェットの統合エクスペリエンスを使用すると、以下の設定を使用してchatオブジェクトをさらにカスタマイズできます。

古いChat（Zopim）APIとWeb Widget（従来版）APIとの対応関係については、「Chatウィジェット構文から統一されたWeb Widget構文への移行」を参照してください。

エンドユーザーに複数のコンタクトオプションを提供する

エンドユーザーにコンタクトオプションの選択を許可できます。Webサイトをカスタマイズして、ページごとにエンドユーザーに選択を許可したり、許可しないようにすることもできます。ページの正確な挙動は、ChatまたはTalkがWeb Widget（従来版）に対応するよう設定されているかどうか、チャットエージェントがオンラインであるかどうかによって異なります。必要に応じて、コンタクトオプションのデフォルトのテキストをカスタマイズできます。

以下にそのプロセスについて簡単に説明します。

コンタクトオプション	デフォルトのテキスト：
問い合わせボタン	お問い合わせ
チャットラベル（エージェントオンライン）	オンラインチャット
チャットラベル（エージェントオフライン）	チャットはご利用いただけません
問い合わせフォームのラベル	メッセージを残す

詳しくは、contactOptions設定に関する開発者向けドキュメントを参照してください。

Chatでコンタクトオプションを提供する

ChatがWeb Widget（従来版）に対して設定されている場合、空いているチャットエージェントがいれば、エンドユーザーは自動的にチャットにルーティングされます。ただし、対応可能なチャットエージェントがいたとしても、エンドユーザーがエージェントとチャットするかコンタクトフォームに記入するかを選択できるようにすることができます。ユーザーがランチャーをクリックしたときに、対応可能なチャットエージェントがいても、チャットを開始する前にエージェントがサインオフした場合、エンドユーザーには対応可能なエージェントがいないことを示すメッセージが表示されることがあります。

既知のバグですが、エンドユーザーがチャットを選択したときに「戻る」ボタンを使用して、他のコンタクトオプションに戻ることはできません。そうするには、チャットを完全に終了するか、ページを更新する必要があります。

Talkとのコンタクトオプションの提供

Web Widget（従来版）でTalkや他のコンタクトオプションが有効になっていて、エージェントがオンラインの場合、コンタクトオプションは自動的に有効になります。

複数のウィジェットコンポーネントのフォーマットコード

メモ：このセクションは説明のみを目的として提供されています。記事内で例示したコードについて、Zendeskではサポートも保証もしません。また、Zendeskは、JavaScript、jQuery、CSSなどのサードパーティの技術をサポートすることができません。何か問題があった場合はコメント欄に投稿するか、インターネットで解決策を探してみてください。

グローバルアイテムは個別に格納されますが、問い合わせフォーム、ヘルプセンターおよびZendesk Chatに固有のアイテムは、サイトのHTMLのこれらの見出し（contactForm、helpCenter、chat）の後にネストされます。

たとえば、これらのカスタマイズは次のように定義されています。

画面上のWeb Widget（従来版）の位置は、オフセット設定を使用して変更されています。オフセットはグローバルアイテムなので、固有のエントリを持ちます。
ヘルプセンターの検索：「元の記事を表示」ボタンは表示されません。英語ユーザー向けには「Search for help」が、他のすべての言語には「Have your say」が表示されます。
チャットが無効になりました
問い合わせフォームのタイトルは、英語のは「Message us」、その他の言語では「Contact us」です。
ランチャーボタンのテキストは、英語では「Make a request」、その他の言語では「Get help」です。

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    offset: { horizontal: '400px', vertical: '400px' },
    helpCenter: {
      originalArticleButton: false,
      title: {
        'en-US': 'Search for help',
        '*': 'Have your say'
      }
    },
    chat: {
      suppress: true
    },
    contactForm: {
      title: {
        'en-US': 'SMessage us',
        '*': 'Contact us'
      }
    },
    launcher: {
      label: {
        'en-US': 'Make a request',
        '*': 'Get help'
      }
    }
  }
};
</script>