メインコンテンツにスキップ

Help Centerをカスタマイズする

Help Centerのブランド設定とカスタマイズオプションの管理方法。

対応者:Beth-Ann Sher

Help Center Settingsには、Help Centerのブランド設定や顧客向けの表示方法を制御するための多くのカスタマイズオプションがあります。Help Centerの変更をリアルタイムで設定およびプレビューする方法はこちらです。


一般設定

Help Centerの対応言語、ドメイン、Analytics、プライバシー、ソーシャルメディア画像を設定するには、Settings > Help Centerに移動します。設定したいHelp Centerをクリックし、右上のConfigure and styleを選択します。

次に、Generalタブを開きます。👇

Multi Help Centerを使用している場合は、各Help Centerの設定を個別に構成できます。

対応言語

デフォルト言語を選択するには、Settings > Help Center > Configure & Styleに移動し、GeneralタブをクリックしてSupported languagesを開きます。

次に、デフォルト言語を選択し、Save and set liveをクリックします。

Default languageを選択すると、Help Centerのユーザーインターフェースは設定した言語で表示されます。これにより、以下の言語が変更されます:

  • ホームページの検索プロンプト。

  • 記事数、著者、最終更新日。

  • 記事のリアクションプロンプト。

  • ‘We run on Intercom’ロゴなど。

注意:

Help Centreが単一言語のみをサポートしている場合でも、単一言語を表示するドロップダウンオプションがあり、これを削除することはできません。

ドメイン

デフォルトドメインを使用する

Help Centerをライブに設定すると、デフォルトでIntercomドメインを通じてコンテンツが利用可能になります。まず、Help Centerがライブ設定されていることを確認してください。

次に、Settings > Help Center > Configure & Styleに移動し、GeneralタブをクリックしてDomainsを開き、「Default Help Center URL」を取得します。

アプリ名はURLの一部になります。例えば、アプリ名が‘ExampleApp’の場合、URLは次のようになります。

URLのアプリ名部分(例:exampleapp)は好きなように編集できます。

カスタムドメインを設定する

独自のドメインを通じてコンテンツを提供したい場合は、カスタムドメインを設定できます。

DNSプロバイダー(例:GoDaddyCloudflareDNSimpleRoute53など)にアクセスし、ターゲットホストをcustom.intercom.helpにしたCNAMEレコードを作成します。このガイドは、あなたやエンジニアが設定するのに役立ちます。

注意:

  • サブドメイン(例:help.exampleapp.io)とサブパス(例:exampleapp.io/help)の両方がサポートされています。

  • DNSの変更は最大72時間かかることがありますが、通常はもっと早く反映されます。

次に、Settings > Help Center > Configure & Styleに移動し、Domainsを開いてカスタムHelp CenterドメインURLを入力し、Save and set liveをクリックします。

検索エンジンのインデックス登録を無効にして、記事を非公開にすることもできます。

Analytics

Help CenterにGoogle Analyticsを統合して訪問者の行動を把握するには、GA4 Measurement IDが必要です。

Google AnalyticsアカウントからGA4 Measurement IDをコピーしたら、Settings > Help Center > Configure & Styleに移動し、Analyticsを開いて「Google Analytics Tracking ID」に貼り付けます。

プライバシー

記事をログイン済みのUsersのみに制限するには、記事の詳細パネルで記事の対象をUsersに設定します。記事がUsersに設定されると、製品にログインしている人だけが閲覧可能になり、訪問者やleadsはHelp Centerや検索結果で記事を見られなくなります。Settings > Help Center > Configure & Styleに移動し、Privacyを開いてログインページのリンクを入力します。

訪問者やleadが制限された記事(Usersのみ設定)にアクセスしようとすると、ここで入力したログインページURLにリダイレクトされ、ログインを促すメッセージが表示されます。ログインページURLがない場合はリダイレクトされません。

検索エンジンのインデックス登録について学びましょう。

