Forem: Amir Shevat

How to Build a Spreadsheet-Powered Website Using Monday.com and Reshuffle Open Source

Amir Shevat — Fri, 22 Jan 2021 17:35:00 +0000

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.

How to Build an Email Workflow Integration for Your Website with Reshuffle Open Source

Amir Shevat — Thu, 29 Oct 2020 15:03:03 +0000

Email forms on websites are great for gathering customer data and enabling customers to opt-in for registrations, marketing communication, waitlists, product demos, and more. If you don’t want to use a vendor to generate the email workflow, you can build a series of free integrations with Reshuffle Open Source to automate the process and improve customer experience. You’ll give your customers and prospects a fast, automated process that delivers what they expect of you.

Let’s say you want people to register for a product demo. You build an email form on a webpage, then you want people who register to automatically receive a response with access info to the demo, or perhaps a Calendly invite - if you’re doing live demos.

You can use Reshuffle Open Source connectors to integrate your email form, populate the customer data from the email into a spreadsheet, and automatically send an email response providing the customer with the demo information you want them to have.

Reshuffle’s open-source integration framework makes this an easy process. In this article, you’ll learn how you can easily build a series of connections that link different services to create the experience you want your customers to have.

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 customers. 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.

Here’s how you’d build the email workflow example above:

To get started, let's look at the workflow we want to create-

The first thing we need to do is to declare a Reshuffle App and configure the Connectors we will be using:

HTTP Connector that will be triggered when the user submits their email on the web.
Google Sheets Connector to add the entry to our spreadsheet, and trigger sending the email.
SMTP Connector to send the email with the Calendly setup to the user.

Here is the code:

const app = new Reshuffle()

const httpConnector = new HttpConnector(app)

const googleSheetsConnector = new GoogleSheetsConnector(app, {
  credentials: {
    client_email: process.env.CLIENT_EMAIL,
    private_key: process.env.PRIVATE_KEY.replace(/\\n/g, "\n")
  },
  sheetsId: process.env.SHEET_ID
})

const smtpConnector = new SMTPConnector(app, {
   fromEmail: process.env.EMAIL_USER,
   fromName: 'Reshuffle Examples',
   host: process.env.EMAIL_SERVER,
   port: 587, //<smtp port number - usually 587>
   username: process.env.EMAIL_USER,
   password: process.env.EMAIL_PASS,
})

Now that we have all the connectors configured, let’s define what happens when the HTTP event comes from the form on the web page . We need to define the event we want to listen to using the HTTP connector on() method. In this case, we want to listen to an incoming POST HTTP event on the apply-for-demo path. We will then write handler code to extract the email and name from the POST request and use the Google Sheet connector to add these to our spreadsheet:

