Zendesk Web Widgetランチャーのオプション：2026年完全ガイド

ウィジェットランチャーのオプションについて学ぶこと

ランチャーは、お客様がサポートを必要とする際に最初に目にするものです。それは、Webサイトの隅にある、サポートへの扉を開くボタンです。しかし、Zendesk (ゼンデスク) は、ほとんどの人が認識しているよりも、そのボタンをより細かく制御できるのです。

シンプルなノーコード設定から、既存のUIにシームレスに溶け込む完全にカスタム実装まで、さまざまなオプションがあります。最新のMessaging Web Widgetを実行している場合でも、従来のClassic Web Widgetを実行している場合でも、このガイドでは利用可能なすべてのランチャーオプションについて説明し、ニーズに合った適切なアプローチを選択するのに役立ちます。

ウィジェットランチャーで実際に何ができるのか、そして各オプションをどのように実装するのかを詳しく見ていきましょう。

Zendesk (ゼンデスク) Web Widgetランチャーのオプションについて

デフォルトのランチャー

Zendesk (ゼンデスク) では、すぐに使える3つのランチャー形状を管理センターで選択できます。

• 角の丸みを調整できる正方形（角をシャープにする場合は0px、完全に丸める場合は最大20px）
• モダンでコンパクトな外観の円
• 独自のランチャーを構築できるようにデフォルトのボタンを非表示にするカスタムランチャー

配置は簡単で、ブラウザウィンドウの左下または右下です。Cookieバナーやチャットウィジェットなどの他のUI要素との競合を避ける必要がある場合は、端からのオフセット間隔を設定することもできます。

デフォルトのランチャーは、オプションのテキストラベル（「ヘルプ」や「チャットでお問い合わせ」など）をサポートしており、モバイルデバイスにそのテキストを表示するかどうかを選択できます。ブランディングについては、ランチャーボタンとウィジェットヘッダーの両方に適用されるプライマリカラー、および会話インターフェイスのメッセージとアクションの色を設定します。

カスタムランチャーを選択するタイミング

デフォルトのランチャーは、ほとんどのユースケースで問題なく機能します。ただし、カスタムランチャーの構築が理にかなっている状況もあります。

• 特定のブランディング要件: 管理センターの色では実現できない独自の設計要素にランチャーを一致させる必要がある
• 標準外の配置: ランチャーを下の角以外の場所に配置したり、既存のナビゲーション要素に統合したりしたい
• 複雑なトリガー: ヘッダーの「お問い合わせ」リンクやフローティングボタンなど、ページ上の複数の要素からウィジェットを開きたい
• 未読メッセージバッジ: 独自のUI要素に通知カウントを表示したい

トレードオフは開発時間です。カスタムランチャーには、HTML、CSS、およびJavaScript (ジャバスクリプト) の知識が必要です。Zendesk (ゼンデスク) がAPI (アプリケーション・プログラミング・インタフェース) を更新する場合、継続的なメンテナンスも必要になります。

結論として、満たすことができない特定の要件がない限り、デフォルトのランチャーから始めてください。

管理センターでデフォルトのランチャーを設定する

ステップ1：Web Widgetの設定にアクセスする

管理センター > チャネル > メッセージングとソーシャル > メッセージングに移動し、Web Widgetチャネルの名前をクリックします。

上部にいくつかのタブが表示されます。[基本]、[スタイル]、[応答]、[設定]、[インストール]です。ランチャーの設定には、**[スタイル]**タブが必要です。

ステップ2：ランチャーの外観をカスタマイズする

[スタイル]タブで、**[ランチャー]**セクションまでスクロールします。ここで設定できることは次のとおりです。

ブラウザウィンドウでの位置: 右下または左下を選択します。ページの角に他に何があるかを検討してください。Cookieバナーや別のチャットツールがある場合は、オフセットを調整するか、反対側の角を選択する必要があるかもしれません。

形状: 正方形、円、またはカスタムランチャーを選択します。正方形を選択すると、境界線の半径を0px（シャープな角）から20px（完全に丸い）まで調整するスライダーが表示されます。

テキスト（オプション）: ランチャーボタンの横に表示されるラベルを追加します。「ヘルプ」や「チャットでお問い合わせ」のようなものは、ボタンの目的を明確にすることでエンゲージメントを高めることができます。

