Comment on page
Widgets
We've built a flexible widget framework to give superpowers to the Map Overview and the Description field in profiles.

image of list of connections belonging to an element
With widgets, you can do the following:
To use widgets, start editing the Map Overview, or the Description of an element, connection, or loop, and type double square brackets
[[]]
. What you put inside the double square brackets depends on which widget you're using—you can read the rest of this article to learn more about each option.The list widget allows you to create lists of elements, connections, and loops inside the Map Overview or a Description.
For a basic list, just type
list/
inside your double square brackets, and then type elements
, connections
, or loops
depending on what you want to list.[[list/elements]] --> Creates a list of all elements
[[list/connections]] --> Creates a list of all connections
[[list/loops]] --> Creates a list of all loops

List widget
All the items in the list are links—you can hover over a link to showcase an item on the map, or you can click a link to jump to the profile for that item.
[[list/connection?sort=strength]]
[[list/element?sort=net-worth]]
Add
&desc=true
to the end if you want to sort in descending order:[[list/loop?sort=label&desc=true]]
To create a list that is more specific that "all elements", for example, you can type
list
and a selector in double quotes.[[list "person"]] --> List elements with "Person" in the Type field
[[list ":from(person)"]] --> List connections leading from "Person" type elements
[[list "['influence'='high']"]] --> List items with "High" in the Influence field.
Normally, it would be okay to write a selector with double quotes, e.g.
["influence"="high"]
. But inside the list widget, you need to write it with single quotes instead: ['influence'='high']
.'influence'
and 'high'
are enclosed in single quotes, and the entire selector is enclosed in double quotes.If you want to list all of an element's connections in it's profile, we wrote a more detailed article on how to achieve that.
[[list?sort=net-worth "person"]]
[[list?sort=strength ":from(person)"]]
Add
&desc=true
to the end if you want to sort in descending order:[[list?sort=type&desc=true "['influence'='high']"]]
Kumu's showcase actually has three different "modes" to affect how it works:
normal
mode showcases the selection plus any connections between the showcased elements (default)loose
mode showcases the selection plus neighboring elementsstrict
mode showcases only the selection itself, nothing else
By default, hovering over an item in the list widget will showcase that item in
normal
mode. You can override this default behavior by adding ?mode=loose
or ?mode=strict
.For basic lists, add that modifier at the very end:
[[list/elements?mode=loose]]
For more specific lists, add the modifier after the word
list
:[list?mode=strict ":from(person)"]
To list all the values of a particular field, type
list
inside your double square brackets, followed by the field name in double quotes.Simply include the field name in quotes in the standard list format.
[[list "Level of Influence"]]

When you hover over a field value in the list, Kumu will showcase all elements, connections, and loops that have that field value in their profile.
To embed a Vimeo video, type
vimeo/
inside the double square brackets, followed by the ID if the video you'd like to include:[[vimeo/36519586]]
Optionally, you can change the aspect ratio from
hd
(the default) to sd
:[[vimeo/36519586?aspect=sd]]
You can also add a descriptive title:
[[vimeo/36519586 "a story for tomorrow by gnarly bay"]]
To embed a YouTube video, type
youtube/
inside the double square brackets, followed by the ID if the video you'd like to include.You can find the ID for a given YouTube video within the URL of the video. Just grab the portion after the
?v=
part of the URL.[[youtube/mXiFqI-mekw]]
Optionally, you can change the aspect ratio from
hd
(the default) to sd
:[[youtube/mXiFqI-mekw?aspect=sd]]
Note: When embedding a Youtube video, make sure to use the full URL (e.g. https://www.youtube.com/watch?v=VzNdrLLlJIU), not the shortened URL (e.g. https://youtu.be/VzNdrLLlJIU), as the shortened URL will make the embed fail.
To embed audio from Pippa, type
pippa/
inside your double square brackets, followed by everything after https://player.pippa.io/
in the URL of your episode:Full URL:
https://player.pippa.io/teamhuman/episodes/ep-92-dr-mark-filippi
Widget code:
[[pippa/teamhuman/episodes/ep-92-dr-mark-filippi]]
- 1.Type
anchor/
inside your double square brackets - 2.Add your account username and another slash
/
- 3.Add the ID of the episode
Full URL for an episode:
https://anchor.fm/my-username/episodes/my-episode-id
Widget code:
[[anchor/my-username/episodes/my-episode-id]]
To embed audio from Soundcloud, type
soundcloud/
inside your double square brackets, followed by the ID of the audio file:[[soundcloud/313184173]]
To embed documents from Scribd, type
scribd/
inside your double square brackets, followed by the ID of the document:[[scribd/416217686]]
The Scribd widget supports a
start_page
option that lets you define which page the embedded document should show first.To set the option, add a
?
after the document ID, then type start_page=
, and the page number you want to set.[[scribd/416217686?start_page=3]]
To embed a slideshow from Slideshare, type
slideshare/
inside your double square brackets, followed by the ID of the slideshow:[[slideshare/32200030]]
Optionally, you can change the aspect ratio from
sd
(the default) to hd
:[[slideshare/32200030?aspect=hd]]
You can also add a descriptive title:
[[slideshare/32200030 "Changing behavior through persuasive design"]]
To embed a slideshow from Speaker Deck, type
speakerdeck/
inside your double square brackets, followed by the ID of the slideshow:[[speakerdeck/39d28e80a7840130b36006a0b9603b35 "The product is the byproduct"]]
Optionally, you can change the aspect ratio from
sd
(the default) to hd
:[[speakerdeck/39d28e80a7840130b36006a0b9603b35?aspect=hd]]
You can also add a descriptive title:
[[speakerdeck/39d28e80a7840130b36006a0b9603b35 "The product is the byproduct"]]
Last modified 7mo ago