Help Centre自体を非公開にすることはできません。すべての記事を非公開にしても、顧客はHelp Centreにアクセスできますが、ログインするまで記事は見られません。

ソーシャルメディア画像

ファビコン

Settings > Help Center > Configure & Style > General > Social media imagesからfaviconをアップロードできます。このfaviconは、顧客がHelp Centerのウェブサイトを訪れた際にブラウザのタブタイトルの前に表示されます。

注意:Help Centerのホームページでは、ブラウザのタブタイトルにサイト名の前にシステム生成のプレフィックス(例:「Home |」(英語))が自動的に含まれます。このプレフィックスは現在、ワークスペースのメンバーによる削除やカスタマイズはできません。

推奨比率:1:1。最大150KB、588x588ピクセル。

ソーシャルメディア画像

高解像度のソーシャルメディア画像もアップロードできます。Help Centerや記事がFacebook、Twitter、その他のソーシャルメディアで共有されたときに表示されます。

推奨比率:1.91:1、2MB、1200 x 630ピクセル。

Help Centerを削除する

このオプションは複数の Help Centersをお持ちの場合にのみ利用可能で、元の(デフォルトの)Help Centerをワークスペースから削除することはできません。

これが唯一の Help Center で削除したい場合は、代わりにNot liveに設定できます。

Help Center を削除すると、復元する方法はありません。


スタイリング設定

Help Center のスタイリングとホームページ、コレクション、記事、ヘッダー、フッターのコンテンツの表示方法を管理するには、設定 > Help Center > Configure & Styleに移動し、Stylingタブを開いてください。

Multi Help Centerを使用している場合は、各 Help Center のスタイリング設定を個別に構成できます。

ブランドをインポート

設定 > Help Center > Configure & Styleに移動し、StylingをクリックしてImport your brandを開き、ブランドのURLを入力してください。Intercomは自動的にHelp Centerをブランドに合わせてスタイリングします。

ブランドがインポートされると、ロゴとカラーが自動的に適用されます。

ブランドをインポートする際は正しいURLを提供する必要があります。通常はウェブサイトのトップレベルドメインです。例えば、「example.com」で、「subdomain.example.com」ではありません。一部のドメインはアクセスできないか機能しない場合があり、その場合はエラーメッセージが表示されます。

インポートされたカラーはHero blockセクションのすべてのカラーオプションの隣に表示されます。これにより、ブランドカラーを失うことなくHelp Centerのさまざまな部分の色を簡単に編集できます。

変更は自動的に保存されないため、必ず保存して公開をクリックしてください。

ヒーロー画像の追加

Hero imageを含める場合、画像はレスポンシブであることに注意してください。これは、画像がヘッダー全体の領域を自動的に拡大縮小することを意味します。画像が切り取られたり伸びたりしないように、画像のアスペクト比を選択したヘッダーの高さに合わせる必要があります。

推奨される寸法と比率

この表を使って、設定で選択したHeader heightに画像が合っていることを確認してください。

Header size

Height

Recommended aspect ratio

Example dimensions

Small

245px

6:1

1470 x 245px

Medium

360px

4:1

1440 x 360px

Large

480px

3:1

1440 x 480px

共有要素

本文の背景色

設定 > Help Center > Configure & Styleに移動し、StylingタブをクリックしてShared elementsを開くと、本文の背景色を変更でき、Help Centerのすべてのページ(ホーム、コレクション、記事、検索、エラーページなど)がそれに応じて適応します。

アクションカラー

本文の背景色とよく対比するAction colorを設定してください。これはボタン、リンク、その他の要素に使用されます。

注意

  • JPEG/PNG/GIF形式でアップロードされたアイコンにはアクションカラーは適用されません。

  • Help Centerが公開されるとカラーが更新されます。

デザインスタイル

すべてのページのコレクションと記事に適用されるCardまたはFloatingデザインスタイルから選択してください。

