既定のモジュール

Last updated:

CMS Hubには多数の既定モジュールが用意されており、開発者がテンプレートに追加したり、コンテンツ作成者がページに追加したりできます。この記事では、HubSpotの既定のモジュールとその使用方法について説明します。

ローカルで開発する際は、モジュールのパス（例：hs fetch @ hubspot/linked_image.module）を使用して特定の既定のモジュールを取得できます。

既定のモジュールのコードは、デザインマネージャーの@hubspotフォルダー内にあるモジュールを表示して複製できます。

デザインマネージャーの既定のモジュール

ブログのコメント

ブログ記事やブログリストでサポートされています。

{% module "blog_comments" path="@hubspot/blog_comments" %}

ブログのEメール配信登録

ページ、ブログ記事、ブログリストでサポートされています。

{% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
select_blog
ブログ

モジュールに使用するブログ。
title
文字列

モジュールのタイトル（h3タグで囲みます）。

 "Subscribe Here!"
response_message
リッチテキスト

フォームの送信時に表示されるメッセージ。

 Thanks for subscribing!

ボタン

ページ、ブログ記事、ブログリストでサポートされています。

{% module "button" path="@hubspot/button" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
link
リンク

ボタンのリダイレクト先URL。

 { "url": { "type": "EXTERNAL", "href": "www.hubspot.com", "content_id": null }, "open_in_new_tab": false, "no_follow": false }
button_text
テキスト

ボタンに表示されるテキスト。

 "Add a button link here"
style
オブジェクト
  • override_default_style（ブール値）
  • button_font（フォント）
  • button_color（色）
  • text_hover_color（色）
  • button_hover_color（色）
 { "override_default_style": false, "button_font": { "color": "#FFFFFF", "size_unit": "px" }, "button_color": { "color": "#000000", "opacity": 100 }, "text_hover_color": { "color": "#000000", "opacity": 100 }, "button_hover_color": { "color": "#CCCCCC", "opacity": 100 } }

CTA（Call-To-Action）

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "cta" path="@hubspot/cta" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
guid
文字列

CTAのグローバル一意識別子。 

区切り

ページでサポートされています。2022年8月25日以降に作成されたアカウントでは、このモジュールの新しいバージョン（英語）を利用できます。詳しくはこの更新に関する情報（英語）をご確認ください。

{% module "divider" path="@hubspot/divider" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
height
数値

区切り線の高さのピクセル（px）。

 1
width
数値

区切り線の幅のパーセンテージ（%）。

 50
color
色

区切り線の色（16進数）と不透明度（数値）。

 { "color": "#000000", "opacity": 100 }
line_type
選択

線のタイプ。次の選択肢があります。

  • solid
  • dotted
  • dashed
 solid
alignment
選択

区切り線の水平方向の位置合わせ。次の選択肢があります。

  • left
  • center
  • right
 center
show_padding
ブール値

区切りの上下に設けられる余白の表示または非表示の切り替え。

 false
padding
数値

区切り線の上下に設けられる余白のピクセル（px）値。 

show_paddingがtrueの場合に使用可能になるオプションです。

 5

Eメール本文

Eメールでサポートされています。

{% module "email_body" path="@hubspot/email_body" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
html
リッチテキスト

Eメール本文の既定のコンテンツ。HTMLがサポートされています。

 <p>Hi&nbsp;{{contact.firstname}},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p>

オフィスの所在地情報

Eメールでサポートされています。

{% module "email_can_spam" path="@hubspot/email_can_spam" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
html
リッチテキスト

事業所の住所や配信停止リンク、配信設定リンクなど、EメールでCAN-SPAMに準拠するために必要な情報が取り込まれます。

 <p id="footer" style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 12px; line-height: 1.34em; color: {{ secondary_font_color }}; display: block;">{{ site_settings.company_name }} &nbsp;&nbsp;{{ site_settings.company_street_address_1 }} &nbsp;{{ site_settings.company_street_address_2 }} &nbsp;{{ site_settings.company_city }} &nbsp;{{ site_settings.company_state }} &nbsp;&nbsp;{{ site_settings.company_zip }} &nbsp;&nbsp;{{ site_settings.company_country }} <br><br> You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }} . <br><br> Update your <a target="_blank" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};" data-unsubscribe="true">email preferences</a> to choose the types of emails you receive. <br><br> &nbsp;<a target="_blank" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: {{ secondary_font_color }};" data-unsubscribe="true">Unsubscribe from all future emails</a> &nbsp;</p>

バックアップ配信停止

ページ、ブログ記事、ブログリストでサポートされています。

{% module "email_simple_subscription" path="@hubspot/email_simple_subscription" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
header
テキスト

H1見出し。

 "Email Unsubscribe"
input_help_text
テキスト

ヘルプテキストのH3見出し。

 "Your email address:"
input_placeholder
テキスト

入力フィールドのプレースホルダーコンテンツ。

 "email@example.com"
button_text
テキスト

配信停止ボタンに表示するテキスト。

 "Unsubscribe"

配信設定

Eメールでサポートされています。

{% module "email_subscriptions" path="@hubspot/email_subscriptions" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
header
テキスト

H1見出し。

 header
subheader_text
リッチテキスト

H1見出しの補足テキスト。

 "If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you."
unsubscribe_single_text
テキスト

設定選択時のヘルプテキスト。

 "Uncheck the types of emails you do not want to receive:"
unsubscribe_all_text
テキスト

全てを配信停止のヘルプテキスト 

 "Or check here to never receive any emails:"
unsubscribe_all_unsubbed_text
テキスト

現在配信を停止しているユーザーに対する、全てを配信停止のヘルプテキスト。

 "You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
unsubscribe_all_option
テキスト

全てを配信停止するオプションのラベル。

 "Unsubscribe me from all mailing lists."
button_text
テキスト

設定更新ボタンのテキスト。

 "Update email preferences"
resubscribe_button_text
テキスト

配信再登録ボタンのテキスト

 "Yes, resubscribe me!"

配信登録の確認メッセージ

Eメールでサポートされています。

{% module "email_subscriptions_confirmation" path="@hubspot/email_subscriptions_confirmation" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
header
テキスト

H1見出し。
subheader_text
リッチテキスト

H1見出しの補足テキスト。

 "If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you."
unsubscribe_all_success
テキスト

配信停止時のメッセージ。

 "You have successfully unsubscribed from all email communications."
subscription_update_success
テキスト

配信設定更新時のメッセージ。

 "You have successfully updated your email preferences."

ウェブページとして表示

Eメールでサポートされています。

{% module "email_view_as_web_page" path="@hubspot/email_view_as_web_page" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
html
リッチテキスト

［ウェブページとして表示］のテキスト。

 "<div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{ secondary_font_color }};">Not rendering correctly? View this email as a web page <a target="_blank" href="{{ view_as_page_url }}" style="color: {{ secondary_font_color }}; text-decoration: underline; white-space: nowrap;" data-viewaswebpage="true">here</a>.</div>"

Follow me

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。follow_me_links関数を使用して、アカウントで設定されているソーシャル メディア アカウントへのリンクを取得します。

{% module "follow_me" path="@hubspot/follow_me" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
title
テキスト

H3見出し。
links
ブール値

リンクを新しいウィンドウで開くかどうかを指定します。

 true

Follow Me ー LP

ページ、ブログリスト、ブログ記事でサポートされています。

{% module "follow_me_lp" path="@hubspot/follow_me_lp" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
social
オブジェクト

ソーシャルネットワークの選択。次のオプションがあります。

  • network（選択）
  • link（リンク）
  • network_image（画像）
  • support_text（テキスト）

 

 [ { "network": "facebook" } ]
display
選択

ソーシャルネットワークの表示オプション。次の選択肢があります。

  • icon
  • icon_text
  • text_only
 icon
scale
数値

アイコンのサイズ（px）。

 25
spacing
数値

アイテムの左右のパディング（px）。

 5
alignment
選択

ページ上のアイテムの位置合わせ。次の選択肢があります。

  • left
  • center
  • right
 center
color_scheme
選択

アイコンに使用する配色。次の選択肢があります。

  • color
  • black（白黒）
  • grey
  • white
  • custom
 color
custom_color
色

color_schemeがcustomの場合に使用するカスタムカラー。

 #000000
icon_shape
選択

ソーシャルアイコンの形状。次の選択肢があります。

  • circle
  • square
  • original
 circle
font_style
オブジェクト

ソーシャルネットワークのテキストのフォントオブジェクト。displayがiconでない場合に使用可能になります。

フォントオブジェクトには次の要素が含まれます。 

  • size
    • value：数値
    • units：測定単位
  • color：16進数値
  • styles
    • bold：ブール値
    • italic：ブール値
    • underline：ブール値
  • font：テキスト
 { "size": { "value": 14, "units": "px" }, "color": "#2696be", "styles": { "bold": false, "italic": false, "underline": false }, "font": "helvetica" }

フォーム

ページ、ブログ記事、ブログリストでサポートされています。

{% module "form" path="@hubspot/form" form={ "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
title
テキスト

H3見出し。
form
オブジェクト

次の要素を含むフォームオブジェクト。

  • form_id：使用するフォームのID
  • response_type：フォームを送信した訪問者に表示する内容
    • inline
    • redirect
  • message：response_typeがinlineに設定されている場合のインラインメッセージ
  • redirect_id：response_typeがredirectに設定されている場合のリダイレクト先ページのID
  • redirect_url：response_typeがredirectに設定されている場合のリダイレクト先URL

 

 { "form_id": "", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" }
notifications_are_overridden
ブール値

フォームの既定の代わりにフォームの通知Eメールを送信するかどうかを指定します。

 false
notifications_override_email_addresses
Eメール

notifications_are_overriddenがtrueの場合に送信するEメールのカンマ区切りリスト。
follow_up_type_simple
ブール値

フォローアップEメールの送信を有効にするかどうかを指定します。

 false
simple_email_for_live_id
followupemail

フォローアップEメールのID。follow_up_type_simpleがtrueの場合に使用できます。
sfdc_campaign
salesforcecampaign

Salesforce連携がアクティブな場合のキャンペーンID。

ヘッダー

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "header" path="@hubspot/header" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
value
テキスト

見出しのテキスト。

 "A clear and bold header"
header_tag
選択

見出しのレベルを選択します。選択肢はh1～h6です。

 h1

水平方向スペーサー

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "horizontal_spacer" path="@hubspot/horizontal_spacer" %}

アイコン

ページ、ブログリスト、ブログ記事でサポートされています。アイコンは、Font Awesome 5.0.10および5.14.0のアイコンセットから取得できます。

{% module "icon" path="@hubspot/icon" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
name
文字列

アイコンの名前。

 "hubspot"
purpose
選択

アイコンの目的を分類するスクリーンリーダー用のアクセシビリティーオプション。有効な値は次の通りです。

  • decorative：スクリーンリーダーで読み上げられません。
  • semantic：スクリーンリーダーで読み上げられます。
 "decorative"
title
文字列

アイコンにタイトルを割り当てるアクセシビリティーオプション。
style
文字列アイコンのタイプ。solid、regular、light、thin、duotoneのいずれかを使用できます。 "solid"
unicode
文字列

アイコンのUnicode値。

 f3b2

画像

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "linked_image" path="@hubspot/linked_image" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
img
画像

次の要素を含む画像オブジェクト。

  • src：画像のURL
  • alt：画像の代替テキスト
  • loading：遅延読み込み。次のオプションがあります。
    • disabled
    • lazy
  • width：px値
  • height：px値
 { "src": "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png", "alt": "placeholder_200x200", "loading": "disabled", "width": 200, "height": 200 }
link
テキスト

画像のリンク（任意）。
target
ブール値

新しいタブでリンクを開くかどうかを指定します。

 false

画像（Eメール）

Eメールでサポートされています。

{% module "image_email" path="@hubspot/image_email" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
img
画像

Eメールに使用する画像。 
link
テキスト

画像のリンク（任意）。
alignment
選択

画像の位置合わせ。次の選択肢があります。

  • left
  • center
  • right
 center

画像グリッド

ページ、ブログリスト、ブログ記事でサポートされています。

{% module "image_grid" path="@hubspot/image_grid", label="image_grid.module" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
slides
オブジェクト

各スライドの情報を格納するオブジェクト。このオブジェクトに含まれる要素は次の通りです。

  • img：画像のURL
  • link_url：スライドのリンク先URL
  • hover_messages：画像にカーソルを合わせると表示されるテキスト
 [ { "show_caption": false, "open_in_new_tab": false } ]
display_mode
選択

画像ギャラリーの表示モード。次の選択肢があります。

  • standard：標準スライダー
  • thumbnail：サムネイルナビゲーター
  • lightbox：Lightboxギャラリー
 standard
lightboxRows
数値

display_modeがlightboxの場合に表示するLightboxギャラリー内の行数。

 3
loop_slides
ブール値

display_modeがstandardまたはthumbnailの場合にスライドを循環して表示するかどうかを指定します。

 true
auto_advance
ブール値

display_modeがstandardまたはthumbnailの場合に自動的に次のスライドに進むかどうかを指定します。

 true
num_seconds
数値

display_modeがstandardまたはthumbnailの場合に次のスライドに進むまでの時間の間隔（秒数）。

 5
show_pagination
ブール値

display_modeがstandardまたはthumbnailの場合にナビゲーションボタンを表示するかどうかを指定します。

 true
sizing
選択

display_modeがstandardまたはthumbnailの場合のスライドの高さ。次の選択肢があります。

  • static：固定の高さ
  • resize：可変の高さ
 static
transition
選択

display_modeがstandardまたはthumbnailの場合に使用する、スライドの遷移スタイル。次の選択肢があります。

  • slide：スライドによる遷移
  • fade：フェードによる遷移
 slide
caption_position
選択

display_modeがstandardまたはthumbnailの場合に表示する、スライドのキャプションの位置。次の選択肢があります。

  • below：常に画像の下にキャプションを表示
  • superimpose：画像の上にキャプションを重ねて表示
 below

画像ギャラリー

ページ、ブログ記事、ブログリストでサポートされています。

{% module "gallery" path="@hubspot/gallery" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
slides
オブジェクト

各スライドの情報を格納するオブジェクト。このオブジェクトに含まれる要素は次の通りです。

  • img：画像のURL
  • show_caption：スライドのキャプションを表示するかどうかを指定するブール値
  • caption：キャプションのリッチテキスト
  • link_url：スライドのリンク先URL
  • open_in_new_tab：リンクを新しいタブで開くかどうかを指定するブール値
 [ { "show_caption": false, "open_in_new_tab": false } ]
display_mode
選択

画像ギャラリーの表示モード。次の選択肢があります。

  • standard：標準スライダー
  • thumbnail：サムネイルナビゲーター
  • lightbox：Lightboxギャラリー
 standard
lightboxRows
数値

display_modeがlightboxの場合に表示するLightboxギャラリー内の行数。

 3
loop_slides
ブール値

display_modeがstandardまたはthumbnailの場合にスライドを循環して表示するかどうかを指定します。

 true
auto_advance
ブール値

display_modeがstandardまたはthumbnailの場合に自動的に次のスライドに進むかどうかを指定します。

 true
num_seconds
数値

display_modeがstandardまたはthumbnailの場合に次のスライドに進むまでの時間の間隔（秒数）。

 5
show_pagination
ブール値

display_modeがstandardまたはthumbnailの場合にナビゲーションボタンを表示するかどうかを指定します。

 true
sizing
選択

display_modeがstandardまたはthumbnailの場合のスライドの高さ。次の選択肢があります。

  • static：固定の高さ
  • resize：可変の高さ
 static
transition
選択

display_modeがstandardまたはthumbnailの場合に使用する、スライドの遷移スタイル。次の選択肢があります。

  • slide：スライドによる遷移
  • fade：フェードによる遷移
 slide
caption_position
選択

display_modeがstandardまたはthumbnailの場合に表示する、スライドのキャプションの位置。次の選択肢があります。

  • below：常に画像の下にキャプションを表示
  • superimpose：画像の上にキャプションを重ねて表示
 below

言語切り替え機能

ページでサポートされています。

{% module "language_switcher" path="@hubspot/language_switcher" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
display_mode
選択

言語切り替え機能のテキストの言語。次のオプションがあります。

  • pagelang：言語切り替え機能が有効になっているページの言語で各言語の名前を表示
  • localized：各言語の名前をそれぞれの言語で表示
  • hybrid：上記の2つのオプションの組み合わせ
 localized

ロゴ 

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "logo" path="@hubspot/logo" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
img
画像

次の要素を含む画像オブジェクト。

  • override_inherited_src：設定されている既定のログをオーバーライドするかどうか
  • src：画像のURL
  • alt：ロゴの代替テキスト
 { "override_inherited_src": false, "src": null, "alt": null }
link
テキスト

ロゴのリンク（任意）。URLが指定されていない場合、ロゴにはプライマリードメインへのリンクが設定されます。
open_in_new_tab
ブール値

新しいタブでリンクを開くかどうかを指定します。

 false
suppress_company_name
ブール値

画像が選択されない場合に会社名を非表示にするかどうかを指定します。

 true
heading_level
選択

選択されている画像がなく、suppress_company_nameがfalseの場合の見出しのレベルを選択します。選択肢はh1～h6です。

 h1

ミーティング

ページ、ブログ記事、ブログリストでサポートされています。

{% module "meetings" path="@hubspot/meetings" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
meeting
ミーティング

ミーティングリンクを選択します。

ソーシャルログインのアクセス権設定

このモジュールは、開発者向けベータ版の一部として提供されています。詳細をご確認ください。

このモジュールは、アクセス権設定を利用可能なウェブサイトにGoogle およびFacebookを介してログインする機能を提供します。サインイン時は、CRM内のコンタクトのEメールアドレスに結び付いたアカウントを使用する必要があります。どのソーシャルログインを有効にするかを選択できます。

アクセス権設定を利用可能なログインページでサポートされています。

{% module "social" path="@hubspot/membership_social_logins", clientid="" appid="" facebook_enabled=true google_enabled=true %}

Facebookを使用する場合は、Facebook開発者アカウントと、基本的な設定を使用して作成したFacebookアプリが必要です。これらの要件を満たした上で、作成したアプリのIDをモジュールに渡します。

Google を使用する場合は、Google アカウントと認証情報の作成が必要になります。これらの要件を満たした上で、アプリのクライアントIDをモジュールに渡します。

ソーシャルログインのアクセス権設定のパラメーター
ParameterTypeDescription Default
facebook_appid
文字列

FacebookアプリのID。
facebook_enabled
ブール値

Facebookログインのボタンを有効にするかどうかを指定します。facebook_appidが必要です。

 False
google_clientid
文字列

Google クライアントのID。
google_enabled
ブール値

Google ログインのボタンを有効にするかどうかを指定します。google_clientidが必要です。

 False

メニュー

ページ、ブログ記事、ブログリストでサポートされています。

独自のカスタムメニューを作成する場合は、HubSpotのmenu()関数をお試しください。
{% module "menu" path="@hubspot/menu" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
id
メニュー

メニューのID。
root_type
選択

詳細メニュータイプ。次の選択肢があります。

  • site_root：常に最上位ページをメニューに表示
  • top_parent：閲覧中のセクションに関連するページをメニューに表示
  • parent：閲覧中のページに関連するページをメニューに表示
  • breadcrumb：パンくず形式のパスメニュー（横フローを使用）
 site_root
max_levels
選択

メニューで展開可能なメニューツリーの子の数を指定します。選択肢は1～10です。

 2
flow
選択

メニューの方向。次の選択肢があります。

  • horizontal
  • vertical
 horizontal
flyouts
ブール値

子メニュー項目にカーソルを合わせたときに詳細表示を有効にするかどうかを指定します。

 true

ページフッター

ページ、ブログリスト、ブログ記事でサポートされています。

{% module "page_footer" path="@hubspot/page_footer" %}

パスワードプロンプト

ページ、ブログ記事、ブログリストでサポートされています。

{% module "password_prompt" path="@hubspot/password_prompt" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
submit_button_text
テキスト

送信ボタンに表示されるテキスト。

 "Submit"
password_placeholder
テキスト

パスワードフィールドのプレースホルダーテキスト。

 "Password"
bad_password_message
リッチテキスト

パスワードが正しく入力されていないときに表示するメッセージ。 

 "Sorry, please try again. "

支払い

ページ、ブログ記事、ブログリストでサポートされています。

{% module "payments" path="@hubspot/payments" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
payment
文字列

特定の支払いリンクを使用するようにモジュールを設定するには、支払いリンクのIDを含めます。支払いリンクを編集する際に、URLでこのIDを確認（英語）できます。  
checkout_location
文字列

支払いフォームを新しいタブで開くか、オーバーレイで開くかを設定します。有効な値は次の通りです。

  • new_tab：新しいタブで支払いフォームを開きます。
  • overlay：支払いフォームをスライド式のオーバーレイで開きます。
 "new_tab"
button_text
文字列

チェックアウトボタンのテキストを設定します。

 "Checkout"
button_target
選択

ボタンでHubSpotの支払いリンクを使用するか、外部リンクを使用するかを設定します。次の選択肢があります。

  • payment_link
  • custom_link
 "payment_link"
button_link
リンク

button_targetをcustom_linkに設定した場合に、外部リンクの宛先を設定します。次のリンクタイプがサポートされています。

  • EXTERNAL
  • CONTENT
 EXTERNAL

記事フィルター

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "post_filter" path="@hubspot/post_filter" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
select_blog
ブログ

表示するブログを選択します。既定では、ブログテンプレートで使用する場合は現在のブログが使用され、その他の場合はプライマリーブログが使用されます。
filter_type
選択

表示するフィルターリンクのタイプ。次の選択肢があります。

  • tag
  • month
  • author
 tag
order_by
選択

フィルターリンクの値の順序。次の選択肢があります。

  • post_count
  • name
 post_count
list_title
テキスト

H3見出し。

 "Posts by Tag"
max_links
数値

表示するフィルターリンクの数。全て表示する場合は空白のままにします。

 5
expand_link_text
テキスト

max_linksの値を超える数のリンクが使用可能な場合に表示するテキスト。 

 "See all"

記事一覧

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "post_listing" path="@hubspot/post_listing" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
select_blog
ブログ

表示するブログを選択します。既定では、ブログテンプレートで使用する場合は現在のブログが使用され、その他の場合はプライマリーブログが使用されます。
listing_type
選択

記事一覧のタイプ。次の選択肢があります。

  • recent：最近の記事
  • popular_all_time：最も人気の高い記事
  • popular_past_year：過去1年間で最も人気の高い記事
  • popular_past_six_months：過去6か月間で最も人気の高い記事
  • popular_past_month：過去1か月間で最も人気の高い記事
 recent
list_title
テキスト

H3見出し。 

 "Recent Posts"
max_links
数値

表示する記事の最大数。 

 5

HTML ー Eメール

Eメールでサポートされています。

{% module "raw_html_email" path="@hubspot/raw_html_email" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
html
HTML

HTMLブロック。

 <p>\n Add custom HTML to your email.\n</p>

見積もりのダウンロード

見積もりテンプレートでサポートされています。

{% module "download" path="@hubspot/quote_download" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
button_text
文字列

ダウンロードボタンに表示されるテキスト。

 Download
download_error
文字列

ダウンロードに失敗すると表示されるエラーメッセージ。

 There was a problem downloading the quote. Please try again.

見積もりの支払い

見積もりテンプレートでサポートされています。

{% module "payment" path="@hubspot/quote_payment" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
heading_text
文字列

見積もりテンプレートの支払いセクションの上に表示される見出し。

 Payment
heading_tag
選択

heading_textを表示するために使用する見出しのタイプ。有効な値は、h1、h2、h3、h4、h5、h6です。

 h3
checkout
文字列

支払いボタンのテキスト。

 Pay now
needs_signature
文字列

署名が必要な場合のボタンテキスト。

 Payment can't be made because the quote isn't fully signed.
checkout_error
リッチテキスト

チェックアウト中にエラーが発生した場合に表示されるメッセージ。

 There was a problem setting up checkout. Please contact the person who sent you this quote.
payment_status_error
リッチテキスト

支払い実行中にエラーが発生した場合に表示されるメッセージ。

 There was a problem loading the payment status for this quote. Please try refreshing the page.
paid
文字列

支払いが正常に完了したことを示すステータスインジケーター。

 Paid
payment_processing
文字列

支払いが処理中であることを示すステータスインジケーター。

 Payment processing

見積もりの署名

見積もりテンプレートでサポートされています。

{% module "signature" path="@hubspot/quote_signature" %}

見積もりに電子署名が必要な場合は、esignatureオブジェクトに含まれる次のフィールドを使用できます。

Use this table to describe parameters / fields
ParameterTypeDescription Default
pretext
リッチテキスト

電子署名の有効期限を示すテキスト。

 Before you sign this quote, an email must be sent to you to verify your identity. Find your profile below to request a verification email.
verify_button
文字列

確認ボタンに表示されるテキスト。

 Verify to sign
failure
文字列

署名情報を取得できない場合に表示されるアラートテキスト。

 There was a problem retrieving the signature information. Please reload the page.
verification_sent
文字列

認証リクエストが見積もり署名者に正常に送信されたときに表示されるステータスインジケーター。

 Verification sent
signed
文字列

見積もりが正常に署名されたときに表示されるテキスト。

 Signed

見積もりに印刷された署名が必要な場合、print_signatureオブジェクトに含まれる次のフィールドを使用できます。

Use this table to describe parameters / fields
ParameterTypeDescription Default
header
リッチテキスト

署名セクションの上部に表示されるテキスト。

 Signature
signature
文字列

署名フィールドの横に表示されるテキスト。

 Signature
date
文字列

日付フィールドの横に表示されるテキスト。

 Date
printed_name
文字列

印刷される名前フィールドの横に表示されるテキスト。

 Printed name
countersignature
オブジェクト

連署セクションのコンテンツを格納するオブジェクト。このオブジェクトには、次のフィールドを含めることができます。

  • header：連署セクションの上部に表示されるテキスト。
  • countersignature：連署フィールドの横に表示されるテキスト。
  • date：日付フィールドの横に表示されるテキスト。
  • printed_name：印刷される名前フィールドの横に表示されるテキスト。
 Signed

商品項目

見積もりテンプレートでサポートされています。このモジュールには、カスタム見積もりで使用される既定のテキストも含まれています。 

{% module "module_165350106057652" path="@hubspot/line_items", label="line_items.module" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
title
テキスト

商品項目列のタイトル。 

 Column description
use_additional_product_property
ブール値

ユーザーが製品のプロパティーから追加の商品項目列を選択するために使用できるチェックボックスを表示します。 

 False
additional_product_properties
選択

製品のプロパティー。次の選択肢があります。 

  • price：商品項目の価格 
  • item_description：商品項目の説明 
  • quantity：商品項目の数 
  • amount：商品項目の合計金額 
  • hs_recurring_billing_start_date：定期的な商品項目の請求開始日 
  • discount：商品項目に適用される割引金額 
crm_product_property
CRMオブジェクトプロパティー

商品項目列の見出しとして表示する製品プロパティーを選択します。 

リッチテキスト

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "rich_text" path="@hubspot/rich_text" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
html
リッチテキスト

HTMLブロック。

 <h2>Something Powerful</h2>\n<h3>Tell The Reader More</h3>\n<p>The headline and subheader tells us what you're <a href=\"#\">offering</a>, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>\n<p>Remember:</p>\n<ul>\n<li>Bullets are great</li>\n<li>For spelling out <a href=\"#\">benefits</a> and</li>\n<li>Turning visitors into leads.</li>\n</ul>

RSSリスティング

ページ、ブログリスト、ブログ記事でサポートされています。

{% module "rss_listing" path="@hubspot/rss_listing" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
title
テキスト

H3見出し。

 "Test"
rss_feed_type
選択

RSSフィードのタイプ。次の選択肢があります。

  • blog：HubSpotでホスティングされているブログ
  • external：外部RSSフィード
 blog
rss_url
テキスト

rss_feed_typeがexternalの場合に使用するRSS URL。
content_group_id
ブログ

rss_feed_typeがblogの場合に使用するブログのID。
topic_id
タグ

（オプション）rss_feed_typeがblogの場合にフィルターに使用するタグのID。
number_of_items
数値

表示する記事の最大数。

 5
include_featured_image
ブール値

サムネイル画像を含めるかどうかを指定します。

 false
show_author
ブール値

投稿者名を表示するかどうかを指定します。

 true
attribution_text
テキスト

投稿者を記事に関連付けるテキスト。show_authorがtrueの場合に表示されます。

 "by"
show_detail
ブール値

ブログ記事のサマリーテキストを表示するかどうかを指定します。

 true
limit_to_chars
数値

show_detailがtrueの場合、サマリーテキストの長さを制限します。

 200
click_through_text
テキスト

show_detailがtrueの場合、記事のサマリーの最後に表示される、クリックスルーリンクのテキスト。

 "Read more"
show_date
ブール値

公開日を表示するかどうかを指定します。

 true
publish_date_format
選択

show_dateがtrueの場合に使用する公開日の形式。次の選択肢があります。

  • short（例：06/11/06 12:00PM）
  • medium（例：2006年6月6日午後12:00:00）
  • long（例：2017年6月6日午後12:00:00 EDT）
  • MMMM d, yyyy 'at' h:mm a（例：2006年6月6日、午後12:00）
  • h: mm a 'on' MMMM d, yyyy（例：午後12:00、2006年6月6日）
 short
publish_date_text
テキスト

show_dateがtrueの場合に表示する、記事の公開タイミングを示すテキスト。

 "posted at"

サイト検索入力

ページ、ブログ記事、ブログリストでサポートされています。

{% module "search_input" path="./local-search_input" placeholder="Search" include_search_button=true results={ "use_custom_search_results_template": "true", "path_id": "77977569400" } %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
field_label
テキスト

検索入力のラベルテキスト
placeholder
テキスト

入力フィールドのプレースホルダーテキスト。

 "Search"
include_search_button
ブール値

検索ボタンを含めるかどうかを指定します。

 false
content_types
オブジェクト

検索結果に含めるコンテンツのタイプ。このオブジェクトには、ブール値を設定する次のキーが格納されます。

  • website_pages
  • landing_pages
  • blog_posts
  • knowledge_articles
 { "website_pages": true, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }
results
オブジェクトカスタム検索結果ページを使用するためのコントロールを有効にするオブジェクト。次のプロパティーが含まれます。
  • use_custom_search_results_template（ブール値）：trueに設定すると、ユーザーがカスタム検索結果ページを選択できるようになります。既定値はfalseです。
  • path_id（文字列）：検索結果に使用するページのID。ここで参照するページには、検索結果モジュールが含まれている必要があります。

検索結果

ページ、ブログ記事、ブログリストでサポートされています。

{% module "search_results" path="@hubspot/search_results" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
display_featured_images
ブール値

アイテムのキービジュアルを表示するかどうかを指定します。

 false

セクションヘッダー

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "section_header" path="@hubspot/section_header" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
header
テキスト

セクションヘッダーのコンテンツ。

 "A clear and bold header"
heading_level
選択

headerの見出しレベル。選択肢はh1～h6です。

 h1
subheader
テキスト

セクションの小見出し段落のテキスト。

 "A more subdued subheader"

シンプルメニュー

ページ、ブログリスト、ブログ記事でサポートされています。

{% module "simple_menu" path="@hubspot/simple_menu" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
menu_tree
シンプルメニュー

シンプルメニューのオブジェクト。

 []
orientation
選択

メニューの方向。次の選択肢があります。

  • horizontal
  • vertical
 horizontal

ソーシャルシェアリング

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "social_sharing" path="@hubspot/social_sharing" %}

注：以下に示されている既定の列に含まれる変数social_link_urlの値は、linkパラメーターの値と同じです。

ParameterTypeDescription Default
link
テキスト

これは、ソーシャルネットワークへの共有を簡素化するために短縮された宛先リンクです。
facebook
オブジェクト

このオブジェクトに含まれる要素は次の通りです。

  • enabled：ソーシャルアイテムを有効にするためのブール値
  • custom_link_format：ソーシャル共有者のURLとしてのカスタムURL
 { "enabled": false, "custom_link_format": "http://www.facebook.com/share.php?u={{ social_link_url }}" }
twitter
オブジェクト

このオブジェクトに含まれる要素は次の通りです。

  • enabled：ソーシャルアイテムを有効にするためのブール値
  • custom_link_format：ソーシャル共有者のURLとしてのカスタムURL
 { "enabled": false, "custom_link_format": "https://twitter.com/intent/tweet?original_referer={{ social_link_url }}&url={{ social_link_url }}&source=tweetbutton&text={{ social_page_title|urlencode }}" }
linkedin
オブジェクト

このオブジェクトに含まれる要素は次の通りです。

  • enabled：ソーシャルアイテムを有効にするためのブール値
  • custom_link_format：ソーシャル共有者のURLとしてのカスタムURL
 { "enabled": false, "custom_link_format": "http://www.linkedin.com/shareArticle?mini=true&url={{ social_link_url }}" }
pinterest
オブジェクト

このオブジェクトに含まれる要素は次の通りです。

  • enabled：ソーシャルアイテムを有効にするためのブール値
  • custom_link_format：ソーシャル共有者のURLとしてのカスタムURL
  • pinterest_media：画像オブジェクト。このオブジェクトに含まれる要素は次の通りです。
    • src：画像のURL
    • alt：画像の代替テキスト
 { "enabled": false, "custom_link_format": "http://pinterest.com/pin/create/button/?url={{ social_link_url }}&media={{ pinterest_media }}", "pinterest_media": { "src": "", "alt": null } }
email
オブジェクト

このオブジェクトに含まれる要素は次の通りです。

  • enabled：ソーシャルアイテムを有効にするためのブール値
  • custom_link_format：ソーシャル共有者のURLとしてのカスタムURL
 { "enabled": false, "custom_link_format": "mailto:?subject=Check out {{ social_link_url }} &body=Check out {{ social_link_url }}" }

単行テキスト

ページ、ブログリスト、ブログ記事、およびEメールでサポートされています。

{% module "text" path="@hubspot/text" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
value
テキスト

このパラメーターにテキストを追加します。

 "Some additional information in one line"

動画

ページ、ブログリスト、ブログ記事でサポートされています。

{% module "video" path="@hubspot/video" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
video_type
選択

動画のタイプ。次の選択肢があります。

  • embed：外部ソースからの埋め込みコード
  • hubspot_video：HubSpotがホスティングしている動画
 embed
hubspot_video
動画プレーヤー

HubSpotがホスティングしている動画。video_typeがhubspot_videoの場合に使用されます。
embed_field
埋め込み

次の埋め込みタイプをサポートします。

  • oembed
    • video：動画のURL
  • html：ビデオの埋め込みコード
oembed_thumbnail
画像

video_typeがembedで、embed_fieldがoembedの場合、oEmbed形式のサムネイル画像をオーバーライドします。
style_options
オブジェクト

oembed_thumbnail_play_button_color（色フィールド）を格納するオブジェクト。

 {"oembed_thumbnail_play_button_color":"#ffffff"}
placeholder_fields
オブジェクト

このオブジェクトに含まれる要素は次の通りです。

  • placeholder_title：テキストフィールド
  • placeholder_description：テキストフィールド
 {"placeholder_title":"No video selected", "placeholder_description":"Select a video type in the sidebar."}

動画Eメール

Eメールでサポートされています。

{% module "video_email" path="@hubspot/video_email" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
video_type
選択

動画のタイプ。次の選択肢があります。

  • embed：外部ソースからの埋め込みコード
  • hubspot_video：HubSpotがホスティングしている動画
 embed
hubspot_video
動画プレーヤー

HubSpotがホスティングしている動画。video_typeがhubspot_videoの場合に使用されます。
embed
オブジェクト

source_typeを格納するオブジェクト。使用できる値はoembedのみです。 

 { "source_type": "oembed" }
oembed_thumbnail
画像

video_typeがembedで、embed_fieldがoembedの場合、oEmbed形式のサムネイル画像をオーバーライドします。

 {"size_type": "exact"}
style_options
オブジェクト

このオブジェクトに含まれる要素は次の通りです。

  • play_button_color：色の16進数コード
  • play_button_scale：0～100の数値
 { {"play_button_color":{ "color":"#2f4254", "opacity":100},"play_button_scale" : 30} }
alignment
選択

動画の位置合わせ。次の選択肢があります。

  • left
  • center
  • right
 center

動画埋め込みLP

ページでサポートされています。

{% module "video_embed_lp" path="@hubspot/video_embed_lp" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
url
テキスト

動画のURL。VimeoとYouTubeのURLがサポートされています。

 "https://www.youtube.com/watch?v=X1Rr5BFO5rg"
is_full_width
ブール値

動画を全幅に設定（true）、または手動で幅と高さを設定します（false）。

 true
max_width
数値

最大の幅（px）

 800
max_height
数値

最大の高さ（px）

 450

WhatsAppリンク

ページ、ブログ記事、ブログリストでサポートされています。WhatsAppチャネルの接続が必要です。

{% module "whatsapp_link" path="@hubspot/whatsapp_link", label="whatsapp_link" %}
Use this table to describe parameters / fields
ParameterTypeDescription Default
whatsapp_number
URL

アカウントに接続されているWhatsAppチャネルの中から選択します。
optin_text
選択オプトインとオプトアウトのテキスト。
whatsapp_display
選択

ボタンにテキストとWhatsAppアイコンのいずれか、または両方を表示するように選択します。次の選択肢があります。

  • text_and_icon
  • text
  • icon
 text_and_icon
icon_position
選択

ボタン上のアイコンの位置。leftまたはrightを指定できます。

 left
button_text
文字列

ボタンのテキスト。

 Chat on WhatsApp
whatsapp_icon_title
文字列

スクリーンリーダー用のアイコンテキスト。

 WhatsApp Icon
参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。