モバイルで表示: モバイルデバイスにテキストラベルを表示するかどうかを切り替えます。小さな画面では、スペースを節約するためにアイコンのみを優先する場合があります。

ステップ3：色とブランディングを設定する

[スタイル]タブの**[フレーム]**セクションでは、ウィジェットの視覚的なアイデンティティを制御します。

プライマリカラー: これは、ランチャーボタンとウィジェットヘッダーの色を設定します。16進コードを入力するか、カラーピッカーを使用します。従来のWidgetから移行する場合は、以前のブランド設定がデフォルトになります。

メッセージカラー: 顧客のメッセージバブルの背景色。

アクションカラー: 会話内のボタンと選択されたオプションの色。

ロゴ（オプション）: ウィジェットフレームの上部に表示するJPG (ジェイペグ) またはPNG (ピング) をアップロードします。これは、ブランド認知度を高めるチャンスです。

タイトル: ウィジェットの上部に表示されるテキスト。これは、会社名または「お問い合わせ」のような行動喚起にすることができます。

**[設定を保存]**をクリックすると、ウィジェットがインストールされているすべてのページに変更がすぐに反映されます。

カスタムランチャーを作成する

カスタム実装の準備

コードを記述する前に、管理センターで次の2つのことを行う必要があります。

1. 上記と同じ[スタイル]タブに移動します
2. **[形状]を[カスタムランチャー]**に設定します

これにより、Webサイトからデフォルトのランチャーボタンが削除されます。ウィジェットはまだそこにありますが、プログラムでトリガーするまで非表示になっています。

技術的な実装には、次のものが必要です。

• WebサイトのHTML (エイチティーエムエル) とCSS (シーエスエス) を編集するアクセス権
• 基本的なJavaScript (ジャバスクリプト) の知識
• Zendesk (ゼンデスク) Web Widget API (アプリケーション・プログラミング・インタフェース)に関する知識

ランチャーの構築

カスタムランチャーには、次の3つのコンポーネントがあります。

1. HTML (エイチティーエムエル) 要素: ウィジェットをトリガーするクリック可能なボタンまたはリンク
2. CSS (シーエスエス): ブランドに合わせて要素をスタイルし、配置する
3. JavaScript (ジャバスクリプト): ウィジェットの状態を開閉および監視するAPI (アプリケーション・プログラミング・インタフェース) 呼び出し

基本的な実装を次に示します。

<!-- カスタムランチャーボタン -->
<button id="custom-launcher">チャットでお問い合わせ</button>

<script>
  // デフォルトのランチャーを非表示にする（管理センターですでに完了していますが、これで確実になります）
  zE('messenger:set', 'hideLauncher', true);

  // カスタムボタンにクリックハンドラーを追加する
  document.getElementById('custom-launcher').addEventListener('click', function() {
    zE('messenger', 'open');
  });

  // オプション：ウィジェットが閉じるときにボタンのテキストを更新する
  zE('messenger:on', 'close', function() {
    console.log('Widget closed');
  });
</script>

CSS (シーエスエス) を使用して、ボタンを好きなようにスタイルできます。ページ上の任意の場所に配置し、ブランドカラーを使用し、ホバーエフェクトを追加するか、既存のナビゲーションに統合します。

コード例：未読バッジ付きの基本的なカスタムランチャー

未読メッセージのカウントを表示する、より完全な例を次に示します。

<button id="custom-launcher">
  チャットでお問い合わせ
  <span id="unread-badge" style="display: none;">0</span>
</button>

<script>
  // 未読メッセージを追跡する
  zE('messenger:on', 'unreadMessages', function(count) {
    const badge = document.getElementById('unread-badge');
    if (count > 0) {
      badge.textContent = count;
      badge.style.display = 'inline';
    } else {
      badge.style.display = 'none';
    }
  });

  // ボタンクリックでウィジェットを切り替える
  let isOpen = false;
  document.getElementById('custom-launcher').addEventListener('click', function() {
    if (isOpen) {
      zE('messenger', 'close');
    } else {
      zE('messenger', 'open');
    }
  });

  // ウィジェットの状態を追跡する
  zE('messenger:on', 'open', function() { isOpen = true; });
  zE('messenger:on', 'close', function() { isOpen = false; });
