Every action center you create in Muster comes with a flexible, mobile-friendly form that you can take and embed on your website. This functionality gives you an extra layer of control when designing an advocacy-based landing page.
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.
Important things to know:
There are two different widgets you can use. (a fixed-width and a flex-sizing)
Note: If you have message mapping turned on in your account. You will only see the flex-sizing widget, as it is the only one that supports message mapping.
The fixed-width widget (Aesthete) only supports email.
The flex-sizing widget (Minima) supports email and patch-through call communication channels.
Both widgets support message rotation, and it will operate the same as it does on the Muster-hosted version of the action center.
Where do I find the code to embed?
First, you need to navigate to the action center you wish to embed.
Once you're there, in the menu options above the analytics, you'll select Widgets.
In the Widget section of the menu, you'll see an image of what the action center embeds look like. In this example, our account has message mapping on, so we only see one widget option, Minima. You'll see a green Copy Code button along with some Embedding Instructions click that button and 💥. Just like that, you've grabbed your widget code.
Your final step is to take that code snippet to your website builder or send it to your developer to embed for you and create your own advocacy action center.
For an interactive preview of what the widget looks like when embedded visit the link below:
Customizing the widget styling
The widget embed code will accept 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.
data-css="https://example.com/my-style.css"
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. muster-wrapper and muster-input-wrapper. Note that you may need to make liberal use of the !important directive to override the underlying styles.