We've built a flexible widget framework to make it easy to embed your favorite content within Kumu. Widgets are curently supported for:
[[list/loops]], [[list "selector"]] or [[list "field"]]
- Speaker Deck
[[pippa/account/id]] or [[pippa/account/episodes/id]]
id is the unique code included in the embed code from any of the above services.
Widgets can be included in the map overview and in the description field for any element, connection or loop.
Use the code below to create a list of links to all the loops in your map. Just swap
connections and you'll have a list of elements or connections instead!
Try clicking on a link and you'll be taken to the profile for that item. If you hover over a link that item will be showcased on the map.
Limiting by type.
Rather than including all elements, you may want to build a list of only elements of a certain type. Entering
[[list/person]] would create a list of only the elements with type "person". Note: This only works for single-word values. If you have more complex values for the type field, use the selector guidance below.
Limiting by selector.
You can further limit the list by using any selector. The format is
[[list "selector"]]. For example, you could use this to build a list of just those people who are highly influential
[[list "person['level of influence'='high']"]].
Change the showcase behavior. You can override the default showcase behavior used in the list widget to also highlight what is connected to the given selection.
Below is an example of how to change the showcase behavior for a list of all elements with type "person":
Below is an example of how to change the showcase behavior if you are using the list widget format where you use a custom selector:
Creating lists of field values. You can also create a list of all the values for a particular field. This list allows you to hover over any value and showcase those elements, connections and loops that have that value.
Simply include the field name in quotes in the standard list format.
[list "field name"]
Use the code below to embed a Vimeo video in the profile. Simply swap the ID for the ID of the video you'd like to include and add a descriptive title (optional).
[[vimeo/36519586 "a story for tomorrow by gnarly bay"]]
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.
We've added pre-built aspect ratios to deliver content with the right height and width. Add
?aspect=hd to embed the content with an HD aspect ratio.
[[slideshare/32200030?aspect=hd "Changing behavior through persuasive design"]]
Or rely on our standard defaults by not including anything (we've worked hard to make sure they are right for the majority of things you'll embed from a given platform).
[[speakerdeck/39d28e80a7840130b36006a0b9603b35 "The product is the byproduct"]]
The Pippa widget syntax can be one of the two following options:
In both options, replace
account with the username of the account that posted the audio. Replace
id with the episode ID, which is the last section of the Pippa player URL, after the last backslash. For example:
// Pippa player URL: https://player.pippa.io/teamhuman/episodes/ep-92-dr-mark-filippi ^ account ^ episode ID // Widget code: [[pippa/teamhuman/episodes/ep-92-dr-mark-filippi]]
Aspect Ratios and Other Settings
Each widget has a default aspect ratio as listed below:
- Vimeo [hd]
- YouTube [hd]
- Slideshare [sd]
- Speaker Deck [sd]
?aspect=sd after the ID for any widget to change from the default.
What other widgets do you need? Tell us!