Customize Your Email For Media Widget : Topspin Artist Support

Find answers/Build Your Fan Base - Promote Tab/Email-for-Media (E4M) Widgets

Customize Your Email For Media Widget

David Widaman
posted this on August 22, 2011 05:07 pm

Chances are, you’re pretty familiar with Topspin's Email for Media widget. What you might not know about the E4M, however, is that the widget actually possesses some very cool hidden talents. For example, you can turn your widget into an E4M/streaming player hybrid, specify a custom #hashtag to be added to Twitter shares, and even make your E4M background transparent for better integration into your website.

These features can be unlocked fairly easily by modifying your widget’s “Flash Variables” (or FlashVars for short). Don’t worry, you don’t need to be a trained web developer to perform these E4M tricks – all you need is an E4M embed code and a little attention to detail. First, locate the <param name=”flashvars” section of your widget embed code (near the end), where you’ll see basic Flash Variables like “highlightColor” already in use:

The above code is basically saying, “Here are my widget’s variable attributes: the highlight color should be hex color 526d5f and the theme should be white.” & is inserted between each complete variable. Take a moment and test this by changing your widget’s highlightColor to a different hex color like FF0000:

Once you refresh your page, the widget’s highlight color will be red. Not so bad, right? Now, let’s move on to some fun stuff…

Add a custom #hashtag to your Twitter shares

To set a specific hashtag that’ll be automatically appended to Twitter shares of your E4M, just paste twthash=#yourhashtag into the flashvars section of your embed code:

Now, when I share this E4M to Twitter, “#yourhashtag” automatically appears in my tweet:

Add streaming functionality to your Email for Media widget

There are two ways to enable streaming functionality for your E4M. The first way will add a simple play button to your widget, which is ideal for E4Ms containing a single track or video. To do this, just insert playMedia=true into your flashvars. Here's an example:

The second type of streaming modification will add a play button and full player controls (including expandable playlist) to your widget. To enable this more elaborate streaming functionality, just insert viewtype=player into your flashvars:

Make your E4M background transparent

This one’s a bit different in that it requires two small additions instead of one. In your embed code, you should see a list of your widget’s parameters one after another. Paste in one new parameter: <param value="transparent" name="wmode"> like so:

Then, in the “flashvars” section of your embed code, add bgalpha=0 like so:

Once these two changes are made, your embedded E4M will display with a transparent background!

Customize the text sent in the confirmation email sent to fans

Check out what you can customize, and where it appears on emails here.

HTML Email for Media

If you're an advanced web developer looking to take your Email for Media customization to a new level, check out this HTML E4M tutorial contributed by our Ecosystem partners Eyes and Ears Entertainment.

Available Email for Media flashVars

Topspin's Email for Media widget is controlled through a combination of XML information stored on Topspin’s servers (the XML contains references to media content and system-level information) and dynamic variables passed in at load time called ‘flashVars’ (flashVars can override specific UI properties).

Parameter	Default Value	Description
halign	center	Alignment of the main elements in the widget (clickable button and call to action)
hpadding	8	Horizontal padding used throughout the widget
embedalign	center	The horizontal positioning of the “embed” icon
maxPhotos	50	The maximum number of pictures the Flickr engine will retrieve
displayInitialScreen	true	Whether the widget displays a call to action
langCode	en	two letter language code for internationalization
bgImage	null	location for static image to be placed as background wallpaper for widget (n.b. this image will not resize)
linkHasOutline	true	status of outline around main button
theme	black	general theme for the colors of the UI. The theme can be overridden by passing the following flashvars for the colors. Can be "black" or "white".
highlightColor	0x17CAFB	Most commonly used flashvar, since it will change the highlight color of all the action items in the player.
hideinfo	false	Optionally hide email opt-in icon which appears in the bottom right hand corner of the widget.
linkColor	0×17CAFB	Main highlight color for the widget
baseColor	0×000000	Background color for the widget
linkOverColor	0×000000	Color used to contrast with the linkColor (used mostly when an object colored with the linkColor is moused over)
fontColor	0xFFFFFF	Color of the font
errColor	0xFF0033	Color the font in the error message
twthash	null	set up a special twitter hashtag when tweeting from the widget. eg. twthash=#contest
imageVAlign	center	Vertical alignment of the image inside the widget. Possible values: top, center, bottom. Use imageVAlign=top in a taller widget so that your image does not get covered by the email input controls
crossfaderate	5	Slide show crossfaderate in seconds. Defaults to 5 second intervals
playMedia	false	Set to true to enable a Play button to show up and play the media include for the download. Note that this will only play a single track or video and should be taller that 100px for the button to render properly
smoothing	false	For pixelated images, set smoothing=true which will apply bitmap smoothing on any of the the images displayed. Note: Bitmap smoothing may make some images blurry so please use wisely

Click here for a Hex Color Reference

Code Examples

Standard

http://pastie.org/2414162

Modifying the flashVars

http://pastie.org/2414163

Overall Widget Concerns

*All widgets are optimized for Flash Player 9.0.115, which is installed on over 98% of computers .

Transparent Background on E4M Widget

To make the E4M widget transparent allowing the web page background to bleed through like:http://basecampmusic.com/ (external link)

Two things must be added:

1. You must add the following to your embed code.

<param value="transparent" name="wmode">

Disclaimer! By setting the wmode to transparent, it has been a known Adobe Flash Bug in FireFox (https://bugs.adobe.com/jira/browse/SDK-12420) that international keyboards may not properly be able to enter the “@” symbol via the keyboard. The international user will have to copy and paste an “@” character into the text input field.

2. Add an additional flashvar:

bgalpha=0

Adding Streaming-Player Functionality to an E4M

You can easily add Streaming Player functionality to any E4M, simply by adding a line of code to the embed-code. When embedding the E4M, find the part of the code that reads:

<param name="flashvars" value="

After the quotation mark, insert the following snippet:

viewtype=player&amp;

See a screenshot of an E4M with this feature included:

The “play” button in the center streams all the tracks contained in the E4M. Hovering over the widget displays the bar on top, which shows the song title and progress bar, sharing options, and buttons that let the viewer browse the full list of songs, see info on the E4M, view the widget in Fullscreen, and mute the volume. The “Download Now” still button functions normally.

If you've created a custom Email for Media widget and are experiencing problems, try consulting our E4M troubleshooting article.