ZendeskメッセージングのWebViewテンプレートを作成および使用する方法

ZendeskメッセージングのWebView（ウェブビュー）テンプレートを使用すると、外部Webサイトをチャットウィジェットの会話に直接埋め込むことができます。顧客をフォームの入力や製品ページの閲覧のために別の場所に誘導する代わりに、会話の流れの中で顧客の関心を維持できます。このガイドでは、WebViewとは何か、いつ使用するか、そして正確な設定方法など、知っておくべきことをすべて説明します。

ZendeskメッセージングのWebViewテンプレートとは？

WebViewテンプレートは、Zendesk AI Agents - Advancedで利用できる3つの構造化メッセージタイプの1つです。フォームが顧客情報を収集し、カスタムJSONテンプレートがカルーセルやクイック返信を表示するのに対し、WebViewは異なる目的を果たします。WebViewを使用すると、顧客に会話から離れることなく外部Webサイトを表示できます。

WebViewが他の構造化メッセージとどのように異なるかを以下に示します。

• フォームは、メールアドレス、名前、ドロップダウン選択などの単純な情報のための組み込みのデータコレクターです。
• カスタムJSONテンプレートは、製品カルーセル、クイック返信ボタン、NPSアンケートなどのインタラクティブな要素を作成します。
• WebViewは、Web Widget（ウェブウィジェット）内に外部Webサイトを表示します。Zendeskのネイティブ機能を超える複雑なインタラクションに最適です。

WebViewは、チャットウィジェット内のiframe（アイフレーム）に外部URLをロードすることによって機能します。顧客がWebViewボタンをクリックすると、Webサイトが会話の上のパネルで開きます。顧客はサイトを操作し、タスクを完了し、シームレスにチャットに戻ります。WebViewをサポートしていないチャネルの場合は、代わりに新しいブラウザタブで開くフォールバックURLを設定できます。

一般的なユースケースには、予約カレンダー、決済プロセッサ、製品コンフィギュレーター、ドキュメント署名ツール、およびアカウント管理ポータルが含まれます。Zendeskの組み込みフォームが提供できる以上の機能が必要な場合は、WebViewテンプレートの候補となります。

開始するために必要なもの

最初のWebViewテンプレートを作成する前に、いくつかの要件を満たす必要があります。それらを分解してみましょう。

Zendeskプランの要件：

技術要件：

• iframeのロードを許可する外部WebサイトのURL（ほとんどの最新のWebアプリは許可します）
• HTTPSプロトコル（セキュリティに必須）
• WebViewをサポートしていないチャネルのフォールバックURL

必要ないもの：

Sunshine Conversations API（サンシャインカンバセーションAPI）を使用してカスタム統合を構築するのとは異なり、WebViewテンプレートは開発者のリソースを必要としません。Zendeskのビジュアルインターフェースを通じて作成および管理できます。セットアップは簡単で、サポート管理者はエンジニアリングの助けを借りずに処理できます。

代替手段を評価しているチームのために、eesel AI（イーゼルAI）では異なるアプローチを提供しています。すべてのインタラクションタイプに対してテンプレートを構築するのではなく、当社のAIエージェントは既存のコンテンツから学習し、自律的に会話を処理します。テンプレートの複雑さなしにAIを活用したサポートを検討したい場合は、7日間の無料トライアルから始めることができます。

ステップバイステップ：最初のWebViewテンプレートの作成

ステップ1：AIエージェントの設定にアクセスする

管理センターに移動し、左側のサイドバーにある[チャネル]をクリックします。[AIエージェント]を選択して、高度なAIエージェントのリストを表示します。WebViewテンプレートを追加するエージェントを選択します。高度なAIエージェントをまだ作成していない場合は、最初に設定してメッセージングチャネルに接続する必要があります。

ステップ2：テンプレート管理に移動する

AIエージェントを選択した状態で、サイドバーの[設定]をクリックします。次に、メニューから[CRM統合]を選択します。コンテンツ領域の上部にいくつかのタブが表示されます。[テンプレート]タブをクリックして、構造化メッセージテンプレート管理インターフェースにアクセスします。

これが最初のテンプレートの場合は、「最初のテンプレートを作成」ボタンが表示されます。以前にテンプレートを作成したことがある場合は、既存のテンプレートのリストと、代わりに「テンプレートを作成」ボタンが表示されます。

ステップ3：新しいWebViewテンプレートを作成する

作成ボタンをクリックし、3つのテンプレートタイプオプションから[WebView]を選択します。WebViewテンプレート構成ページが開き、完了するためのいくつかのフィールドが表示されます。

ステップ4：テンプレートの詳細を構成する

必須フィールドに入力します。

