🗺️ Overview
The Mash Accordion widget enables you to monetize content on your website. It shows preview of your site’s provided text, allowing visitors to make a payment if they’d like to read the full content. You can also include images, videos and more in the Accordion.
💸 Before getting started
💡How it works
The Accordion makes use of a custom HTML tag (or “web component”) that is installed on your website – <mash-accordion>...</mash-accordion>
. This custom tag can be styled how you’d like using various CSS properties & attributes.
⏯️ Enabling the Accordion Widget
To make the custom Accordion usable on pages of your site, you must include the following code snippet in your website’s header tag, anywhere between <head>...</head>
<script defer src="https://components.getmash.com/accordion/accordion.js"></script>
Once this snippet is included, you’ll be able to make use of the custom <mash-accordion>...</mash-accordion>
in the body of your page. See the next section on how to make use of the tag and configure the Accordion.
🔧 Configuring the Accordion Widget
Below is an example of using the Accordion widget to wrap some simple text. Any HTML content can be provided, and a preview of it will be shown to visitors. After they make a payment, the full content will be revealed.
1️⃣ To add the basic Accordion widget to your site. copy and paste this code snippet below.
2️⃣ Replace the resource
(required) with the Price Category Tag that you setup. You can find it in the pricing list page in the Earn with Mash App . This ensures that you are charging the right price, for the content within the Accordion.
<mash-accordion
resource="ADD YOUR PRICE CATEGORY TAG HERE – KEEP THE QUOTES"
key="my-special-content-123"
align-button="center"
button-text="Read The Full Thing!"
>
<p>
A purely peer-to-peer version of electronic cash would allow online payments to be sent directly from one party
to another without the burdens of going through a financial institution. Digital signatures provide part of the
solution, but the main benefits are lost if a trusted party is still required to prevent double-spending. We
propose a solution to the double-spending problem using a peer-to-peer network. The network timestamps
transactions by hashing them into an ongoing chain of hash-based proof-of-work, forming a record that cannot be
changed without redoing the proof-of-work.
</p>
</mash-accordion>
🧑🎨 Customizing the Accordion Widget
There are a number of attributes provided on the HTML tag configure the widget’s behaviour. These attributes include:
key
(optional) – A unique identifier that can be used for your content. A visitor will only have to pay once for a piece of content with the specified Accordionkey
. (Unless they clear their cookies or restart their browser’s session.)align-button
(optional) – Modifies where the payment button appears. Options include “left”, “center” and “right”. (By default, the button is shown in the center.)button-text
(optional) – What text should be shown within the button to prompt visitors to pay for the content. (If not specified, “Read more…” will be shown.)
Additionally, you may also provide the following attributes to further customize the widget’s behaviour:
top-button
(optional) – If provided on the tag with any value (for example,<mash-accordion top-button ...>
), the button will appear at the top of the widget.hide-preview
(optional) – If provided on the tag with any value (for example,<mash-accordion hide-preview ...>
), no preview of the content will be shown to visitors.
Setting up the Accordion using the attributes above will give you a basic version of the widget with default styling. To learn more about styling the widget to visually match your website, see the section below.
🎨 Styling the Accordion Widget
Mash’s web component widgets make use of custom CSS variables for custom styling. These variables can be set by adding a <style>
block inside of your <head>
to allow you to change the style of the Accordion. For example:
<head>
<!-- All other head content would also be included here -->
<style>
mash-accordion {
/* Widget specific CSS Properties */
--button-color: blue;
--button-background-color: green;
--button-padding: 30px;
--button-font
--button-hover-background-color
--button-text-transform
--button-max-width
--button-border-radius
}
</style>
</head>
Setting these CSS variables will change the look of the Accordion. The Accordion widget currently exposes the following CSS variables to allow its style to be customized:
--button-color
– The color of the Accordion’s button contents (i.e. the button text). Defaults to#6a6a6a
.--button-font
– The CSSfont
to apply to the button’s text. Defaults to a sans-serif font (700 1.125rem/1.625rem sans-serif
).--button-background-color
– The background color of the button. Defaults to#ebebeb
.--button-hover-background-color
– What the background color of the button should be when a user hovers over it. Defaults to#e0e0e0
.--button-text-transform
– Any text-transform that should be applied to the button’s text (for example, uppercase). Defaults tonone
.--button-max-width
– The max width of the Accordion button. Defaults to a fitting the button’s text content (fit-content
).--button-padding
– The padding to include around the button’s text. Defaults to1rem
.--button-border-radius
– The border-radius of the Accordion button. Defaults to10px
.
See All Guides
Contact Us
- Support@getmash.com
- Telegram group
- Discord Channel (just launched)
Partner
Stay up to date
- The Mash Twitter account
- Youtube Channel