Supported products
Sales Hub -Professional
For businesses that use quotes during the sales process, a sales rep can create a deal, then create a quote associated with that deal all within HubSpot. The sales rep would then send the quote to a customer using the generated URL or PDF. The prospect then accepts or declines the quote. In some cases payment is exchanged right away, in some cases an e-signature is used.
Similar to the themes and templates you can create for the CMS as a developer, you can create quote themes and templates to enable sales teams to send quotes that are tailored to their business needs.
Please note:
You can create custom quote themes and templates with any HubSpot subscription, including CMS Free, but an account will need Sales Hub Professional or Enterprise to use those templates for their quotes.
Custom quote templates are built using the same underlying systems that other types of templates use. For example:
- Domain-level settings apply to quotes, including head and footer HTML and domain stylesheets. You can disable domain stylesheets using template annotations.
- Most of HubL's functionality works on quote templates, including functions, filters, if conditions, imports, and includes.
- When using personalization tokens in a quote, HubSpot will not render them dynamically. Instead, the token is rendered at the time of publishing the quote, and will not update upon signing. For this reason, you should not use personalization tokens for properties that are updated after a quote is published, including:
- Payment status
- Payment date
- Esign date
- Esign completed signatures
Due to the specific use-case of quotes, there are some key differences between how quotes work from the way page and email templates work:
- More data is available to the quote template that is restricted for other template types. For example, quote and deal-related data is available to a quote template. You can also include contact data for quote recipients in a quote template.
- There is not currently a drag and drop editor for building quote templates. Instead, there is a module-based editor for customizing or hiding the modules that are already in a template.
Because more data is available to quote templates without requiring password protection. You should take care to only expose necessary information.
Quote templates are contained within quote themes, similar to the relationship between CMS templates and themes. HubSpot provides a set of default quote modules that you can use to enable downloading to PDF form, facilitating payment, and collecting signatures. In addition, you'll use quote template variables to access quote data and other CRM data directly from the quote template.
To get started, you can create a custom quotes theme, along with templates, modules, and more, using HubSpot's boilerplate CMS quotes theme.
Enumeration properties such as dropdown menus, or multiple checkboxes, can be incorporated into custom quote templates. Learn more about HubSpot's property types.
The JSON returned for custom enumeration properties includes both the internal value and the external label.
Please note:
By default, quotes created after September 13th, 2024 will display the property label rather than the internal value.
custom_properties: {
my_custom_property: {
label:"Label1",
internal:"value1"
},
another_custom_property: {
label:"Label99",
internal:"value99"
}
}
For CMS Developers using custom quotes templates, the crm_property_definition
function can be used to retrieve quote property data, and will allow you to replace the label with the value where necessary.
xxxxxxxxxx
{% set dealEnum = template_data.quote.associated_objects.deal.deal_enum %}
{% set dealEnumProp = crm_property_definition("DEAL", "deal_enum").options|selectattr('label', "equalto", dealEnum)|first %}
{{ dealEnumProp.value }}
In Sales Hub Starter, Professional, and Enterprise accounts, quotes can be configured to include e-signature functionality. To enable this for custom quote templates, add the quote_signature module to the quote template.
xxxxxxxxxx
<section class="signature">
{% module "signature" path="@hubspot/quote_signature" %}
</section>
Because Dropbox Sign renders the print version of a quote for signing, ensure that the signature field is displayed in the print version of your quote. Otherwise, Dropbox Sign will display an error when the user goes to verify their signature.
If you'd like to enable users to print or download a quote, it's recommended to include the download module. Alternatively, since a quote is a web page you can use JavaScript and a button element to provide an easy way to print the quote.
To optimize and style the print and PDF version of a quote template, you can use the @media print
media query in the template's stylesheet. For example, HubSpot's default Basic quote theme includes the following print styling in the basic.css
stylesheet:
@media print {
.hs-quotes--basic {
max-width: unset;
}
.hs-quotes--basic .line-items__total-name {
float: left;
}
.hs-quotes--basic .comments,
.hs-quotes--basic .terms {
break-inside: avoid;
}
}
To preview the print version in Chrome:
-
Open the web version of a quote.
-
Right-click the page, then select Inspect.
-
In the top right of the DevTools panel, click the three vertical dots ⋮, then select More tools, then select Rendering.
-
In the Rendering panel, scroll to the Emulate CSS media type section. Then, click the dropdown menu and select print.
You can now continue to testing out styling in Chrome. When you're ready to apply the styling to the template, copy the styles into your @media print
media query, then upload the template to HubSpot.
Updated styling will only apply to quotes created after updating the template. Existing quotes using the template will not be updated.