Skip to content
Quotivity Help Center

Configuring the Image module

Show a different image on each quote by pointing the module at a CRM property that holds the image URL.

Overview

Section titled “Overview”

The Image module puts a picture on the quote — a customer logo, a product shot, a diagram — and reads the address of that picture from the CRM. Each quote can show a different image while every quote uses the same template.

In HubSpot’s module picker it’s called Image (Quotivity).

Settings

Section titled “Settings”
Setting What it does
Image URL property The quote, deal, or company property that holds the image URL. Required
Alt text A short description for buyers who cannot see the image. Leave it blank when the image is decorative
Caption Optional text under the image
Alignment Left, center, or right. Defaults to center
Width How wide the image is. Defaults to auto, which keeps the image’s natural width
Max width The widest the image can grow. Defaults to 100% so it stays inside the page
Height Optional. Leave it blank to keep the image’s natural height
Fit Contain, cover, or fill. Shown only when a height is set. Defaults to contain
Border radius Rounds the corners. Defaults to 0

The source property can be a text or multi-line text property on the Quote, Deal, or Company object. The value has to be an absolute URL that starts with https://. Published quotes are served over HTTPS, so an http:// address is left off the quote, the same as a file id, a page of HTML, or an embed snippet.

Width, max width, height, and border radius accept auto, or a number with px, %, rem, em, vw, or vh. Anything else is ignored and the default is used instead.

Steps

Section titled “Steps”
  1. Store the URL. Add a text property such as “Proposal image URL” on the deal, company, or quote, and put an https:// image address in it.
  2. Add the module in HubSpot. Click Edit Design, search the module picker for “Image”, drag it where the picture belongs, and publish the page.
  3. Open the module. Select Image in the Template Modules panel and pick the source property.
  4. Set the formatting. Choose alignment and size. Add alt text when the picture carries meaning the caption doesn’t already say.
  5. Check the preview with a record that has the property filled in, then publish the template.

Tips

Section titled “Tips”
  • Quotes with the property empty simply omit the image, so it’s safe to include the module on every quote.
  • A logo usually wants a max width such as 240px and no fixed height, so it keeps its shape.
  • Use Cover when you set a height and want the picture to fill that box, cropping the edges. Contain fits the whole picture inside the box.
  • When several deals or companies are associated, the module uses the same record as the Quote Embed module.
Section titled “Related articles”