Overview
One-click
No inserting credit cards every time. Receive donations at the speed of a single click.
Learn what users love
Figure out what your users are interacting with the most, and which pages they donate on.
Adding Boosts to Your Site
There are three general ways to add Boosts to your site:
⓶ - Embed code snippets.
Option 1 - Add Boosts from the Mash Dashboard
⓵ - Open your Mash Dashboard, and select the “Boosts” tab in the left nav bar. If you have not added a Boost before, click the “Add Boosts” button to begin.
⓶ - Choose between Floating or Inline Boosts:
Floating - (No-Code): A visible button that hovers atop your site's content, offering various location, design, and size choices.
Inline - (Manually add the button): A button that seamlessly blends into your site's layout, placed in a specific location.
⓷ - Customize your Boost Button's appearance for both desktop and mobile on your website.
Explore diverse design options, placements, colors, animations, sizes, and more. Tailor the button to match your unique style and enhance user engagement!
⓸ - Determine the pages where you want your Boost button to appear:
- "All pages": The floating Boost button will be visible on every page of your website.
- "All pages except the ones defined": Add the pages where you do not want the Boost button to appear.
- "Specific Pages only": Enter specific pages where you want the Boost button to be displayed.
⓹ - Once you've completed your page selections and design, the final step is to click "Add Boosts"!
If you've already connected Mash to your website, clicking confirm will seamlessly update your site and add the floating Boost button to the pages you've chosen. Elevate user engagement with ease!
⓺ - That’s all! Your floating Boost Button is now live on your site! 🎉
Head over to your website to see it in action. If it doesn't appear immediately, just refresh the page, and there it is!
For any future edits, customizations, or changes, return to your dashboard and click the "Edit Boost" button. Enjoy the power of Mash and elevate your site's experience!
Option 2 - Add Boosts with Code Snippets
<mash-boost-button icon="heart" layout-mode="float" display-mode="with-text" float-location="bottom-center" color-variant="colorized" size="md" mobile-display-mode="with-text" mobile-float-location="top-right" mobile-size="sm"></mash-boost-button>
⓵ - Copy the mash-boost-button
code snippet
Later, you’ll be adding it to the section of your site that you want it to display.
(This code snippet is just an example)
⓶ - Customize the design and settings of your boost button and create a custom code-snippet in our UI Component Builder and before adding it to your site.
⓷ - Paste the code into your site and publish it.
You’ll have to use an “embed code” block or similar function on the page or location you want to add boosts. You can also add it directly in your code to the <body></body>
section of your site (required for in-line boosts, and also works for floating boosts). These are available on most platforms which have detailed instructions. Here are a few:
- Wordpress Code Block
- SquareSpace Code Block
- Ghost Add Custom HTML & Code Injection
- Wix does not work with custom embedded code at this time. Please use the Mash App for Wix or adjust settings directly in Mash for Floating Boosts.
⓸ - Save and publish your page and boosts will be live. That’s it! 🎉
Option 3 - Custom Code Attributes
Theme & icon to fit your vibe.
icon="fire"
icon="lightning" (default)
icon="heart"
The colour variant to ensure contrast.
variant="colorized" (default)
variant="light"
variant="dark"
Layout mode so that it is always available, or specific locations.
layout-mode="float (recommended)
layout-mode="in-line"
Float Location (only applies in float mode)
float-location="bottom-center" (recommended)
float-location="bottom-left"
float-location="bottom-right"
float-location="top-center"
float-location="top-left"
float-location="top-right"
Display Mode:Display the Boost as a simple icon button or with text.
display-mode="with-text"
display-mode="icon-only"
Button Size:
size="md"
size="sm"
Mobile Adjustments: Add these atttributes in the code-snippet and adjust them to your linking with the same variables as above.
mobile-display-mode="with-text"
mobile-float-location="top-right"
mobile-size="sm"