**テンプレート名：**文字、数字、ハイフン、およびアンダースコアのみを使用して一意の識別子を入力します。スペースは使用できません。この名前はテンプレートリストに表示され、ダイアログにテンプレートを挿入するときに参照する名前です。「booking-calendar」や「product-configurator」のようなものが適しています。

**説明：**オプションですが、推奨されます。このテンプレートの機能と使用時期を説明する簡単なメモを追加します。これは、他のチームメンバーがテンプレートの目的を理解するのに役立ちます。

**メッセージテキスト：**AIエージェントがWebViewボタンの上に表示するメッセージ。これは、顧客のコンテキストを設定します。たとえば、「リアルタイムの空き状況を確認し、以下で予約できます。」

**ボタンテキスト：**顧客がWebViewを開くためにクリックするボタンのラベル。アクション指向に保ちます。「予約」、「製品の構成」、または「ドキュメントに署名」。

**URL：**ボタンがクリックされたときにロードされる外部WebサイトのURL。これはHTTPSを使用する必要があり、iframeでのロードを許可する必要があります。このURLを事前にテストして、iframeコンテキストで正しく動作することを確認してください。

**フォールバックURL：**WebViewをサポートしていないチャネルのバックアップURL。これは通常、新しいブラウザタブで開きます。通常、これはプライマリURLと同じですが、必要に応じて別のページを設定できます。

ステップ5：メッセージングの動作を設定する

[オプションフィールド]をクリックして、追加の構成オプションを展開します。

**サイズ：**WebViewパネルの表示サイズを選択します。オプションは次のとおりです。

• **コンパクト：**小さなパネル。単純なフォームまたは短いコンテンツに適しています。
• **トール：**中程度のパネル。ほとんどのユースケースに適しています。
• **フル：**ウィジェットのほとんどを占める大きなパネル。複雑なインタラクションに最適です。

**デフォルトアクション：**顧客に複数のオプションを提供している場合は、これをデフォルトアクションとしてマークします。

**WebViewを自動的に開く：**これを有効にすると、顧客がボタンをクリックしなくても、テンプレートがトリガーされたときにWebViewがすぐに開きます。邪魔になる可能性があるため、控えめに使用してください。

**メタデータフィールド：**WebViewインタラクションからデータをキャプチャするためのカスタムフィールドを追加します。これらは、レポートまたはフォローアップアクションのためにZendeskに情報を返すことができます。

ステップ6：保存してテストする

[作成]をクリックしてテンプレートを保存します。次に、徹底的にテストします。

1. Web Widgetプレビューを開きます
2. WebViewテンプレートを含むダイアログをトリガーします
3. 外部サイトが正しくロードされることを確認します
4. レスポンシブデザインを確保するためにモバイルデバイスでテストします
5. サポートされていないチャネルでテストして、フォールバックURLが機能することを確認します

WebViewに黒い画面またはエラーが表示される場合、外部サイトがiframeのロードをブロックしている可能性があります。iframeの埋め込みを許可するようにサイト管理者に連絡するか、別のソリューションを選択する必要があります。

会話フローでのWebViewテンプレートの使用

ダイアログへのテンプレートの追加

テンプレートの作成は作業の半分にすぎません。実際に顧客に表示されるように、AIエージェントの会話フローに挿入する必要があります。

テンプレートは、送信時に完全なテンプレートコンテンツに自動的に置き換えられる省略記法構文を使用します。ダイアログにテンプレートを追加する方法を次に示します。

1. AIエージェントの[テンプレート]タブに移動し、リストでWebViewテンプレートを見つけます
2. [省略記法]列に表示されている省略記号コードをクリックします（%((template:your-template-name))%のようになります）
3. コードがクリップボードにコピーされます
4. テンプレートを使用するダイアログを開きます
5. テンプレートを表示するAIエージェントメッセージブロックを選択します
6. メッセージテキストに省略記号コードを貼り付けます

テンプレート構文オプション

Zendeskは、テンプレートに2つの構文形式を提供します。

• 標準構文：%((template:template_name))%
• 代替構文：%{{template:template_name}}%

代替構文は、標準形式が使用している他のテンプレートシステムと競合する場合に存在します。どちらも同じように機能します。

テンプレート省略記号の前にテキストを含めることができます。これにより、2つのメッセージシーケンスが作成されます。最初にテキストが表示され、次にテンプレートが別のメッセージとしてレンダリングされます。テンプレート省略記号の後のテキストは無視されるため、すべてのコンテキストをコードの前に配置してください。

テンプレートへの変数の渡し

会話コンテキストに基づいて変化する動的なWebViewの場合は、静的なテンプレートの代わりに「WebViewを追加」CRMアクションを使用します。これにより、次のような会話中に収集された変数を使用してURLを構築できます。