カードデザインスタイルを選択すると、カードの背景色はHelp Centerの背景色と十分なコントラストを提供するよう自動生成されます。カードの背景色はカスタマイズできません。

コーナー半径

コレクション、記事、およびホバー状態(コレクション内の記事にカーソルを合わせたとき)の要素のコーナー半径を設定してください。

フォント

Help Centerで使用するために事前に読み込まれたGoogle Fontsのリストから選択してください。

  • Primary font - ウェルカムメッセージ、タイトル、見出しに使用されます。

  • Secondary font - 説明文、記事本文、その他すべてのテキストに使用されます。

利用可能なフォントオプション

  • ビター

  • インター

  • ラト

  • ローラ

  • モントセラート

  • オープン サンズ

  • オズワルド

  • プレイフェア ディスプレイ

  • ポッピンズ

  • ノト サンズ

  • ノト セリフ

  • ラレウェイ

  • ロボト

  • ロボト モノ

  • ロボト スラブ

注意:

  • 選択したフォントはMessengerには適用されず、常にシステムフォントが使用されます。

  • 以前使用していたフォントproxima novaは2023年6月に削除されました。似た見た目を実現するにはMontserratまたはOpen Sansを使用できます。

または、Manage custom fonts をクリックして、ブランドスタイルに合ったcustom fontをアップロードしてください。

記事の著者を表示

ホームページ、Collections、Articlesで記事の著者を表示または非表示にするには、Settings > Help Center > Configure & Styleに移動してください。

Stylingタブをクリックし、Shared elementsを開いて下にスクロールし、「記事の著者を表示」を切り替えます。

ヘッダー

Settings > Help Center > Configure & StyleからStylingタブをクリックし、Headerを開いて、ロゴ、ページタイトル/会社名、およびヘッダーリンクを使ってトップヘッダーセクションをデザインします。

ヘッダーは、すべてのsupported languagesごとに個別に設定することもできます。

ロゴ

高解像度のlogoをアップロードしてください。

推奨比率:5:1。最大1MB、最大幅/高さ720px。

Help Center Headerにlogoを追加するとページタイトルが置き換えられます。Help Center Footerにlogoを追加するとページタイトルが置き換えられます。

ヘッダーリンク

ブログやコミュニティなど、他のウェブページへのリンクを最大3つ追加できます。

ヘッダーは他のコンテンツの上に重なるのではなく、下に押し下げます。

ヒーローブロック

ヒーローブロックはHelp Centerホームページのトップにある大きなバナーエリアで、歓迎メッセージと検索バーを含みます。Header(ロゴとナビゲーションリンクを表示)より下、ページの他のコンテンツより上に位置します。

歓迎メッセージ

Settings > Help Center > Configure & StyleからStylingタブをクリックし、Hero blockを開いてHelp Centerホームページのwelcome messageにユーザー属性を追加します。

顧客がログインしている場合、ユーザー属性が含まれます。訪問者やlead(未ログイン)の場合は、設定したフォールバック値が表示されます。例えば、フォールバックに「there」を設定すると、訪問者は「Hi there!」と表示され、空白や壊れた歓迎メッセージにはなりません。

注意:

注意:Hero blockの歓迎メッセージは空白にできません。Hero blockはHelp Centerホームページのコアコンポーネントであり、必ず何らかのテキストが表示されます。歓迎メッセージ欄が空の場合、デフォルトまたはプレースホルダーテキストが表示されます。顧客に見せる内容を制御するために歓迎メッセージを設定してください。

背景

選択した背景色は以下の項目に適用されます:

  • アバターのアイコン色(画像がない場合)。

  • 記事内のリンク。

  • Hero blockの色とグラデーション、または画像のアップロード。

  • フェード背景(色のグラデーションを使用している場合)。

現在、デフォルトではすべてのアバターは透明です。ただし、以下の場合は透明ではありません:

  • アバターがアバターグループ内にレンダリングされている場合(そのグループにFin avatarが含まれていない場合)

  • そのアバターグループに複数のアバターが含まれている場合