</script>

これにより、デフォルトのランチャーのように動作するランチャーが得られますが、外観と配置を完全に制御できます。

高度なカスタマイズオプション

Messaging Widget (メッセージングウィジェット) のテーマAPI (アプリケーション・プログラミング・インタフェース)

管理センターのカラー設定に加えて、Messaging Widget (メッセージングウィジェット) は、動的なカスタマイズのためのJavaScript (ジャバスクリプト) テーマAPI (アプリケーション・プログラミング・インタフェース) をサポートしています。これは、次の場合に役立ちます。

• ユーザー設定（ダークモードなど）に基づいて色を変更する
• 異なるページに異なるテーマを適用する
• リロードせずにブランドを動的に更新する

API (アプリケーション・プログラミング・インタフェース) は、set customizationコマンドを使用します。

zE("messenger:set", "customization", {
  theme: {
    primary: "#FE5E41",
    onPrimary: "#FFFFFF",
    message: "#F3C178",
    onMessage: "#5F0F00",
    action: "#B0DB43",
    onAction: "#000000",
    background: "#DFE0E2",
    onBackground: "#F10404"
  }
})

主要なテーマプロパティ:

• primary: ランチャーとヘッダーのメインブランドカラー
• onPrimary: プライマリ要素のテキストカラー
• message: 顧客のメッセージバブルの背景
• onMessage: 顧客のメッセージのテキストカラー
• action: ボタンとインタラクティブな要素の色
• onAction: アクションボタンのテキストカラー
• background: ウィジェットの背景色
• onBackground: 背景のテキストカラー

すべてのプロパティを指定する必要はありません。省略したものはデフォルトの色を使用します。つまり、必要なものだけをオーバーライドできます。

ソース: Zendesk (ゼンデスク) Web Widget Customization API (アプリケーション・プログラミング・インタフェース)

Classic Widget API (アプリケーション・プログラミング・インタフェース) の違い

Web Widget (Classic)をまだ使用している場合、API (アプリケーション・プログラミング・インタフェース) の構造は異なります。

• コマンドはzE('messenger:*')の代わりにzE('webWidget:*')を使用します
• 設定は、ウィジェットがロードされる前にwindow.zESettingsオブジェクトで定義されます
• カスタマイズはより制限されています：テーマカラーとテーマテキストカラーのみ
• 埋め込みモードのサポートなし

Classic Widget (クラシックウィジェット) コマンドの例：

zE('webWidget', 'show');
zE('webWidget', 'hide');
zE('webWidget', 'open');
zE('webWidget', 'close');

ソース: Web Widget (Classic) API (アプリケーション・プログラミング・インタフェース)

埋め込みモード

フローティングランチャーの代わりに、ウィジェットをページ要素に直接埋め込むことができます。これは、会話インターフェイスをすぐに表示したい専用のサポートページに役立ちます。

埋め込みモードを使用するには：

1. コンテナ要素をHTML (エイチティーエムエル) に追加します。

<div id="my-messenger-container"></div>

2. ウィジェットがロードされる前に自動レンダリングを無効にします。

<script>
  window.zEMessenger = { autorender: false };
</script>

3. 埋め込みモードでrenderメソッドを呼び出します。

zE("messenger", "render", {
  mode: "embedded",
  widget: {
    targetElement: "#my-messenger-container"
  }
})

ウィジェットはコンテナに合わせて自動的に調整されます。会話リストまたはメッセージログのみを個別にレンダリングして、分割ビューレイアウトが必要な場合もあります。

ソース: 埋め込みモードのドキュメント

ランチャー実装のベストプラクティス

モバイルレスポンシブ

ブラウザの開発ツールだけでなく、実際のモバイルデバイスでランチャーをテストしてください。デフォルトのランチャーはモバイルを適切に処理しますが、カスタムランチャーは注意が必要です。

• タッチターゲットが少なくとも44x44ピクセルであることを確認する
• 小さな画面でテキストラベルが意味があるかどうかを検討する
• ウィジェットが重要なモバイルUI (ユーザーインターフェース) を隠さないことをテストする

アクセシビリティ

