この記事には、別々ですが関連する2つの手順が含まれています。どちらの手順も、Helpshiftが2021年5月11日にリリースしたヘルプセンター2.0に関するものです。

  • 最初の手順は、既存のHelpshiftのお客様（従来のヘルプセンター1.0製品をお持ちで、すでにWebサポートポータルを別のWebページに埋め込んでいるお客様）が、埋め込みポータルを新規ヘルプセンターエクスペリエンスに移行する方法を説明します。
  • 2番目の手順は、Helpshiftの新規のお客様（ヘルプセンター1.0をお持ちでない、または使用されていないお客様）に、ヘルプセンター2.0のWebサポートポータルを別のWebページに埋め込む方法を説明するものです。

すでに埋め込まれているウェブサポートポータルをヘルプセンター1.0からヘルプセンター2.0に移行する

  1. Helpshiftインスタンスに管理者としてログインしてください。
  2. Helpshiftツールバーで、設定をクリックします。
  3. ナビゲーション ペインで、[サポート設定] 領域までスクロールします。次に、ブランディングとカスタマイズをクリックします。
  4. ブランディングとカスタマイズの機能を使って、近日公開予定のヘルプセンター2.0のユーザーエクスペリエンスのルックアンドフィールを設定およびテストを開始してください。
  5. 作業中の内容をステージングやデプロイをせずに保存するには、下書きを保存をクリックしてください。
    必要に応じて繰り返してください。
  6. 別のブラウザタブを開いてください。
  7. 2番目のタブで、設定> サポート設定 | Webサポートポータル に移動します。
    Webサポートポータルページが開きます。
  8. Webサポートポータルのページで、「Webサポートポータルをアップグレード」のタイルを探します。次に、タイルでプレビューをクリックします。
    Helpshiftは、インタラクティブなプレビューを読み込み、ヘルプセンター 2.0への最終的なアップグレードが、公開Webサポートポータルのルックアンドフィールにどのように影響するかを概算します。このプレビューは、ブラウザでローカルに実行されます。他の誰もそれを見ることはできません。
  9. ローカルプレビューの表示とテストが完了したら、閉じてWebサポートポータルのページに戻ってください。
  10. Webサポートポータルページで、リンクを生成してコードを埋め込むをクリックします。［リンクを生成してコードを埋め込む］ダイアログボックスが開きます。これはタブ付きのダイアログで、従来のサポートポータルタブ（ヘルプセンター1.0のルックアンドフィール用）がデフォルトで選択されています。
  11. 従来のヘルプセンターではなく、ヘルプセンター2.0のデザインを埋め込む予定の場合は、サポートポータル2.0（プレビュー）タブをクリックしてください。
  12. [アプリを選択] リストから、貴社のウェブサポートポータル戦略に従って、次のいずれかを実行してください。
    • ヘルプセンターを1つのアプリからのみ表示するスタンドアロンポータルを準備するには、アプリ名を選択してください。
    • すべてのアプリのヘルプセンターを統合する集中ポータルを準備するには、すべてを選択してください。
  13. 戦略に従って、[プラットフォームを選択]リストから、次のいずれかを実行してください。
    • Webサポートポータルの範囲を、1つのオペレーティングシステム上でのアプリ（または複数のアプリ）のドキュメント化された設定と動作に限定するには、プラットフォーム名を選択してください。
    • あるいは、ウェブを選択してください。
  14. [言語を選択] リストから、ブランドがサポートしている言語の中から、埋め込み型ウェブサポートポータルの主要言語として使用する言語を選択してください。
  15. (任意) 読み込まれるお問い合わせページをアプリ固有にするかどうかを設定するには、お問い合わせページを直接開くチェックボックスをオンまたはオフにします。
    注：「プラットフォームを選択」リストが「すべて」に設定されている場合、このチェックボックスは非表示になります。
  16. (任意) Webサポートポータルを、独自のヘッダーとフッターがすでに装備されているWebページに埋め込む場合、または埋め込まない場合、[ヘッダーとフッターを非表示]チェックボックスをオンまたはオフにします。
  17. HTML <iframe> 埋め込みコードの横にある コピーをクリックします。
    ウェブサポートポータルのHTML埋め込みコードをコピーしました。
  18. 埋め込みウェブサポートポータルを表示するウェブページを見つけ、編集のために開いてください。
  19. HTML埋め込みコードのスニペットを貼り付けて、作業内容を保存してください。
  20. (条件付き) Webサポートポータルに組み込まれているページヘッダーとページフッターを非表示にするには（独自のヘッダーとフッターが既にあるWebページに埋め込む予定があるため）、現在埋め込まれているURLにhbhf=1を追加してください。
    例：
    <iframe id='hs-support-frame' src='https://<your_brand>.helpshift.com/a/?hbhf=1' width=100% height=100% frameborder='0'> </iframe>
    注意：特定のアプリを埋め込むことを選択した場合、一部のお客様が「/a/」なしでウェブヘルプセンターを誤って埋め込んでいることがあります。hbhf=1が機能するためには、正しく埋め込む必要があります。
  21. あなたのiframeとその埋め込みコンテンツを含むウェブページを再公開してください。サイトのプレビューがあなたの期待を満たし、ブランディング要件を満たしていることを確認してください。
  22. （条件付き）サイトのプレビューにご満足いただけましたら、「ブランドとカスタマイズ」ページの「ウェブサポートポータル」タブで、ヘルプセンターのアップグレードをクリックしてください。
  23. アップグレードが完了したら、埋め込みウェブサポートポータルをもう一度テストし、エラーや意図しない影響を修正してください。

