Monetization with Miro + Salable

Although the Miro Developer Platform doesn’t currently offer a native monetization solution, platforms like Salable offer capabilities to help you build your business on Miro.

This guide will show you how to integrate with Salable, so you can receive payments for your Miro apps.

Integrating your Miro app with Salable

While there are many third-party monetization platforms available, Salable allows you to manage licensing, payments, and more via their all-in-one platform. However, there are a few prerequisites you must complete to integrate it with Miro.

Salable integration prerequisites:

• You have a Salable account.
• You’ve created an API key in Salable.
• You’ve set up a payment integration in Salable, such as Stripe.

Next, you must configure a product and a plan in Salable. We recommend that you work in Salable’s Test Mode when you’re getting started.

Configure a Salable product and plan for the Miro example app

To run the Salable example app for Miro, you must log in to your Salable account and ensure that you have a product and plan configured. To do so, you can follow these steps once logged in to your Salable account.

1. From the Products tab in Salable, create a new product and select Paid product.

2. 

   Copy Product ID, which you’ll need later for the .env file in the example app.

3. 

   Next, navigate to the Plans tab and create a new plan “pro”.

4. 

   Select Create plan. Select the Paid plan option and enter any value.

5. 

   On the next two screens, skip assigning a feature or capability for now, and create the plan.

6. Once the plan is created, navigate to the Features tab.

7. Select + Create new feature and name it "Create". Select Boolean for the Value Type.

8. 

   Select Create Feature, followed by the Create Feature / Update Plans button to assign it to the Pro plan.

9. Lastly, go back to the Plans tab and copy the Plan ID, which you'll need for the .env file in the sample app.

   

With these prerequisites completed, you can start leveraging the power of Salable to create a paywall within your Miro app. Now, let’s explore the Salable + Miro monetization example app!

Adding a Salable paywall to your Miro app

To help illustrate how you can leverage Salable to add a license purchase requirement to your Miro apps, Salable has developed an example app that implements a basic Salable integration with Miro’s Web SDK. You can find the open source repo on their GitHub: Monetization with Salable.

About the example app

Salable’s example app covers the basic use case for a one-time license purchase to access features of the Miro app. In this example, users can access the app’s sticky note feature only once they’ve purchased a license.

After making a payment in Test Mode, the Add sticky! functionality is enabled.

Run the app

To get the example app up and running, follow these steps:

1. Read the README.md in the root folder of the project.
2. Handle the prerequisites in Salable.
3. Update the .env.example file in the example app with the credentials for both platforms, and rename it to .env.
4. Run npm install to update packages.
5. Run npm start to run the app.

📘

Got things to share?

Working on an app that incorporates monetization? We’d love to hear about it! Join Miro’s Discord channel to ask questions, share your app, or get feedback on your ideas.