ランチャーはすべての人にとって使いやすいものでなければなりません。

• カスタムランチャーに適切なaria-label属性を追加する
• キーボードナビゲーションが機能することを確認する（Tab (タブ) キーでフォーカス、Enter (エンター) /Space (スペース) キーでアクティブ化）
• スクリーンリーダーでテストして、ウィジェットが正しくアナウンスされることを確認する
• 十分な色のコントラストを維持する（WCAG AA最小）

UI (ユーザーインターフェース) の競合を避ける

Webサイトの下の角は混雑した場所です。ランチャーを配置する前に：

• Cookie (クッキー) 同意バナーを確認する
• 他のプロバイダーからのライブチャットツールを探す
• 独自のナビゲーション要素を検討する
• オフセット設定を使用して余裕を作る

パフォーマンスへの影響

Zendesk (ゼンデスク) ウィジェットは非同期的にロードされるため、ページのレンダリングをブロックすることはありません。ただし、ウィジェットの状態をチェックしたり、頻繁に更新したりするカスタムランチャーは、オーバーヘッドを追加する可能性があります。イベントハンドラーをシンプルに保ち、高速な更新をデバウンスします。

eesel AI (イーゼルAI) でウィジェットを強化する

ランチャーを設定したら、次の質問はお客様がそれをクリックしたときに何が起こるかということです。そこで私たちがお手伝いできます。

eesel AI (イーゼルAI) では、Zendesk (ゼンデスク) メッセージングと統合して、Web Widget (ウェブウィジェット) を通じてAI (人工知能) 搭載の応答を提供します。仕組みは次のとおりです。

eesel AI (イーゼルAI) をZendesk (ゼンデスク) アカウントに接続すると、当社のAI (人工知能) は過去のチケット、ヘルプセンターの記事、マクロ、および接続されているドキュメントから学習します。お客様がウィジェットを通じて会話を開始すると、eesel AI (イーゼルAI) は最初の応答を処理し、一般的な質問に答え、必要に応じて人間のエージェントにエスカレーションすることができます。

AI (人工知能) は、チームが実際にどのように書いているかについてトレーニングされているため、ブランドボイスを維持します。また、学習を継続します。応答を修正したり、ドキュメントを更新したりすると、eesel AI (イーゼルAI) はそのフィードバックを自動的に組み込みます。

これは、デフォルトのボタンを使用しているか、完全にカスタム実装を使用しているかに関係なく、あらゆるランチャー構成で機能します。AI (人工知能) は、お客様が目にするウィジェットインターフェイスの背後にあるため、フロントエンドの設定を変更せずに自動化のメリットを得ることができます。

品質を維持しながらチケット量を削減したいチームにとって、適切に設計されたランチャーとAI (人工知能) 搭載の応答を組み合わせることで、サポート負荷を大幅に削減できます。Zendesk (ゼンデスク) のベンチマークデータによると、効果的なセルフサービスと自動化により、チケット量を最大25％削減できます。

ニーズに合った適切なランチャーオプションを選択する

決定方法の短いバージョンを次に示します。

次の場合、デフォルトの正方形または円形のランチャーを使用します。

• 最小限のメンテナンスで迅速なセットアップが必要な場合
• 標準のブランディングオプションで十分な場合
• まだ何が必要かわからない場合

次の場合、カスタムランチャーを構築します。

• 特定のブランディング要件がある場合
• 標準外の配置または複数のトリガーポイントが必要な場合
• カスタム通知バッジを表示したい場合

次の場合、埋め込みモードを使用します。

• 専用のサポートページを構築している場合
• 会話インターフェイスをすぐに表示したい場合
• 会話リストとメッセージを並べて表示する分割ビューレイアウトが必要な場合

シンプルに始めましょう。デフォルトのランチャーはほとんどのチームに適しており、後でいつでもカスタム実装にアップグレードできます。重要なのは、お客様の目の前にすばやくサポートを提供し、学習した内容に基づいて反復処理することです。

覚えておいてください：ランチャーは単なる入り口です。重要なのは、その向こう側で何が起こるかです。デフォルトの設定を使用する場合でも、完全にカスタムなものを構築する場合でも、お客様がそのドアをくぐったときに、会話体験が価値を提供することを確認してください。