Embeddable action widgets let you take the power of Muster's advocacy tools where you want, from your organization's homepage to a special purpose microsite. While designed with an intentionally simple appearance, in some cases the visuals are simply too different from that of the hosting page.
Recent updates to the widget, however, allow you to include your own CSS stylesheet, granting you power to override key styles and create an experience that is even more brand consistent.
Widget updates
There are two requirements to add your own stylesheet:
A web-accessible stylesheet that you can control and host
Knowledge of CSS
Once you have a publicly accessible URL for your CSS file, you can add this to the data-css attribute of the widget's <div> element. E.g.
<div
data-action-center-id="d70ab362-d6d1-457e-b924-ac86135fdc22"
data-domain="https://mstr.app"
data-width="1000"
data-height-full="true"
data-css="https://example.com/css/widget.css"
id="muster-widget-v2-action-center-d70ab362-d6d1-457e-b924-ac86135fdc22"
>
...
</div>
Styling notes
Two classes can be used as reference in order to provide some namespace control, especially for reused CSS.
muster-wrapper: for the parent element of the entire widgetmuster-input-wrapper: used to wrap each input element
You may need to use !important to enforce the application of some styles.
Style references
List widget: see the example CSS file. You can also view the source Sass (SCSS) file.
Basic demo action widget: CSS file and source Sass (SCSS)
If you have questions or suggestions about the implementation, please do not hesitate to share them with our team.
However we ask you to note that CSS and styling questions beyond setting up the file for your widget are beyond the scope of what our customer support team can assist with.