httpConnector.on({ method: 'POST', path: '/apply-for-demo' }, (event, app) => {
   const name = event.req.body.name
   const email = event.req.body.email
   const sheetId = 0
   const values = [name, email]
   await googleSheetsConnector.addRow(sheetId, values)
}

Here is how the spreadsheet looks after the first entry is entered:

The next step in the workflow is to send an email to the user that was added to the spreadsheet. For that we will use the on() method on the Google Sheets connector to add a handler for when a row is added to that spreadsheet. We will use the SMTP connector to send the email to the user:

googleSheetsConnector.on({}, (event, app) => {
  const rows = await myGoogleSheetsConnector.getRows(sheetTitle) 
  rows.forEach(async row => {
    if (!row.emailSent) {
      Row.emailSent = 'true'
      row.save()
      smtpConnector.send({
        to: row.email,
        subject: `Book your demo!`,
        text: `Thank you for your email! Book your demo here...`
      })

    }
  })

Lastly, let's initiate the integration by starting the Reshuffle App:

app.start();

That’s it! With minimal code and an intuitive user interface for marketing staff (who love spreadsheets!), we have created a full workflow to get people signing up for your demo in no time.

Note that in real life, we would probably have some production safety precautions such as a “confirm_send” column so the marketing team can confirm that the email should be sent to the user.

Now, Start Building

As you work with your sales, marketing, and customer experience colleagues, we encourage you to get creative in making email workflow integrations that drive better customer experiences and help differentiate your business in the marketplace.

How to Build a SMS-Powered Survey System with Reshuffle Open Source

Amir Shevat — Wed, 21 Oct 2020 18:40:23 +0000

Communicating with customers via SMS text messages is fast becoming part of a multi-channel customer experience — where people get to choose which channel they prefer to use when connecting with brands. SMS offers speed, accessibility, and the option to communicate privately without going on public social media channels.

Building a simple SMS integration, for example, an auto-responder for order confirmation, is easy. But what if you want to connect multiple services to generate a more interactive flow and do more than just send an outbound SMS to a customer? The solution can become complex, and fast.

We built Reshuffle’s open source integration framework to simplify these types of integrations. In this article, we show you how easily you can build a series of connections that link different services to create a unique solution. We encourage you to imagine what’s possible, and get creative! Here’s an example of what you can do.

Watching a Film Just Got More Interactive

Let’s say you are a major media and entertainment brand that offers live streaming services. You want to take it up a notch and get your customers to be more engaged, so you decide to make things interactive.

Rather than offering a standard “thumb up/thumb down” click option on screen, you decide to give customers the option to ask questions via SMS or comment on the live content. All by integrating services into the SMS and using Google Sheets as the interface with marketing.

Once a question or a comment is submitted, the marketing team can see it in the Google sheet, then answer or reply straight in the sheet, sending the reply or answer back to the user. For example, the marketing team can post user comments into the live stream, and thank the user in the spreadsheet for submitting it.

How to Build It

As a developer, we know you care about the technical know-how. You’ll notice, there are multiple services at play. 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 the SMS example above:

const app = new Reshuffle()
const twilioConnector = new TwilioConnector(
   app, {
       accountSid: process.env.TWILIO_ACCOUNT_SID,
       authToken: process.env.TWILIO_AUTH_TOKEN,
       twilioNumber: process.env.TWILIO_NUMBER
   });

Now, we need to also declare a Google Sheet connector:

const googleSheetsConnector = new GoogleSheetsConnector(app, {
  credentials: {
    client_email: process.env.GOOGLE_CLIENT_EMAIL,
    private_key: process.env.GOOGLE_PRIVATE_KEY.replace(/\\n/g, "\n")
  },
  sheetsId: process.env.GOOGLE_SHEET_ID
});

Next, we need to define the event we want to listen to using the Twilio connector on() method. In this case we want to listen to an incoming SMS on the Twilio number:

twilioConnector.on({method:'POST', path:'/sms'}, (event, app) => {
   const messageReceived = event.req.body.Body
   const fromPhoneNumber = event.req.body.From
   // more code to come here
})

As you can see, we extract the message and number from the event. Now we need to add that information to the spreadsheet using the GoogleSheets Connector. Let's add that to the code above:

twilioConnector.on({method:'POST', path:'/sms'}, (event, app) => {
   const messageReceived = event.req.body.Body
   const fromPhoneNumber = event.req.body.From
   const sheetId = 0
   const values = [fromPhoneNumber, messageReceived]
   await googleSheetsConnector.addRow(sheetId, values)
})

Here is how the spreadsheet looks like after the first entry is entered:

To finish off, we will add an event handler to the GoogleSheet Connector to handle the use case of the marketing manager adding an answer in the answer column in the spreadsheet.

googleSheetsConnector.on({}, (event, app) => {
   const rows = await myGoogleSheetsConnector.getRows(sheetTitle) 
  rows.forEach(async row => {
    if (row.answer && !row.sent) {
      twilioConnector.sendSMS(row.answer, row.from)
      Row.sent = 'true'
      row.save()
    }
  });
};
);

Lastly, let's initiate the integration by starting the Reshuffle App:

app.start();

That is it! With minimal code and an intuitive user interface for marketing staff, we have created a full workflow for our media company.

Note that in real life, we would probably have some production safety precautions such as a “confirm_send” column so the marketing team can confirm that the answer is truly ready to be sent.

Now, Get Creative

As you work with your sales, marketing, and customer experience colleagues, we encourage you to get creative in making SMS integrations that drive better customer experiences and help differentiate your business in the marketplace.

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.

ReshuffleDB - the DB that's always there for you

Amir Shevat — Thu, 14 Nov 2019 21:29:32 +0000

One of the most fundamental aspects of fullstack development is working with databases. Even though no two web applications are the same, the need for remote data is nearly ubiquitous. You might assume that due to the massive advancements in cloud computing over the last 10 years provisioning a DB in 2019 would be fairly painless. But it's not.

At Reshuffle we understand that nearly all real world applications need data. This is why any application deployed to the Reshuffle platform automagically has a database provisioned alongside it. That way, the database you always end up needing is already there when you need it.

Building an app on Reshuffle is 100% free and comes with it's own DB. Here is our shiny new documentation, please let us know what you think!

Reshuffle DB docs
Reshuffle homepage
Our Discord