Create Seller Dashboards with Minimal Code

This is a guest article by Albert Lundberg. Albert is the co-founder of Lemonado, a no-code tool for building dashboards.

Ever wish you could give each seller on your marketplace a personalized dashboard—without building everything from scratch? In this guide, I’ll show you how to embed a seller dashboard in the Sharetribe Web Template using Lemonado, so each seller has a live window into their own performance, listings, and transactions.

While this guide focuses on seller dashboards, this technique works for any user role in your marketplace. Here’s a quick video tutorial if you prefer a visual step-by-step.

What you'll need

• An instance of the Sharetribe Web Template running locally
• Lemonado account (free trial available)
• About 30 minutes of your time

The end result

By following this guide, you’ll have an embedded dashboard for every seller in your marketplace. And the best part? You can make changes to the dashboard without writing code—just drag and drop. Here’s what your sellers (or any user) can get out of it:

• Listing Management: Keep track of listings and their status.
• Transaction Monitoring: Watch sales and completed transactions in real time.
• Downloadable Transaction History: Export records for easy bookkeeping.
• Customizable Widgets: Show only the data that matters.
• Personalized Data: Each seller views only their own analytics, filtered by userId.

Implementation Steps

Step 1: Set Up a dashboard in Lemonado

• Sync your Sharetribe data to Lemonado.

• In the left hand menu under workspace, create a new page (dashboard) in Lemonado.
• Go to page options and then page input. Select users, userId and set required. This will act as a “page filter” and make sure each seller only sees their own data.

• Add and configure widgets to display data, like account listings and transactions.
• Set up each widget to filter data based on the incoming userId (page input), so sellers only see their own information.

• All done - data will now be filtered and displayed given a userID.

Step 2: Generate Embed Code

• Find and click the "share" button in the top right corner after setting up your dashboard.
• Create a new link and skip the authentication step.

• Choose the "embed" option to get the <iframe> code.

• This embedded code includes a URL to the seller dashboard, which needs to be populated with the userId.

Step 3: Embed iFrame in the Web Template

For more details on this step, please watch the video tutorial for a even more detailed explanation.

• Create a new page in the Sharetribe web template (e.g., statistics).
• Paste the <iframe> code into the component for the new page:

<iframe
    src={`https://your-lemonado-dashboard-url?users_userId=${userId}`}
    title="Seller Dashboard"
    width="800"
    height="600"
  />

Step 4: Fetch and Pass userId

• Use Redux to map the current user's state to your component.
• Extract the userId from the Redux store.
• Modify the iFrame URL to include the userId as a query parameter:

?users_userId=${userId}

Implementing Query Parameter Signing

When it comes to embedding your dashboards, there are two ways to handle query parameters: without signing (the easy route) or with signing (more work, but safer).

1. Without Signing (Simpler, Less Secure)
   Query parameters are visible and can be modified by anyone with access. This can expose sensitive data or allow unauthorized access.
2. With Signing (More Code, More Secure)
   Query parameters are signed, preventing unauthorized modifications and protecting data. Yes, it takes some extra coding steps, but in return, unauthorized users won’t be able to access other users’ data. The images below illustrate how to toggle this option.

Add the necessary code:

const crypto = require('crypto');

const generateToken = (params, secret) => {
  const dataString = Object.entries(params).sort().map(([k, v]) => `${k}=${v}`).join('&');
  return crypto.createHmac('sha256', secret).update(dataString).digest('hex');
};

// Example usage
const params = {
  'users_userid': "example_user_id"
};

const secret = 'your_secret_key_here'; // Replace with your actual secret key

const token = generateToken(params, secret);
const queryParams = new URLSearchParams(params).toString();

console.log("URL:", `https://app.lemonado.io/shared/?${queryParams}&token=${token}`);

This code generates a token to validate the parameters. The token ensures parameters are not modified without invalidating the token.

Conclusion

Setting up a customizable seller dashboard with Lemonado is straightforward and requires minimal coding. By giving sellers a clear, real-time view of their marketplace activities, you improve their overall experience and encourage ongoing engagement with your platform.