ヘルプセンター 2.0 のウェブサポートポータルを、管理している任意のウェブページの HTML <iframe> に埋め込む

  1. Helpshiftインスタンスに管理者としてログインします。
  2. Helpshiftツールバーで、設定をクリックします。
  3. ナビゲーション ペインで、[サポート設定] 領域までスクロールします。次に、Webサポートポータルをクリックします。
    Webサポートポータルページが開きます。
  4. Webサポートポータルのページ上部付近にある、リンクを生成してコードを埋め込むをクリックしてください。
    [リンクを生成してコードを埋め込む] ダイアログボックスが開きます。
  5. [アプリを選択] リストから、貴社のウェブサポートポータル戦略に従って、次のいずれかを実行してください。
    1. ヘルプセンターを1つのアプリからのみ表示するスタンドアロンポータルを準備するには、アプリ名を選択してください。
    2. すべてのアプリのヘルプセンターを統合する集中ポータルを準備するには、すべてを選択してください。
  6. 「プラットフォームを選択」リストから、あなたの戦略に従って、次のいずれかを実行してください。
    1. Webサポートポータルの範囲を、1つのオペレーティングシステム上でのアプリ（または複数のアプリ）のドキュメント化された設定と動作に限定するには、プラットフォーム名を選択してください。
    2. あるいは、ウェブを選択してください。
  7. [言語を選択] リストから、ブランドがサポートしている言語の中から、埋め込みウェブサポートポータルの主要言語として使用する言語を選択してください。
  8. (任意) 読み込まれるお問い合わせページをアプリ固有にするかどうかを設定するには、[お問い合わせページを直接開く]チェックボックスをオンまたはオフにします。
  9. (任意) Webサポートポータルを、独自のヘッダーとフッターが既にあるWebページに埋め込む場合、または埋め込まない場合、ヘッダーとフッターを非表示にするチェックボックスをオンまたはオフにします。
  10. HTML <iframe>埋め込みコードのラベルの横にある、コピーをクリックします。
    これで、ウェブサポートポータルのHTML埋め込みコードをコピーしました。
    埋め込みウェブサポートポータルを表示するウェブページを見つけ、編集のために開いてください。
  11. HTML埋め込みコードのスニペットを貼り付けて、作業内容を保存してください。
  12. 埋め込み型ウェブサポートポータルが、計画どおりに表示され、動作することを確認してください。