テキストの色

選択したテキストの色は以下に適用されます:

  • Heroブロック内のリンク。

  • Search bar内のテキスト。

Hero image 推奨比率: 5:2。ファイルサイズは最大2MB、最大幅/高さは3000pxです。これはホームページのトップとHelp Centerの各ページに表示されるため、ブランドを表す強いイメージを追加してください。

"Fade background"はHelp Centerのホームページにのみ表示されます。

高さ

ホームページのHelp Centerヘッダーの全体の高さを選択してください。最小高さは245ピクセル、最大高さは600ピクセルです。

Search bar

3つの異なる Search barサイズから選択し、次に配置を選択してください:

  • 縦方向 - 左または中央。

  • 横方向 - 上、中央、または下。

短い

中くらい

長い

角の半径

Search barの角の半径も選択できます。最小0ピクセル、最大30ピクセルです。

レイアウトとセクション

Settings > Help Center > Configure & Styleから、スタイリングタブをクリックし、Layout and sectionsを開いて、Collectionsの表示方法をデザインし、ホームページでArticles、Content、Tickets Portalのセクションを有効にするか選択します。各設定はEdit をクリックしてセットアップしてください。

Collectionsセクション

注意: CollectionsはHelp Centerのすべての対応言語で公開された記事が必要です。Collectionに英語版のみが公開されている場合、スタイリング設定には表示されません。これはHelp Centerのすべての言語で設定が共通のためです。解決するには、該当のCollectionに移動し、Help Centerが対応する各言語で少なくとも1つの記事のバージョンを作成・公開してください。

レイアウト

1、2、または3カラムのレイアウトから選択してください。

次にCollectionsカードスタイルを選択してください:

  • クラシック - 現在のCollectionカードスタイル。

  • ビジュアル - アイコンや画像のスペースが大きいスタイル。

  • コンパクト - 最小スペースで最も重要な情報を表示。

カードスタイルをクリックすると、右側にプレビューが自動表示されます。

注意: コンパクトなCollectionsレイアウトはExpert planが必要です。

すべてのカードスタイルはレスポンシブで、モバイル、デスクトップ、タブレットのどの解像度でも美しく表示されます。右側のドロップダウンから表示したいオプションを選択してプレビューも可能です。

デザイン

Collectionカードにはアイコン、画像、またはテキストのみを使用できます。

アイコンを使用する場合、以下の色を変更できます:

  • アイコンの色: カラーピッカーで色を選択するか、16進コードを入力してください.

  • アイコンの背景:

    • 色 - カラーピッカーで色を選択するか、16進コードを入力してください。

    • 画像 - 画像をアップロードしてください。

    • グラデーション - カラーピッカーで最大3色を使ってグラデーションを作成するか、16進コードを入力してください。

注意:

  • 推奨比率: 1:1

  • 推奨寸法: 最大48pxの高さ/幅

  • デザインの選択はCollectionの更新時に利用可能なオプションを決定します。例えば、画像を選択すると、個別のCollection更新時にアイコンではなくアップロードした画像を選択できます。

画像を使用する場合、Collectionカードの背景を埋めるため、visualテンプレートと非常に相性が良いです。

個別のCollectionカードはドロップダウンからCollectionを選択して画像でスタイル設定できます。また、All collectionsオプションを選択するとすべてのCollectionにスタイルを適用でき、個別のスタイルは上書きされます。

注意:

Articlesセクション

Help CenterのホームページにArticlesセクションを追加してください。

有効にしたら、編集をクリックして記事のロケールを選択し、表示する列数を選び、このセクションにタイトルを付けてから、Help Centerから記事を選択します。Help Centerで公開されている記事を最大12件まで選択できます。

