This guide outlines how to add monetize content with the Mash Accordion on your website. You can use it to earn for your written content, such as articles, blog posts and how-to guides. You can also include videos, images and more.

🗺️ 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.

Example of an un-styled Accordion.

💸 Before getting started

📌

Prerequisites: 1. To accept payments for your content you’ll need to have the Mash Wallet on the same page. To learn more and get started, please see our guide

Overview: Connecting Mash

. 2. Additionally, you’ll require some pricing setup – so your users will be able to contribute. You can learn more in this guide

Setting up Pricing

. You can always change your pricing later.

💡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>

🔥

If this is getting a little bit too technical for you, please and we can help out directly. Just let us know what you want. We’re in the process of making things as easy as possible.

🧑‍🎨 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 Accordion key. (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

💡

To see a full overview of the Accordion settings available, see our documentation here.

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 CSS font 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 to none.
--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 to 1rem.
--button-border-radius – The border-radius of the Accordion button. Defaults to 10px.

🥳

Nice! Now you can get paid for your awesome written content, right on your own website. To learn more about what you can do with the Mash platform, check out the resources below.

See All Guides

Mash Guides

Contact Us

Partner

Become an early partner and get extra hands-on support.

Stay up to date

The Mash Twitter account
Youtube Channel

Content Accordion: All Sites