https://your-booking-app.com?customer_id={{user.id}}&product={{conversation.product}}

このアプローチにより、外部サイトが顧客が誰であるか、および顧客が何を探しているかを知っているパーソナライズされたエクスペリエンスが作成されます。

WebViewテンプレートの一般的なユースケース

WebViewは、Zendeskのネイティブフォームでは不十分なシナリオでうまく機能します。最も効果的なアプリケーションを次に示します。

複雑な予約システム

予定のスケジュール設定には、カレンダーインターフェース、タイムスロットの選択、およびサービスオプションの比較が必要になることがよくあります。これをZendeskフォームに組み込むのではなく、既存の予約ツールを埋め込みます。Calendly（カレンディ）、Acuity Scheduling（アキュイティスケジューリング）、またはカスタム予約ポータルはすべてWebViewとして最適に機能します。

カスタムフォーム

複数ステップのデータ収集、条件付きロジック、または計算は、Zendeskの単純なフォームが処理できる範囲を超えています。顧客に詳細なアプリケーション、見積もり依頼、または登録プロセスを完了させる必要がある場合は、カスタムフォームをロードするWebViewが適切な選択です。

支払い処理

安全なチェックアウトフローでは、Stripe（ストライプ）、PayPal（ペイパル）、またはeコマースプラットフォームなどの確立された支払いプロセッサを使用する必要があります。これらをWebView経由で埋め込むと、顧客はサポート会話から離れることなくトランザクションを完了できます。

製品コンフィギュレーター

インタラクティブな製品カスタマイズツール、3Dビューア、または複雑なオプションセレクターは、WebViewの最適な候補です。顧客は理想的な製品構成を構築し、リアルタイムで価格の更新を確認し、質問をするか購入を完了するためにチャットに戻ることができます。

ドキュメント署名

DocuSign（ドキュサイン）やAdobe Sign（アドビサイン）などの電子署名ツールは、WebView経由でスムーズに統合されます。サポートエージェントは、払い戻しプロセス、契約更新、または紛争解決中にドキュメント署名をトリガーできます。

アカウント管理

アカウント設定の検索方法を説明する代わりに、チャットで顧客のアカウントポータルを直接表示します。これは、パスワードのリセット、サブスクリプション管理、プロファイルの更新、およびプライバシー設定に役立ちます。

これらのユースケースの多くでは、外部ツールとWebViewテンプレートの維持が複雑さを増す可能性があることに気付くかもしれません。eesel AIでは、既存のプロセスでAIエージェントをトレーニングすることで、複雑なWebView構成の必要性がなくなることがわかりました。当社のAIは、複数ターンの会話を処理し、API経由でアカウント情報を検索し、会話形式でプロセスを通じて顧客をガイドできます。Businessプランには、このアプローチを検討したい場合にAPIアクションと無制限のインタラクションが含まれています。

ベストプラクティスとトラブルシューティング

ウィジェットコンテキストのデザイン

WebViewは、Web Widget内の制約されたスペースに表示されます。外部ページは次のことを行う必要があります。

• より小さなビューポートに適応するレスポンシブデザインを使用する
• ウィジェットインターフェースと競合するナビゲーションメニューを避ける
• すばやくロードする（理想的には3秒以内）
• 次に何が起こるかを顧客に伝える明確な完了状態にする

セキュリティ要件

• 常にHTTPS URLを使用してください。HTTPサイトは、最新のブラウザではiframe内でロードされません。
• 外部サイトがiframeの埋め込みを許可していることを確認してください。X-Frame-OptionsヘッダーがSAMEORIGINまたはDENYに設定されている場合は、埋め込みが機能しないことを示しています。
• Zendeskと外部サイトの間で渡されるデータを検討してください。URLパラメータを慎重に使用し、機密情報を公開しないようにしてください。

ブラウザの互換性

Zendeskは、Chrome、Firefox、およびEdgeの最新の2つのバージョンと、最新のSafariをサポートしています。これらのブラウザでWebViewをテストしてください。iOSのモバイルSafariとChrome Mobileでは、モバイルデバイスでのiframeの動作が異なるため、特に注意が必要です。

一般的な問題と解決策

テストチェックリスト

WebViewテンプレートを本番環境にデプロイする前に：

• デスクトップのChrome、Safari、Firefox、およびEdgeでテストする
• iOS SafariおよびAndroid Chromeでテストする
• サポートされていないチャネルでのフォールバックURLの動作を確認する
• データキャプチャとメタデータフィールドが正しく機能することを確認する
• テンプレートが正しいダイアログステップに表示されることを確認する
• 外部サイトが3秒以内にロードされることを検証する
• 顧客アカウントでテストして、パーソナライズされたURLが機能することを確認する