注意:

  • 各ロケールごとに、その言語で翻訳された公開済みの記事のみ選択できます。

  • audience targetingルールが適用された記事はここで選択・表示できますが、顧客がaudienceルールに合致する場合にのみ表示されます。

  • プレビューにはデフォルトのロケールの記事リンクのみ表示されます。

コンテンツセクション

Help Centerのホームページにカスタマイズ可能なコンテンツセクションを追加します。新機能、ウェビナー、または顧客向けの行動喚起を強調するのに最適な場所です。有効にしたら、編集をクリックしてコンテンツセクションをカスタマイズしてください。

対応言語のいずれかを選択してローカライズされたコンテンツを作成します。

コンテンツカードに任意のタイトル、説明、行動喚起ボタンを追加します。

次にスクロールしてスタイルを設定します:

  • デザイン - カードまたは全画面を選択します。

  • 背景 - 色、画像、またはグラデーションを選択します。

  • テキストカラー - タイトルと説明のテキストカラーを選択します。

右側のプレビューでホームページ上のコンテンツセクションの表示を確認できます。プレビューはデフォルト言語のみ表示されます。

コンテンツセクションをHelp Centerに追加する準備ができたら、保存して公開を選択することを忘れないでください。

Ticketsポータル

Intercom ticketsを使用している場合、tickets portalを有効にすると、顧客組織にすべてのticketsをリアルタイムで一元的に表示できます。

順序

ホームページでArticlesをCollectionsの上または下に表示するには、各セクションの横にあるドラッグ&ドロップツールを使って順序を変更してください。

コレクションページ

コンテンツ説明

設定 > Help Center > 設定とスタイルから、スタイリングタブをクリックし、コレクションページを開いて各コレクションの「コンテンツ説明」を表示または非表示にできます。説明を非表示にすると記事のスキャンが容易になり、表示すると顧客がそのコレクションの内容を理解しやすくなります。

注意:コレクションセクションは他のセクションのようにオフにできません。

記事ページ

目次

設定 > Help Center > 設定とスタイルから、スタイリングタブをクリックし、記事ページを開いて、記事内の任意のH1またはH2見出しを使った目次の有効化または無効化ができます。

関連記事

Help Centerの各記事の下に最大5件の関連記事を表示できます。

フッター

Help Centerのフッターの見た目を、シンプル、クラシック、またはマルチレベルの3つのテンプレートからカスタマイズできます。ロゴをアップロードし、最大16件のソーシャルメディアリンクを追加し、選択したテンプレートでフッターリンクをグループ化して整理しやすくブランド化します。

このフッターはHelp Centerのすべてのページ(ホームページ、コレクション、記事)で一貫して表示されます。

フッターテンプレートの選択

設定 > Help Center > 設定とスタイルから、スタイリングタブをクリックし、フッターを開いて、Help Centerのフッターを完全にカスタマイズしてブランドに合わせることができます。

Help Center記事のフッターにある控えめな「Powered by Intercom」リンクは、設定 > 一般で制御できます。

「Intercom Attribution Message」セクションを探し、トグルでオンまたはオフに切り替えます。

注意:このトグルは送信メールとHelp Center記事の両方に同時に影響します。片方だけでリンクを有効または無効にすることはできません。

ニュースセンター画像の寸法

ニュースセンターに画像をアップロードする際は、これらの推奨寸法を使用してください。

ロゴ

推奨比率:5:1。

ヘッダー画像

推奨比率:5:2。大画面で鮮明に表示するには、約3000×1200ピクセルを目指してください。

ファビコン

推奨比率:1:1。最大150KB。



プレビュー

ブランド化されたHelp Centerをリアルタイムで簡単に視覚化し、変更をライブに設定する前に確認できるプレビュー機能(ホームページ、コレクション、記事)を使用してください。

モバイル、タブレット、デスクトップの各デバイスで異なる解像度のプレビューも選択できます。

Help Centerはフォーム、iFrame、カスタムHTMLの埋め込みをサポートしていません。

こちらの回答で解決しましたか?