Balsamiq Community Discussion

Callouts for close objects on the wireframe

I am tryning to find how to refer to an annotation on a wireframe object, in order to refer to that later…

I find that Balsamiq supports callout but I am seeing that the callout has no arrow to be able to refer clearly more than one object that are very close in the wireframe (I have menus with many icons, close one to another, I want a callout for wach of them…).

Any suggestion is welcome.

Hello @simple45,

While it’s not possible to change the shape or size of the built-in call-outs, we do offer the ability to change the color and, which might help in your case, different directional shapes which make it a little clearer that the call out is pointing to a specific place e.g.


Beyond that, you could add markup controls to the canvas and point using an Arrow control like this:


Thanks. Maybe the “directional call-out”. How to change that? as I am having it only as a circle…

When you add the call-out, just hover over it initially to bring up the palette to change the shape and color:

I am not able to get what you are explaining. I am only able to modify the color. May be because I am with a trial version?
(I am using the trial to see if Balsami meets ous need…)

Hello again,

All our trials are fully-functioning versions so that should not be the problem.

Which version of Balsamiq are you using (e.g. Balsamiq Cloud, Balsamiq Wireframes for Desktop, etc.)?


Hey @simple45,
There is no directional callout out of the box, but you can create ones, as pictured:

Copy code and insert it into your wireframe to get all the pictured callouts:
{ "mockup": { "controls": { "control": [ { "ID": "0", "typeID": "__group__", "zOrder": "0", "measuredW": "39", "measuredH": "51", "w": "39", "h": "51", "x": "67", "y": "63", "children": { "controls": { "control": [ { "ID": "0", "typeID": "RoundButton", "zOrder": "0", "measuredW": "32", "measuredH": "32", "x": "4", "y": "19", "properties": { "shape": "triangle", "shapeRotation": "180", "color": "2848996", "borderColor": "2848996" } }, { "ID": "1", "typeID": "CallOut", "zOrder": "1", "measuredW": "39", "measuredH": "39", "x": "0", "y": "0" } ] } } }, { "ID": "1", "typeID": "__group__", "zOrder": "1", "measuredW": "39", "measuredH": "50", "w": "39", "h": "50", "x": "121", "y": "52", "children": { "controls": { "control": [ { "ID": "0", "typeID": "RoundButton", "zOrder": "0", "measuredW": "32", "measuredH": "32", "x": "4", "y": "0", "properties": { "shape": "triangle", "color": "2848996", "borderColor": "2848996" } }, { "ID": "1", "typeID": "CallOut", "zOrder": "1", "measuredW": "39", "measuredH": "39", "x": "0", "y": "11" } ] } } }, { "ID": "2", "typeID": "__group__", "zOrder": "2", "measuredW": "52", "measuredH": "39", "w": "52", "h": "39", "x": "176", "y": "63", "children": { "controls": { "control": [ { "ID": "0", "typeID": "RoundButton", "zOrder": "0", "measuredW": "32", "measuredH": "32", "x": "0", "y": "4", "properties": { "shape": "triangle", "color": "2848996", "borderColor": "2848996", "shapeRotation": "90" } }, { "ID": "1", "typeID": "CallOut", "zOrder": "1", "measuredW": "39", "measuredH": "39", "x": "13", "y": "0" } ] } } }, { "ID": "3", "typeID": "__group__", "zOrder": "3", "measuredW": "52", "measuredH": "39", "w": "52", "h": "39", "x": "244", "y": "63", "children": { "controls": { "control": [ { "ID": "0", "typeID": "RoundButton", "zOrder": "0", "measuredW": "32", "measuredH": "32", "x": "20", "y": "4", "properties": { "shape": "triangle", "color": "2848996", "borderColor": "2848996", "shapeRotation": "270" } }, { "ID": "1", "typeID": "CallOut", "zOrder": "1", "measuredW": "39", "measuredH": "39", "x": "0", "y": "0" } ] } } } ] }, "attributes": { "name": "New Wireframe 3", "order": 1000021.0254818089, "parentID": null }, "resourceID": "CC70AB24-10D0-41B9-BD18-F96C88FEDE66", "mockupH": "62", "mockupW": "229", "measuredW": "296", "measuredH": "114", "version": "1.0" }, "groupOffset": { "x": 0, "y": 0 }, "dependencies": [] }

Not clear.

Each time I need to use a callout on an object, I will have to copy all this code? it’s heavy.
And copy what code exactly where exactly?

  1. Copy and paste the code into your Balsamiq project (CTRL + C, CTRL+V)
  2. Duplicate the callout with CTRL+D in Balsamiq
  3. Edit the text into callout

1 Like

Ok, thanks.
I just noticed that I can take more callouts from “Wirereframes To Go” ?

Thanks Alexey. It works !

Good morning everybody. Do you think that Alexey’s suggestion will work for you @simple45? (thanks 10^6 for that @Alexey_Kolchenko!)

I wanted to follow this up because I am confused why you’re not seeing the same palette as me when adding a call out:


Can you do me a favor when you get a moment and add a call out to one of your wireframes, hover over it to bring up the color-changer palette then grab a screenshot and either paste it into a message here or send it to support@balsamiq,.com, please?

Can you also let me know which OS platform you are on (e.g. macOS Mojave, Windows 10 etc.) and which version of Balsamiq Wireframes you have installed. Thank you!

Hello alasdair :

  • I get your palette when I import that from “Wirereframes To Go”. Only from Balsamiq, I was not able.
  • Alexey suggestion is working as well

I am on a desktop version, 4.0.26

It that answers your question?

Can you do me a favor and add a callout to one of your wireframes, then hover over it and send me a screenshot of what you are seeing when you get a moment please? I’d really like to understand why you’re not seeing it by default. Thanks so much.

If it would be easier to jump on a quick Zoom/Google Hangout/whatever call and share your screen, that would be great too! Drop me a mail at and we can do that.

Oh one other thing @simple45.

It’s not related but would you please take a minute to download and install the latest version of the app so we’re not chasing issues which might have been fixed in an update. You can always grab the latest version here:

Hey guys,
There are two different callouts with different behavior:

  1. Callout as a control (exists in old versions)
  2. Callout as a feature (from version 4, and Cloud)

I always use callout as a control to annotate my wireframes, while callouts as a feature are suitable for multi user work mostly.

1 Like

Good spot @Alexey_Kolchenko. Thank you.

@simple45, can you make sure you’re using the callout in the Comments panel. I think this may be the issue.

I can not install whatever I want. I am not on a personal machine…

As explained under another topic, I am trying to do some wireframes examples/samples in order to decide if we wil go with Balsamiq or not.

Until now, the most TWO important issues I have are the following :

  1. Wireframes with links - Export to pdf
    If the pdf export is not working 100% perfect, it will be a problem…

  2. iPad Container - Vertical submenu over an horizontal top menu
    The solution that Brenden provide is just not a solution

Later, I will see for what you ask for callouts, but it is no longer an issue for me. Thanks.

I understand. Perhaps you could get the ball rolling on getting appropriate permission to install an update to your existing installation of Balsamiq Wireframes?

Version 4.0.26 is a little out of date today - we released it over 2 months ago so it would be great to get you on the latest version so you don’t run into any issues which have since been fixed.

Were you able to check out the callouts in the Comments feature? I’m hoping that solves the confusion over callout shape/color.