WebViewが失敗したり、複雑さが増したりした場合は、バックアップアプローチがあると役立ちます。構造化されたテンプレートが不十分な状況を適切に処理するようにeesel AIを設計しました。当社のAIは、成功したインタラクションから学習し、外部ツールを必要とせずに顧客のニーズを解決できることがよくあります。Zendeskのテンプレートシステムに制限がある場合は、デモを予約して、自律的なAI処理がどのように比較されるかを確認してください。

WebViewテンプレートの代替

WebViewは常に適切なソリューションではありません。ニーズに応じて、次の代替手段を検討してください。

ネイティブZendeskフォーム

単純なデータ収集（名前、メール、ドロップダウン選択、短いテキスト）の場合、Zendeskの組み込みフォームテンプレートは、セットアップが高速で、より信頼性があります。チケットフィールドと直接統合され、外部ホスティングは必要ありません。最高の顧客エクスペリエンスを得るには、フォームを5つ以下のフィールドにしてください。

カルーセルとクイック返信

製品を紹介したり、簡単な選択肢を提供したりする場合は、カルーセルに画像とボタンを含む最大10枚のスクロール可能なカードを表示します。クイック返信は、最大11個の定義済みのオプションをクリック可能なボタンとして表示します。どちらも、iframeの複雑さなしに、顧客をネイティブメッセージングエクスペリエンスに維持します。

サードパーティのマーケットプレイスアプリ

Zenplates（ゼンプラットフォーム）のInteractive Messaging Templates（インタラクティブメッセージングテンプレート）などのアプリは、エージェントが構造化されたメッセージを選択して送信できるように、Zendeskのメッセージング機能を拡張します。これらは、AIエージェントを介してすべてを自動化するのではなく、人間のエージェントが構造化されたメッセージを選択して送信する場合にうまく機能します。

APIベースのカスタムソリューション

最大限の柔軟性を得るために、Sunshine Conversations APIを使用すると、開発者は完全にカスタムのメッセージタイプを構築できます。これにはエンジニアリングリソースが必要ですが、テンプレートベースのアプローチの制限がなくなります。

自律的なAI処理

すべてのシナリオに対してテンプレートとWebViewを構築するのではなく、一部のチームは会話を自然に処理するAIエージェントに移行しています。予約カレンダーを表示する代わりに、AIが明確にする質問をし、API経由で空き状況を確認し、会話形式で予約を確認します。これにより、顧客が外部インターフェースと対話する必要がなくなります。

当社は、この哲学を中心にeesel AIを構築しました。当社のAIエージェントは、過去のチケット、ヘルプセンター、およびドキュメントから学習し、事前定義されたテンプレートなしで顧客との会話を処理します。従来はWebViewが必要になる可能性のある複雑なシナリオでは、AIが会話形式で情報を収集し、API統合を介してアクションを実行できることがよくあります。その結果、よりシンプルなセットアップで、可動部品が少なくなります。7日間無料でお試しして、自律的な処理がテンプレートベースのワークフローとどのように比較されるかを確認してください。

WebViewテンプレートでZendeskメッセージングの強化を開始する

ZendeskメッセージングのWebViewテンプレートは、会話型サポートと複雑な外部ツールとのギャップを埋めます。会話の流れを中断することなく、予約カレンダー、支払いフォーム、または製品コンフィギュレーターを表示する必要がある場合は、WebViewがソリューションです。

セットアップには、適切なプラン（Suite TeamとAI Agents - Advanced）、互換性のある外部Webサイト、およびZendesk管理センターでのいくつかの構成が必要です。構成が完了すると、WebViewは単純な省略記号構文を使用してAIエージェントのダイアログにシームレスに統合されます。

広範なWebView構成を構築する前に、各ユースケースで外部インターフェースが本当に必要かどうかを検討してください。ネイティブフォームで十分な場合があります。カルーセルの方がうまく機能する場合があります。また、ワークフロー全体をAIエージェントが会話形式で処理し、プロセスを学習して直接アクションを実行できる場合があります。

テンプレート管理が圧倒的であるか、WebViewで達成できることに制限がある場合は、当社がお手伝いします。eesel AIでは、テンプレートの複雑さなしに顧客との会話を処理する自律的なAIエージェントを専門としています。当社のAIは、既存のコンテンツから学習し、ヘルプデスクと統合し、必要に応じて人間のエスカレーションを行います。eesel AIを7日間無料でお試しいただくか、デモをスケジュールして、テンプレートベースのアプローチと比較してどのように機能するかをご確認ください。