SmartSearchの検索UIをZendeskのヘルプページに埋め込む手順

概要

SmartSearch導入の全体の流れに関する情報は、以下のリンクをご参照ください。

SmartSearchの導入プロセスについて

このセクションでは、検索UIをZendeskのヘルプページに埋め込む方法を詳しく解説します。

検索バーを埋め込む手順

1. SmartSearchの管理画面から

SmartSearchの管理画面から、JavaScriptタグをコピーしてください。

2. ヘルプページのデザインテンプレートをコードエディタから編集する

Zendeskのサポートページに従い、コードエディタを開き、埋め込みたいページのテンプレートを修正します。

https://support.zendesk.com/hc/ja/articles/4408839332250

3. 適切な箇所にコピーしたJavaScriptタグをペースト

コピーしたJavaScriptタグを、自社プロダクトの必要な位置にペーストして埋め込んでください。

ex. SmartSearchのタグで指定したelementId: "smart_search"を指定しておりますので、<div id="smart_search"></div> の位置に検索バーが表示されるようになっております

※ タグの埋め込みに際して、エラーや予期せぬ動作が起きないように、エラーハンドリング等の対応を行ってください。

※ elementId が指定されたエレメント内にはSmartSearchが表示されるため、他のエレメントは入らないようにしてください。 （検索バーとフローティングボタンを併用するなどの複数のSmartSearchUIを使用する場合ｈな elmentI_idがかぶらないように変更してください）

SmartSearchの検索バーをより高機能に使うため、JavaScriptのプロパティをカスタマイズすることが可能です。また、属性情報付与機能 を活用することで、ユーザーの特定や詳細な分析を行うことができます。

検索バーのデザインを変更したい場合は検索バーのデザイン変更機能 を参照してください。

以下の手順についてはデフォルトのデザインを例に解説します。

※ デザインテーマによって変更する箇所が異なる場合があるので注意してください

■ 検索バーを表示する

以下の対象ファイルに検索バーのソースコードがあるので削除し、手順１でコピーしたJavascriptタグをペーストして埋め込んでください

対象ファイル

■ フローティングボタンを表示する

以下の対象ファイルに検索バーのソースコードがあるので削除し、手順１でコピーしたJavascriptタグをペーストして埋め込んでください

対象ファイル

こちらの手順を行うと全てのヘルプページにフローティングボタンが表示されます。