Embedding a list of action centers

The action center list widget allows you to embed a list of all of your live action centers, providing you with a way of showing your latest advocacy campaigns without any additional work on your part.

Whether you're using a website builder (Squarespace, Wix) or a CMS (WordPress), it's incredibly easy to either embed it yourself or copy the code and send it to your developer/web content manager to embed.

The embed code for your action centers can be found right on the main Advocacy page listing your campaigns. Clicking the "Widgets" button at the top of the page will open the appropriately named "Widgets" page, which includes the action center listing widget.

The widget embed code accepts several options, which can be updated in the "Options" of the embed helper or edited directly in the embedding HTML.

The options include controls over the widget size, style, and campaign filtering (you can select a single campaign and create an embedded list widget that shows only active action centers for that one campaign).

The widget embed code accepts an optional URL to a custom CSS file. This allows you to override most styles and adapt the widget to more closely fit the theme of your own site. Simply set the data-css attribute in the <div> element of the embed code. E.g.

The best way to get started with this is to set up the widget pointing to a CSS file you can easily and quickly edit for the benefit of speedy iteration. Major layout elements have namespaced classes specifically for the benefit of third-party styling, e.g.

Note that you may need to make liberal use of the !important directive to override the underlying styles.

The updated list widget can be used by replacing the JavaScript URL in the embed code with https://widgets.muster.com/v2/list-action-centers-20241105.js

This widget has different default styling but also includes an image from the action center, if provided, and a tagline pulled from a subheadline.