CMS見積もりテーマを使ってみる
CMS見積もりテーマを使用すると、営業担当者が購入プロセスで使用するカスタム見積もりテーマを作成できます。このガイドでは、CLIを使用して既定のCMS見積もりテーマをローカルで複製し、アカウントに複製したテーマをアップロードし、必要に応じて調整する方法を説明します。また、テンプレートを使用して見積もりを作成し、作業内容を確認する方法をご紹介します。
- HTMLとCSSを作成するスキル
- 最新バージョンのHubSpot CLIをインストールし、ポータル向けに設定していること
注:このチュートリアルではHubSpot CLIを使用していますが、必要に応じてデザインマネージャーを使用してHubSpotで全ての作業を行うこともできます。HubSpotでこのプロセスを実行するには、ステップ1に示されているfetch
コマンドを実行する代わりに、@hubspot
フォルダーにcms-quotes-theme
を複製する必要があります。
ターミナルを開き、ファイルをダウンロードするディレクトリーに移動します。これは、このチュートリアルの以降の作業で使用する主な作業ディレクトリーです。
既定の見積もりテーマをダウンロードするため、ターミナルで以下を実行します。
これで、ローカル ファイル システムにmy-quotes-theme
という名前のフォルダーが表示されます。このフォルダーには、imports
フォルダー内のモックデータやモジュールの既定設定など、見積もりテーマに必要な全てのアセットが含まれています。
フォルダーをダウンロードしたら、HubSpotにアップロードします。hs uploadコマンドを使用して1回のアップロードを実行できますが、代わりにwatch
コマンドを使用して、ファイルを保存するたびに自動アップロードをトリガーすることも可能です。
アップロードが完了すると、デザインマネージャーでmy-quotes-theme
フォルダーを確認できます。ターミナルからデザインマネージャーを開くには、新しいターミナルタブまたはウィンドウを開き、hs open dm
コマンドを実行します。
hs watch
プロセスの実行中はコマンドを実行できないため、新しいターミナルタブまたはウィンドウが必要です。また、q
を押して監視を終了し、別のコマンドを実行してからhs watch
を再実行することもできます。
- ブラウザーでテンプレートプレビューを更新して、CSSの変更を表示します。テーブル本文の全ての奇数行の背景が灰色になっているのが見えます。
カスタム見積もりテーマを作成するときに、このワークフローを繰り返すことで、ローカルで行っている変更を迅速に確認できます。
注:署名システムは複雑なため、署名はプレビューに表示されません。
Bold
となっているlabel
パラメーターを、使用する名前(My custom quote template
など)に更新します。- ファイルを保存してHubSpotにアップロードします。
営業担当者が見積もりテンプレートを使用する前に、HubSpotでテンプレートをカスタマイズしておく必要があります。この作業は通常、営業チーム向けの既成の見積もりを作成できるようにするために、営業マネージャーが行います。ただしこのチュートリアルでは、コンテンツの作成作業について誰もが理解できるように、このプロセスを行う方法を説明します。
見積もりテンプレートをカスタマイズして営業担当者が利用できるようにするには、次の手順に従います。
- HubSpotアカウントで、メイン ナビゲーション バーにある設定アイコンをクリックします。
- 左側のサイドバーメニューで、[オブジェクト]>[見積もり]の順に進みます。
- [見積もりテンプレート]タブをクリックします。
- 右上にある[見積もりテンプレートをカスタマイズ]をクリックします。
- 新しいテンプレートにカーソルを合わせ、[選択]を選択します。
- 左側のパネルで、テンプレートに含まれるモジュールを編集できます。例えば、モジュールをクリックしてそのプロパティーを編集したり、表示を切り替えたりできます。
- 変更が完了したら、右上の[保存]をクリックします。
変更を保存したら、テンプレートを使用して見積もりを作成できます。これにより、営業担当者の作業をシミュレートします。
- HubSpotアカウントで[セールス]>[見積もり]の順に移動します。
- 右上にある[見積もりを作成]をクリックします。その後、見積もり作成ウィザードにリダイレクトされます。
- 最初の画面で[取引と関連付ける]ドロップダウンメニューをクリックしてから、既存の取引を選択するか、テスト取引を使用する場合は[新規の取引を作成]を選択します。
- 右下の[次へ]をクリックします。
- 次の画面で[見積もり]ドロップダウンメニューをクリックし、カスタム見積もりテンプレートを選択します。
- 見積もりウィザードの残りの部分に進み、見積もりを作成します。
- 見積もりを公開すると、見積もりを表示するためのリンクを含むダイアログボックスが表示されます。[コピー]をクリックしてURLをコピーし、ブラウザーに貼り付けます。完了した見積もりが表示されます。
見積もりテンプレートを作成、アップロード、カスタマイズしました。これで、見積もりテンプレートの編集プロセスとコンテンツ作成者の作業を理解できました。
ビジネスニーズに合わせて見積もりテンプレートを作成する際には、HubSpotの既定のモジュールとともに、独自のカスタムモジュールを見積もりに追加することがあります。
注:支払い、署名、およびダウンロードモジュールのJavaScriptは編集しないことをお勧めします。編集するとモジュールが破損する可能性があります。破損した場合、エンドユーザーは署名やダウンロードを実行できず、さらには支払いを行うことができない可能性があります。
貴重なご意見をありがとうございました。