Confluence Docs 3.0 : Widget Macro This page last changed on Oct 26, 2009 by jens@atlassian.com. The Widget macro, or Widget Connector, allows you to embed multi-media content from other web sites into your Confluence page. It supports content such as: Gadgets and other widgets: Google Gadgets, Widgetbox. Videos: YouTube, MySpace Video, Google Video, Yahoo Video, Dailymotion, Episodic, Vimeo, Metacafe, blip.tv, Viddler. Photos and images: Flickr, Skitch.com. Micro-blogging: Twitter, FriendFeed, BackType. Documents and presentations: SlideShare, SlideRocket, Scribd, presentations on Google Docs. Calendars: Google Calendar. Forms and online databases: Wufoo HTML Form Builder, Dabble DB. On this page: Usage with the Macro Browser Usage with the Wiki Markup Editor Parameters Live Example of Flickr Photos Live Example of Google Gadget More Examples of Macro Code About the Web-Widget and Widget Macros Troubleshooting ## Usage with the Macro Browser To insert the Widget macro into a page using the Macro Browser, Open your desired Confluence page, then click the 'Edit' button. The 'Edit Page' mode opens. Next, click the Macro Browser icon on the editor toolbar. The Macro Browser will open in the middle of the screen. In the Macro Browser, type the name of your desired macro into the search box at the top right of the window. Macros with a matching name will appear in the centre pane. Click on the desired macro to see its options screen. Here, you can set the macro parameters then click 'insert' to put the macro into the page. Once you've found the Widget macro and have added the required parameter values, click 'insert' to add it to your page. ## Usage with the Wiki Markup Editor Just type the word 'widget' in curly brackets, and give it the URL (web address) of the thing you want to display.
    {widget:url=http://example.com/my-location}
If the `web-widget` alias is enabled on your Confluence site, you can use `web-widget` instead of `widget`. See below. ## Parameters Parameters are settings for Confluence macros that allow the user to control their content or presentation. The table below lists relevant parameters for this macro. Parameter names are displayed differently in the macro browser interface and in wiki markup. Below, parameter names used in the macro browser are indicated in Bold text, while their equivalents in wiki markup are indicated in (`bracketed`) text. If the latter is not shown, then in wiki markup, the parameter's name should be omitted and only its value should be added immediately after the colon symbol (`:`).
Parameter | Required | Default | Description
--- | --- | --- | ---
Web Sites Widget URL (`url`) | yes |  | This is the URL provided by the external web site for embedding content from that web site onto another web page.
Pixel Height (Value Only) (`height`) | no |  | Specify the height of the display, in pixels (default) or as a percentage of the window's height. For example, to specify a height of 200 pixels:
    {widget:url=http://www.flickr.com/photos/tags/atlassian/|height=200}
This code also specifies a height of 200 pixels:
    {widget:url=http://www.flickr.com/photos/tags/atlassian/|height=200px}
This code specifies a height of 10 percent of the window's height:
    {widget:url=http://www.flickr.com/photos/tags/atlassian/|height=10%}
Pixel Width (Value Only) (`width`) | no |  | Specify the width of the display, in pixels (default) or as a percentage of the window's width. For example, to specify a width and height of 200 pixels:
    {widget:url=http://www.flickr.com/photos/tags/atlassian/|width=200|height=200}
This code also specifies a width and height of 200 pixels:
    {widget:url=http://www.flickr.com/photos/tags/atlassian/|width=200px|height=200px}
This code specifies a width of 10 percent of the window's width:
    {widget:url=http://www.flickr.com/photos/tags/atlassian/|width=10%}
## Live Example of Flickr Photos This example shows the Widget macro in action. It displays all photos from Flickr with the tag 'Atlassian'. ###### What You Need to Type
    {widget:url=http://www.flickr.com/photos/tags/atlassian}
###### What You Will Get ## Live Example of Google Gadget This example shows the Widget macro in action. It lets you play with a Google Gadget, Gadzi's Monkey Virtual Pet. ###### What You Need to Type
    {widget:url=http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=www.gadzi.com/gadgets/monkey.xml|width=250}
3. ###### What You Will Get ## More Examples of Macro Code ##### Google Gadgets You will need to find the URL for the Google Gadget you want to display. Here is one way to find a gadget's URL: Go to the Google Gadgets directory. Find the gadget you want then click its name, such as 'Spider'. The gadget's summary page will open. Copy the URL from your browser's address bar. The URL looks something like this one:
       http://www.google.com/ig/directory?synd=open&num=24&url=http://abowman.googlepages.com/spider.xml&output=html
2. Paste the URL into the Widget macro code on your Confluence page. You can also use the URL of the 'add gadget' page. The page is called 'Add "gadgetx" to your iGoogle page': There are a couple of ways to get to the 'add gadget' page: Click a '+Google' button underneath the gadget when displayed on a page somewhere. Or click 'Add Stuff' on your iGoogle page. Copy the URL from your browser's address bar. The URL would look something like this one:
       http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=abowman.googlepages.com/spider.xml
Here is an example of the Widget macro code for embedding a Google Gadget:
    {widget:url=http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=abowman.googlepages.com/spider.xml}
5. ##### Widgetbox widgets You will need to find the URL for the Widgetbox widget you want to display. Here is one way to find a widget's URL: Ensure you are logged in to Widgetbox and that you are viewing the Widgetbox Gallery. Find the widget you want then click its name, such as 'cyber-pet'. The widget's summary page will open. Within the Get Widget section, click the Atlassian Confluence icon . The Widgetbox Add to Confluence dialog box appears, containing the URL required for the Widget Macro. If you cannot see this icon, click the more... link to reveal it. In the Widgetbox Add to Confluence dialog box, click the Copy button. Copy the URL from your browser's address bar. The URL looks something like this one:
       http://widgetbox.com/confluence/b8327e33-c8eb-4a38-b842-fba866ffdd28
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Widgetbox widget:
    {widget:url=http://widgetbox.com/confluence/b8327e33-c8eb-4a38-b842-fba866ffdd28}
3. ##### YouTube You will need to find the URL for the YouTube video that you want to display. To find a YouTube video's URL: Go to YouTube and search for the video you want. Click the title of the video, such as 'Wikis in Plain English'. The video's summary page will open. Copy the URL from your browser's address bar. The URL looks something like this one:
       http://au.youtube.com/watch?v=-dnL00TdmLY
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a YouTube video:
    {widget:url=http://au.youtube.com/watch?v=-dnL00TdmLY}
3. ##### MySpace Videos You will need to find the URL for the MySpace video that you want to display. To find a MySpace video's URL: Go to MySpace Video and search for the video you want. Click the title of the video, such as 'Glacier Creek Confluence Time Lapse'. The video's summary page will open. Copy the URL from your browser's address bar. The URL looks something like this one:
       http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=3376248&searchid=20c789f6-1ae9-459a-bfec-75efcfc2847c
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a MySpace video:
    {widget:url=http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=3376248&searchid=20c789f6-1ae9-459a-bfec-75efcfc2847c}
3. ##### Google Video You will need to find the URL for the Google video that you want to display. To find a Google video's URL: Go to Google Video and search for the video you want. Click the title of the video, such as 'An Evening With Wiki Inventor Ward Cunningham in Conversation'. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this:
       http://video.google.com/videoplay?docid=-7739076742312910146&ei=nJAfSbrzPIWOwgOhv_GKDA&q=An+Evening+With+Wiki+Inventor+Ward+Cunningham+in+Conversation&emb=1
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Google video:
    {widget:url=http://video.google.com/videoplay?docid=-7739076742312910146&ei=nJAfSbrzPIWOwgOhv_GKDA&q=An+Evening+With+Wiki+Inventor+Ward+Cunningham+in+Conversation&emb=1}
3. ##### Yahoo Video You will need to find the URL for the Yahoo video that you want to display. To find a Yahoo video's URL: Go to Yahoo Video and search for the video you want. Click the title of the video, such as 'Wiki Technology Trend: Past, Now and Future'. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this:
       http://video.yahoo.com/watch/423158/2424140
If you are unable to obtain a unique URL from your browser's address bar, click the envelope (Share) icon on the lower section of the video screen and copy the contents of the Link field. Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Yahoo video:
    {widget:url=http://video.yahoo.com/watch/423158/2424140}
3. ##### Dailymotion Video You will need to find the URL for the Dailymotion video that you want to display. To find a Dailymotion video's URL: Go to Dailymotion and search for the video you want. Click the title of the video, such as 'Wiki Technology Trend: Past, Now and Future'. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this:
       http://www.dailymotion.com/user/spacevidcast/video/x7zevj_spacevidcast-2009-promo-video_tech
If you are unable to obtain a unique URL from your browser's address bar, click Menu at the lower right section of the video screen, select URL & Embed Code and copy the contents of the Link field. Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Dailymotion video:
    {widget:http://www.dailymotion.com/user/spacevidcast/video/x7zevj_spacevidcast-2009-promo-video_tech}
1. ##### Episodic You will need an Episodic user account if you want to create and distribute videos via Episodic. To embed an Episodic video onto a Confluence page: Find the video and copy the URL from the address bar of your browser. The URL looks something like this:
       http://app.episodic.com/shows/13/episodes/493
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding an Episodic video:
    {widget:url=http://app.episodic.com/shows/13/episodes/493}
3. ##### Vimeo You will need to find the URL for the Vimeo video that you want to display. To find a Vimeo video's URL: Go to Vimeo and search for the video you want. Click the title of the video, such as 'The Wiki Show - Allison the Russian High Kicker'. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
       http://www.vimeo.com/909808
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Vimeo video:
    {widget:url=http://www.vimeo.com/909808}
3. ##### Metacafe You will need to find the URL for the Metacafe video that you want to display. To find a Metacafe video's URL: Go to Metacafe and search for the video you want. Click the title of the video, such as 'Wikis In Plain English (How To)'. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
       http://www.metacafe.com/watch/679493/wikis_in_plain_english_how_to/
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Metacafe video:
    {widget:url=http://www.metacafe.com/watch/679493/wikis_in_plain_english_how_to/}
3. ##### blip.tv You will need to find the URL for the blip.tv video that you want to display. To find a blip.tv video's URL: Go to blip.tv and search for the video you want. Click the title of the video, such as 'River cruising on the Rhine'. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
       http://blip.tv/file/996864/
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a blip.tv video:
    {widget:url=http://blip.tv/file/996864/}
| The Widget Connector packaged with Confluence 3.0 currently possesses issues rendering blip.tv videos on Confluence pages. This problem has already been recorded in CONF-15667.
3. ##### Viddler You will need to find the URL for the Viddler video that you want to display. To find a Viddler video's URL: Go to Viddler and search for the video you want. Click the title of the video, such as 'Gliffy Diagramm in Conflu...'. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
       http://www.viddler.com/explore/Markus_Z/videos/1/
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Viddler video:
    {widget:url=http://www.viddler.com/explore/Markus_Z/videos/1/}
##### Flickr You can embed a slide show of photos from Flickr by supplying a URL that specifies one of the following: Photos with a specific tag. Photos belonging to the photostream of a specific Flickr user. A set of photos as defined by the Flickr user. A user's photostream starting at a specific photo. If you want to do something else, we suggest that you try any Flickr URL. It should work. Below are some examples of the Widget macro code for embedding Flickr images. ###### Flickr Photos with a Specific Tag This example displays a slide show of Flickr photos that are tagged with the word 'Atlassian'.
    {widget:url=http://www.flickr.com/photos/tags/atlassian/}
###### Flickr Photos from a Specific User This example displays a slide show of photos from the Flickr photostream of user 'Atlassian'.
    {widget:url=http://www.flickr.com/photos/atlassian/}
###### Flickr Photos from a Specific Set This example displays a slide show of Flickr photos from the set 'Melbourne Cup - November 2008' created by user 'Atlassian'.
    {widget:url=http://www.flickr.com/photos/atlassian/sets/72157608657271078/}
###### A Specific Flickr Photo This example displays a slide show of photos from the Flickr photostream of the user 'Atlassian', starting with a specific photo.
    {widget:url=http://www.flickr.com/photos/atlassian/3003538919/}
2. ##### Skitch.com You will need to find the URL for the Skitch image that you want to display. To embed a Skitch image onto a Confluence page: Go to Skitch.com. Find the image and copy the URL from the address bar of your browser. The URL looks something like this:
       http://skitch.com/atlassian/411g/example-image
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Skitch image:
    {widget:url=http://skitch.com/atlassian/411g/example-image}
##### Twitter To display the latest messages from a Twitter user, add the user's Twitter link as a URL in the Widget macro.
    {widget:url=http://twitter.com/username}
The example below will display Mike Cannon-Brooke's Twitter messages:
    {widget:url=http://twitter.com/mcannonbrookes}
##### FriendFeed To display the latest messages from a FriendFeed user, add the user's FriendFeed link as a URL in the Widget macro. For example:
    {widget:url=http://friendfeed.com/myname}
##### BackType To display the latest blog or website comments from a BackType user, add the user's BackType widget link as a URL in the Widget macro. For example:
    {widget:url=http://www.backtype.com/myname}
3. ##### SlideShare You will need to find the URL for the SlideShare presentation that you want to display. To find a SlideShare presentation's URL: Go to SlideShare and search for the presentation you want. Click the title of the presentation, such as 'Using JIRA & Greenhopper for Agile Development'. The presentation's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
       http://www.slideshare.net/jleyser/using-jira-greenhopper-for-agile-development-presentation
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a SlideShare presentation:
    {widget:url=http://www.slideshare.net/jleyser/using-jira-greenhopper-for-agile-development-presentation}
2. ##### SlideRocket You will need to find the URL for the SlideRocket presentation that you want to display. To find a SlideRocket presentation's URL: Log in to SlideRocket and go to your library of presentations. Copy the 'web link' for the presentation you want to display. This will give you a URL that looks something like this one:
       http://app.sliderocket.com/app/FullPlayer.aspx?id=132f9db7-b0fb-4f51-b974-36652774971b
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a SlideRocket presentation:
    {widget:url=http://app.sliderocket.com/app/FullPlayer.aspx?id=132f9db7-b0fb-4f51-b974-36652774971b}
3. ##### Scribd You will need to find the URL for the Scribd presentation that you want to display. To find a Scribd presentation's URL: Go to Scribd and search for the presentation you want. Click the title of the presentation, such as 'My Sea Friends Coloring Book'. The presentation's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
       http://www.scribd.com/doc/5683554/My-Sea-Friends-Coloring-Book
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Scribd presentation and displaying it with a height of 600 pixels:
    {widget:url=http://www.scribd.com/doc/5683554/My-Sea-Friends-Coloring-Book|height=600px}
2. ##### Google Docs Presentations You can embed presentations from Google Docs, but not other document types. You will need to find the URL for the Google Docs presentation that you want to display. To find the URL of a Google Docs presentation: Publish your presentation in Google Docs. View your published document, then copy the URL from your browser's address bar. The URL will look something like this:
       http://docs.google.com/Presentation?docid=ddpqn8g5_0fx96zmmq&mm=en_GB
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Google Docs presentation
    {widget:url=http://docs.google.com/Presentation?docid=ddpqn8g5_0fx96zmmq&mm=en_GB}
4. ##### Google Calendar You can embed a Google Calendar into your page and to do this, you will need to add the URL for the Google Calendar that you want to display. To find the URL for a Google Calendar: Log in to Google Calendar. In the calendar list on the left side of the page, ensure the appropriate calendar is selected, click the down-arrow button next to the calendar name and then select the Calendar settings option. (Alternatively, if available, click the Manage Calendars link at the bottom of the calendar list and then click the name of the appropriate calendar.) In the Calendar Address section, click the HTML button. A pop-up message with your calendar's public URL appears. Copy the URL from this pop-up message. The URL looks something like this:
       http://www.google.com/calendar/embed?src=somebody%40example.com&ctz=Australia/Sydney
Paste the URL into the Widget macro code on your Confluence page. Here is an example of the Widget macro code for embedding a Google Calendar:
    {widget:url=http://www.google.com/calendar/embed?src=somebody%40example.com&ctz=Australia/Sydney}
##### Wufoo HTML Form Builder To display an HTML form built in the Wufoo HTML Form Builder, add the form's link as a URL to the Widget Macro. For example:
    {widget:url=http://examples.wufoo.com/forms/contact-form/}
##### Dabble DB online database builder To display a shared page built in Dabble DB, add the page's link as a URL to the Widget Macro. For example:
    {widget:url=https://confluence-sample.dabbledb.com/page/confluence-sample/nSQqdgIg}
The Widget Macro supports shared Dabble DB view and form pages. Hence, it is possible to insert a Dabble DB data entry form into a Confluence page. Any data submitted via this form can be displayed on the same or another page via a Dabble DB view. ## About the Web-Widget and Widget Macros Confluence supports `web-widget` as an alias for `widget`. Your System Administrator can enable or disable one or both these macro names. The alias is useful for Confluence sites which use Adaptavist's Community Bubbles plugin, to avoid conflict with the 'widget' macro supplied by that plugin. If the `web-widget` alias is enabled on your Confluence site, you can use `web-widget` instead of `widget` in all the examples above. ## Troubleshooting If the URL given in the Widget macro does not work, the Widget macro displays an icon and the base URL. The icon will be linked to the full URL given in the macro code. For example, the following code:
    {widget:url=http://example.com/invalid}
will result in an image like the one below: example.com ##### RELATED TOPICS Working with Macros Take me back to the Confluence User Guide. Attachments: WidgetConnectorInvalidURL.png (image/png) widgetbox-confluence-icon.png (image/png)

Document generated by Confluence on Nov 05, 2009 23:35