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:
Add a custom #hashtag to your Twitter shares
Add streaming functionality to your Email for Media widget
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
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
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).
|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
Modifying the flashVars
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/
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:
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:
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.