Is your marketing team frustrated with having to wait for simple website updates? Is their team already using Monday.com, the team management tool? If so, we have a quick and easy solution to give non-technical people a structured and limited way to make updates to a webpage (without fearing they’ll mess up the site!) right from within Monday by using Reshuffle Open Source — it’s a win-win solution. Plus, by using the Monday interface that they’re already used to, marketers won’t have to deal with yet one more tool.
Let’s say Marketing wants to continually add more customer case stories to the Customer Story web page. It’s a repeatable process and one that always contains the same content components (title, copy, image). You can give Marketing the autonomy they need to update this page themselves while staying within the parameters you set for the site.
By creating a web page spreadsheet template in Monday.com that defines the components for the page, you can use Reshuffle’s connectors to integrate the spreadsheet to the website, and enable marketers to make updates in the spreadsheet that will automatically publish on the site. Marketers just need to fill in the component fields in the Monday spreadsheet and Reshuffle will publish it to the website!
Reshuffle’s open source integration framework makes it easy. In this article, learn how to build a spreadsheet-powered website using Monday that lets people make changes to the website without the web team having to worry.
How to Build It
Reshuffle makes it easy to build integrations that complete complex tasks, so you can deliver unique experiences and outcomes for the business and for customers.
Here’s how you’d build a spreadsheet powered website:
Reshuffle is an open source, lightweight, and event-driven framework that helps you integrate services — these integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called connectors. The first thing we need to do is to declare a Reshuffle App and a Monday connector:
const { Reshuffle } = require('reshuffle')
const { MondayConnector } = require('reshuffle-monday-connector')
const app = new Reshuffle()
const monday = new MondayConnector(app, {
Token: process.env.MONDAY_API_TOKEN
})
To get your Monday API token, log in to your Monday account and click on your Avatar in the bottom left. In the Admin panel, you'll find an API section, where you can create an API v2 token that you can plop into your local environment.
You can also specify your baseURL and your webhooks address in the connector - but the first will be understood from the API key (unless you have multiple sites), and the second defaults to /webooks/monday, which shouldn't conflict with any other addresses you're likely to have.
Next, we need to define the board and events we want to watch using the on() method, and our logic for what happens when we make a change. To find your boardId, go to your Monday board in your browser and copy it from the URL:
All of the Monday connector events Reshuffle supports can be found here. In this example, we'll watch for a CreateItem event, and then log the response:
monday.on({ boardId: 895666799, type: 'CreateItem' }, (event, app) => {
console.log('Monday response:', event)
})
Lastly, let's initiate the integration by starting the Reshuffle App:
app.start();
To run this code locally in a development environment, we put the above code (only six lines!) in an index.js file, and, after using npm to install the necessary packages, run it using node index.js. Then, we set up a Monday webhooks URL. To do this, go to the Monday settings (by clicking on your avatar in the bottom left, again), and clicking on "Integrations". Search for Webhooks. You'll want to set up a new webhook using your development URL. For this test, we used ngrok, by installing it and then running ngrok http 8000 in another terminal window, which is the same port as our Node instance above.
Take the URL that ngrok gives you, and add /webhooks/monday to it before adding it as the URL in the Webhook interface.
And that's all you need to do. Go back to your sheet and create an item. We created a new item, called "toucan", because they're beautiful birds and we wanted Monday to display cool birds (why not?). You'll get a result similar to this:
Monday response: {
userId: '17514907',
originalTriggerUuid: null,
boardId: '895666799',
groupId: 'topics',
itemId: '902429084',
pulseId: '902429084',
itemName: 'Toucan',
pulseName: 'Toucan',
columnId: undefined,
columnType: undefined,
columnTitle: undefined,
value: undefined,
previousValue: undefined,
changedAt: undefined,
isTopGroup: true,
type: 'CreateItem',
triggerTime: '2020-12-08T22:46:54.192Z',
subscriptionId: '29497386',
triggerUuid: 'a906a3fcd532060bcab0846b9e11e327'
}
Your frontend should have a CMS which can interpret this data. Depending on the frontend, setting up a url which can capture POST requests will look slightly different. On our end, we need to post the resulting data above into a POST request. Here, we use the got package:
monday.on({ boardId: 895666799, type: 'CreateItem' }, (event, app) => {
const { body } = await got.post('https://yourcms.org/newBoardItem', {
json: event,
responseType: 'json'
})
console.log(body.data)
})
And your front end should be able to capture this and display it however you like. In our really quite basic HTML frontend, we took the example above and rendered the JSON like this:
Obviously, you'll want to do more than throw the JSON into a list on a basic HTML site. But that's where the fun is - once you've got a server taking new data from Monday using Reshuffle, the possibilities are endless.
We hope you see how easy it is! You can do this quickly and really make updating your website easy for non-technical users.
Now, Make it Happen
As you work with your sales, marketing, and customer experience colleagues, we encourage you to build the integrations that drive better customer experiences and help differentiate your business in the marketplace. With teams using so many different tools, the more you can consolidate these tools into one common interface, and help automate workflows, the easier people can get work done.
Reshuffle is continually listening to what our customers need and desire. Don’t see a Connector to a service you’d like to integrate? Send a tweet to @ReshuffleHQ to let us know which Connector you’d like us to develop next.
Top comments (0)