Skip to content

How to Add Avatars

  1. Hover the gap between two rows and click the + button to add a row (pick any layout in the Add row dialog).
  2. Click an empty column inside the row, then pick Avatar in the Add block dialog.
  3. Click the new block to open its settings in the sidebar.

Use the Image URL field to set the avatar image URL. Typically you bind this to a dynamic data field such as a Pipedrive user photo or person photo URL using resource.field syntax.

If the URL resolves to a valid image, the avatar displays that image.

Use the Fallback Name field to define fallback text shown when no image is available. This is typically a person’s name – the avatar automatically extracts initials from the first two words (e.g., “John Doe” becomes “JD”).

You can use static text or bind it dynamically via the Data Picker.

Choose the avatar size from the dropdown:

  • Small (32px)
  • Medium (40px) — default
  • Large (56px)

Block Configuration sidebar for the Avatar block. Name 'Avatar', Image URL filled with an example image URL, Fallback Name 'Sarah Johnson' (helper text: 'Initials from first two words shown when image fails to load'), and Size set to 'Medium (40px)'. The canvas on the left shows the new Avatar block in Row 1.