Standard Styles include our logo and aren't easily overridden with your custom CSS. Widgets come in a few flavors, depending on the options you are interested in. You can edit these options to get new code to embed by clicking the "Options" button underneath the widget code section. Widgets are available in three styles:
- Layout Styles Only removes our banding, attempts to blend in with your website, and are easily overridden with your custom CSS.
- No Styles comes without any stylesheet at all, allowing you to completely customize the CSS for the widget.
Widgets also have two different layouts, each available in all three styles:
- Standard Layout is a bare-bones, default layout, including an action title, the form, and little else.
- Full Layout replicates our published page and includes the banner image, description, and the goal slider to count people who take action in addition to the title and form.
When integrating widgets into your website, we recommend starting with the layout styles only version and tweaking from there. Test your widgets and try each feature to ensure they work and look how you'd like them to look!
You'll want to ensure you are handling all possible widget states when you are setting up your custom CSS. Situations to test include:
- Non-recognized users (log out of your Action Network account and load your widget to see this version)
- Recognized users (log in to your Action Network account and load your widget to see this version)
- Partially or fully saved credit card information on fundraising and ticketed event widgets
- International users (click the "Not in the US?" link when viewing a non-recognized widget to see the dropdown for country)
- Validation errors (try filling out a form without entering required information)
- Thank you pages (fill out a form to see the thank you widget, unless you are using a custom redirect)
- Event and ticketed event thank you pages (the thank you widget for events has more features, including a map and discussion board)
- Event campaign blank search, events not found, and events found states
- Letter campaign targets not found and targets found (with potential extra fields to fill out) states
Note: @import rules or stylesheets served from domains different from the one where your widget is embedded cannot be imported into the fundraising or ticketed event widget 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.
Use Chrome's web inspector, Firebug in Firefox, Internet Explorer's developer tools, or similar tools to see the HTML code widgets generate that you can use as hooks for your custom CSS. Generally you should be able to create CSS for widgets once and use it on every widget going forward.
A note on upcoming widget versions:
As a follow-on to our updated site design that rolled out a few months ago, we've updated our widgets to a new version that takes into account the new design language and features. We've tried to keep things as similar as possible to the current version to make upgrading easy, but we do want to take advantage of new functionality such as placeholders in inputs that turn into labels (so you can tell that input box is supposed to be your first name even if you've typed something in it).
We're not rolling out these new widget versions yet -- the current ones are still the default -- but we will some time in the future (with plenty of warning). For now, you can preview the new design and test that it works with your page wrappers, embeds on your website and the like by appending ?version=v3 to URLs. If you want to get the new widget embed code for an action to try embedding in your website, add ?version=v3 to the manage page of the action and the embed code displayed will be the new version. If you want to see how an action using a page wrapper will look using the new widget version, add ?version=v3 to the end of the URL when viewing the action to see the new version. If you want to preview how your page wrapper will look with the new version, add ?version=v3 when previewing your page wrapper.
Please take some time to ensure your page wrappers and embeds look good with the new version. When we roll it out as the default, any new embed code you copy will use the new version (existing embeds on the old version will not be changed and will continue to work, though they will not receive any new feature upgrades), and all pages using page wrappers will use the new version. So please please test it. We'll give you ample warning before the switch, but put it on your to do list now.