Build a MUCOW widget

20 MINS
20 minutes to complete this task.
Dive deep into designing Adobe Muse addons. Learn how you can add new functionality, pushing the limits of what you can do with Muse using code and a little know-how. 20 minutes to complete this task.

Building a MUCOW widget.

So you want to create a MUCOW widget? Fire up your favorite code editor (we use Edge Code, part of your Creative Cloud Apps) and we will begin.

We are going to build a Google Analytics code widget just to show you the principles of how MUCOW building works.

The completed widget is part of the downloads available with this edition of 123muse.

You will need:

A code editor such as Edge Code, Textmate or Brackets Adobe Muse for testing the widget.

DOWNLOAD December 2014 - Download Pack

The MUCOW building process.

  1. Get the code that you want to use as the basis of your widget and decide what inputs can be used as "parameters" (see items 2 and 3 below).
  2. Decide which content tags the code will need to be placed in (see items 3,4,5 and 6 below).
  3. Write your code in a text editor and save as a .xml file.
  4. Duplicate the XML file and change the extension to .mucow
  5. Open Muse and drag (or use the File > Place option) the .mucow file a page in "Design" view.
  6. If there are any errors Muse may tell you what they are. De-bug and try again.
  7. Once there are no errors you can select the widget on the page and add it to a Muse library (see the article 'Package and Export Add-ons and Libraries')

Breaking down the code...

1 CODE: Copy and paste the code below...

<htmlwidget name="Google Analytics" formatnumber="2" localization="none" termstext="Use as much as you wish" creator="123muse.com" defaultwidth="114" defaultheight="40" isresizable="false">

First we need to tell Muse about this widget. We can see the "name" of the widget along with other data such as who created the widget and its default size.

2 CODE: Copy and paste the code below...

<parameters> <separator /> <text name="GoogleID" defaultvalue="UA-54345836-1" label="Google Analytics UA Code" tooltip="Enter your google analytics UA coder here" multiline="false" /> <separator /> <info label=">> TUTORIALS | ADDONS | TEMPLATES | 123MUSE.COM" linkurl="http://www.123muse.com/muse-users.html" /> </parameters>

Next we need to add widget parameters. Parameters control the options that we see in the options panel when the widget is on the page. In this widget, we are just using the text parameter to allow us to enter the Google Analytics ID. The other parameters here help us to style up the widget and add a link to our website.

3 CODE: Copy and paste the code below...

<headhtml> <![CDATA[ <!-- Google Analytics --> <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', '{param_GoogleID}', 'auto'); ga('send', 'pageview'); </script> ]]> </headhtml>

Now we have our parameters we want to decide where the code will be injected into the page. For this widget we will be adding code to the section of the page so we copy the code google gives us into this "Content Tag". Notice how the code sits in between the

"<![CDATA[" and "]]>" this makes sure that Muse reads the code as HTML and not just text.

On the line beginning "ga ('create') you can see the code {param_GoogleID} this code is telling the widget to place the data entered into the parameter name "GoogleID" in step two in this location. By entering a unique Google ID into the parameter in the options panel, the widget updates the Google script. Imagine how you can use these parameters for other widgets.

4 CODE: Copy and paste the code below...

<bodybeginhtml> <![CDATA[ ]]> </bodybeginhtml>

This content tag places the code text into Muse page just after the Page content begins and before and Muse code. Useful for header features.

5 CODE: Copy and paste the code below...

<pageitemhtml> <![CDATA[ ]]> </pageitemhtml>

This content tag places code text into the visible page area and is the most common content tag used. Tho not needed for this widget, we have added the code for reference.

6 CODE: Copy and paste the code below...

<bodyendhtml> <![CDATA[ ]]> </bodyendhtml>

These content tag places code at the very base of the code area and after the Muse javascript. Useful for javascript that needs to run after the page, has loaded or for scripts that need jQuery to be loaded.

6 CODE: Copy and paste the code below...

<bodyendhtml> <![CDATA[ ]]> </bodyendhtml>

These content tag places code at the very base of the code area and after the Muse javascript. Useful for javascript that needs to run after the page, has loaded or for scripts that need jQuery to be loaded.

7 CODE: Copy and paste the code below...

<pageitemposterhtml> <![CDATA[ ]]> </pageitemposterhtml>

This feature is very useful when you have a widget that does not render correctly onto the design page. HTML placed here allows you to render an approximation of what the widget. Also, useful if you wish to make UI(User Interface) component (as seen in some of our widgets such as the Social Meta widget).

8 CODE: Copy and paste the code below...

</htmlwidget>

DON'T FORGET!!! To close the widget code with this to make sure it runs in Muse.

Conclusion

This example of a very simple widget is intended to whet your whistle. Take a look at the full MUCOW documentation to get to grips with the scope of MUCOW widget capabilities.

To get an idea of what can be achieved with this simple, yet powerful code take a peek at the vast array of widget from vendors such as Muse Themes or our very own downloads.

Article Author: Chris Kellett

Chris is one of the worlds leading experts in Adobe Muse and skilled in all aspects of HTML, CSS and Javascript a graphic designer, animator and film producer.

A freelance web developer for 19 years with 150+ muse templates and over 100 muse widgets (and counting) for other Muse template providers under his belt.

Skills Highlight:

Adobe Muse

Coding & Development

Graphic Design & UI

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 123muse.com 2015 - All rights reserved