Flex Alert Dynamic Banners

California’s Flex Alert Campaign is an educational and emergency alert notification campaign that informs Californians when conserving electricity is critical. Through a simple coded snippet, the Flex Alert banner and link have been updated from the old Flex Your Power dynamic banners for the CA.gov websites. By using the code snippet below, your website can help inform Californians on how to prevent blackouts during hot weather and electrical emergencies.

Typically, when no Flex Alert has been called, the banners display an educational conservation message (green version), but when California is facing an electrical emergency, the banners will automatically switch out to an active Flex Alert message (orange version).

Note: If your department does not plan to implement the dynamic script, you may sign up to receive Flex Alert notifications at http://www.flexalert.org. The email alerts will include start and end dates/times of each alert so you can make changes to your website manually.

Flex Alert Is On

flex alert

Flex Alert Is Off

flex alert

Adding a Flex Alert Dynamic Banner

Select a banner/carousel size from the options below. There are two general types:

  • Small ICONs in five sizes for Education and Activation. Note: that the Activation icons have no tips, since these are small.
  • Larger TIPS (PDF) in three sizes for Education and Activation with the three key tips.

Copy the javascript code snippet below associated with the size and design you prefer andpaste it into your HTML.

If you use text along with the banner please use the following approved website description copy: “Energy conservation tips and Flex Alert updates.”

Warning!

  • Do not copy and host the image file on your server. Use the preferred banner size code snippet, which allows the Flex Alert Campaign to dynamically swap the Education banner (green) for an Active Flex Alert banner (orange), whenever state officials call a Flex Alert.
  • Do not wrap font tags or styles that affect the font size around this new image.
  • The Flex Alert Campaign servers will host the dynamic banners. Once the image is displaying properly on your website, the webmaster does not need to update the banner during official Flex Alerts. This will happen dynamically.

Code Snippets by Banner size – Paste to HTML

Simply copy and paste into your HTML the javascript code snippet for the banner size you prefer and that’s it. The banner images will swap dynamically and automatically if a Flex Alert is called. All banners link to www.flexalert.org

  • Icon Banner 234 W x 60 H: <script type=”text/javascript”src=”http://s3.amazonaws.com/flexyourpower/banners/234x60.js”></script>
  • Icon Banner 199 W x 50 H: <script type=”text/javascript”src=”http://s3.amazonaws.com/flexyourpower/banners/199x50.js”></script>
  • Icon Banner 179 W x 50 H: <script type=”text/javascript”src=”http://s3.amazonaws.com/flexyourpower/banners/179x50.js”></script>
  • Icon Banner 115 W x 50 H: <script type=”text/javascript”src=”http://s3.amazonaws.com/flexyourpower/banners/115x50.js”></script>
  • Icon Carousel Banner 93 W x 69 H: <script type=”text/javascript”src=”http://s3.amazonaws.com/flexyourpower/banners/93x69.js”></script>

Note: Please be sure to use the non-special character straight quotes (not curly quotes).

Educational – Green

Do not copy these images. Simply paste the preferred size code snippet from above and the images load dynamically from the Flex Alert Amazon servers.

  • 234x60
    Save money, energy and the environment - FlexYourPower.org
  • 199x50
    Save money, energy and the environment - FlexYourPower.org
  • 179x50
    Save money, energy and the environment - FlexYourPower.org
  • 115x50
    Save money, energy and the environment - FlexYourPower.org

For placement within carousel:

  • 93x69
    Save money, energy and the environment - FlexYourPower.org

Activational – Red

Do not copy these images. Simply paste the preferred size code snippet from above and the images load dynamically from the Flex Alert Amazon servers.

  • 234x60
    Save money, energy and the environment - FlexYourPower.org
  • 199x50
    Save money, energy and the environment - FlexYourPower.org
  • 179x50
    Save money, energy and the environment - FlexYourPower.org
  • 115x50
    Save money, energy and the environment - FlexYourPower.org

For placement within carousel:

  • 93x69
    Save money, energy and the environment - FlexYourPower.org

Additional banners are available at:
http://www.flexalert.org/press

Resources

0 Comments