Customize the display of your E4M

Check out some of our custom widgets, and learn how to make your own here: http://www.topspinmedia.com/e4m/

Flash variables will toggle different customizations

Each widget created in Topspin will have its own unique embed code. You can alter the embed to make your E4M background transparent, specify a custom #hashtag for Twitter shares, or enable streaming capability when giving out an audio track.

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.” &amp; 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

e4m_custom_wire.jpg

Code Examples

Standard Embed Code

<div>
<object type="application/x-shockwave-flash" height="250" width="300" id="TSWidget19" data="https://app.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf" bgColor="#000000">
<param value="always" name="allowScriptAccess" />
<param name="allowfullscreen" value="true" />
<param name="quality" value="high" />
<param name="movie" value="https:// app.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf" />
<param name="flashvars" value="widget_id=https://app.topspin.net/api/v1/artist/1/email_for_media/19&;amp;theme=black&amp;width=300&amp;height=250" />
</object>
</div>

e4m_standard.jpg

Modifying the flashVars

<div>
<object type="application/x-shockwave-flash" height="80" width="300" id="TSWidget15" data="https://app.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf" bgColor="#000000">
<param value="always" name="allowScriptAccess" />
<param name="allowfullscreen" value="true" />
<param name="quality" value="high" />
<param name="movie" value="https://app.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf" />
<param name="flashvars" value="widget_id=https://app.topspin,net/api/v1/artist/1/email_for_media/15&amp;theme=black&amp;width=300&amp;height=80&amp;displayInitialScreen=false&amp;maxPhotos=10" />
</object>
</div>

e4m_modified.jpg

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/

basecamp.png

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

Live example code: 
<script src="http://cdn.topspin.net/javascripts/topspin_core.js?aId=4122&amp;timestamp=1326159434" type="text/javascript"></script>
<div class="topspin-widget topspin-widget-email-for-media"><object id="TSWidget122028" width="300" height="80" data="http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf?timestamp=1326159434" type="application/x-shockwave-flash"><param name="wmode" value="transparent" /><param name="allowScriptAccess" value="always" /><param name="allowfullscreen" value="true" /><param name="quality" value="high" /><param name="flashvars" value="widget_id=http://cdn.topspin.net/api/v1/artist/4122/email_for_media/122028?timestamp=1326159434&amp;theme=black&amp;highlightColor=0x00A1FF&amp;bgalpha=0" /><param name="src" value="http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf?timestamp=1326159434" /></object></div>

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.

Have more questions? Submit a request and our team will be able to help get you sorted.