Every action is expressed as both a page you can link to and as a widget you can embed on any other website, much like you can embed a YouTube video. Widgets work on any website where you can embed HTML and javascript code. Therefore, you can use widgets to embed your action on a website you've created instead of making a custom wrapper in our system.
Widgets have the same functionality as regular action pages -- they ask activists to fill out the same form fields (first name, last name, email, and ZIP/postal code, plus any custom form inputs you've added), they recognize users in the same way, they contain the language you entered to set up the page, they take users to either an in-widget thank you page or a thank you page you've chosen after taking action, and all activists who sign will show up on your email list and in your reports and statistics in the same way.
In this way, you can easily brand your actions. Instead of fighting with our wrapper system to get your pages to have your brand, colors, and design, just grab a widget of your action and embed it in your website or popular CMS systems like Wordpress or Tumblr. You can also give widgets to your allies and have your action live on many websites at the same time, meaning you don't have to negotiate with your allies about who's exact website the action is going on, and you can gain an exponentially greater reach for your actions. When using page wrappers, you can also use custom domains, so your link will appear like your-organization.com/petitions/stop-the-bad-thing. This is great for giving your action more branding and helpful for folks who don't want to embed actions on their website. More on custom domains here.
Embedding Actions
Embed code is available on your action's manage page as well as the thank you page after activists take action. Just copy and paste that code to embed the action's widget on any website.
Click the "Options" button at the bottom of the code window for advanced options. You can choose a width for your widget, you can choose to embed with our default styles, layout-only styles that attempt to inherit color and font choices from the website you embed on but keep our layout, and no styles at all, allowing your designers to customize the look and feel of each widget fully, and you can choose to embed our standard widget or a full layout widget, which has all of your text, banner images, and the like and replicates our pages closely.
Most widgets directly inject their HTML into your page, so designers can style them with native CSS code. Fundraising and ticketed event widgets, due to security restrictions, use iframes, but will attempt to pull CSS styles from the parent page. To style fundraising or ticketed event widgets, make sure your CSS is coming from a stylesheet linked from the same domain as the parent page or is inline on the page.
Note: @import rules or stylesheets served from domains different from the one where your widget is embedded cannot be imported into the iframe widgets due to security restrictions. For our page wrappers, this means you should use <style> tags instead of linked stylesheets, unless you've uploaded the stylesheet to our files system to get a link on our domain.
Additionally, if you are embedding fundraising or ticketed event pages on your own website you should use pages that are secured by SSL/TLS (ie: the URL is https, not http). While it does not make a difference in terms of actual security (the embeds are served from secure iframes), browsers will not show the page as secure and will sometimes warn users when they attempt to fill in their credit card information, creating confusion and suspicion for your donors.
If you are an Action Network partner, you can also create your own wrapper in our system. Refer to the page wrappers section for information on how to create your wrapper. You can set which wrapper your action page uses by setting the page wrapper drop down menu and clicking "Save Page Wrapper" to save your choice.
Note: Previews are not available if you use a custom page wrapper.
Click here to contact us about becoming an Action Network partner and getting access to custom page wrappers.
Advanced Embedding
Click here for some tips on styling your widgets, and here for tips on customizing them with javascript.
Generally, you can only embed one widget of one action per page. That is, you can embed Petition A and Petition B on the same page, but not two copies of Petition A.
If you do need to embed multiple copies of a widget on one page, you have to pass your own unique IDs to the widget, so we can differentiate between the two copies. To do so, replace the ID we put on the <div> tag in our widget code with your own unique ID, and pass that same ID to the widget's javascript file as a can_widget_id parameter.
For example, here is our default widget code, with the ID we automatically generate highlighted in italics:
<link href='https://actionnetwork.org/css/style-embed.css' rel='stylesheet' type='text/css' />
<script src='https://actionnetwork.org/widgets/v2/form/testing?format=js&source=widget'></script>
<div id='can-form-area-testing' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>To use your own unique ID, you'd replace that ID and pass it into the javascript file above, like so:
<link href='https://actionnetwork.org/css/style-embed.css' rel='stylesheet' type='text/css' />
<script src='https://actionnetwork.org/widgets/v2/form/testing-123-2?format=js&source=widget&can_widget_id=my_id'></script>
<div id='my_id' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>In this way, you can embed multiple copies of the same widget on a page, as long as each copy has its own unique ID.
Note: Do not start your IDs with numbers.