Brainstorm last-minute Father's Day gifts with Notion and SMS
Tags: webdev, javascript, tutorial, notion
Published: 2021-06-15 23:09:01

---
title: Brainstorm last-minute Father's Day gifts with Notion and SMS
published: true
description: Collaborate and brainstorm on a Father's Day gift using the Notion API and Twilio SMS, Serverless, and Functions in JavaScript.
tags: webdev, javascript, tutorial, notion
cover_image: https://twilio-cms-prod.s3.amazonaws.com/images/dad_1.width-808.png
---
This blog post was written for [Twilio](https://www.twilio.com/) and [originally published on the Twilio blog](https://www.twilio.com/blog/fathers-day-notion-sms).

Father’s Day is coming up, and my twin brother and I need to plan what to get for our dad. For multimedia notes and brainstorming, I like to use Notion, an app that bills itself as “an all-in-one workspace where you can write, plan, collaborate and get organized.” Notion has options for making notes, adding tasks, managing projects, and more. My brother doesn’t use Notion, but he does text a lot. To make it easy for us to collaborate, I made an SMS bot to which we both can text gift ideas. The ideas will be gathered into a single Notion page using [Notion's recently-released API](https://developers.notion.com/), Twilio SMS, the [Twilio Serverless Toolkit](https://www.twilio.com/docs/labs/serverless-toolkit/general-usage), and [Twilio Functions](https://www.twilio.com/docs/runtime/functions), making my gift-buying process a lot easier.
![gift sms to notion db](https://twilio-cms-prod.s3.amazonaws.com/original_images/nKE43DY1urch3qFBnmGumcODjN3uFJNfz0Sc4swJu4eaGhHsQ1fsN4o2JjWBePUiOKgmkoBBUAnLSL)
### Prerequisites
1. A Twilio account - [sign up for a free one here and receive an extra $10 if you upgrade through this link](http://www.twilio.com/referral/iHsJ5D).
2. A Twilio phone number with SMS capabilities - [configure one here](https://support.twilio.com/hc/en-us/articles/223135247-How-to-Search-for-and-Buy-a-Twilio-Phone-Number-from-Console).
3. Node.js installed - [download it here](https://nodejs.org/en/download/).
4. Notion account - [download the Mac or iOS app](https://www.notion.so/desktop) here and make an account (or you can just make an account at that link and use Notion in the browser).
5. A personal phone number to test the project.
### Get Started with the Notion API
Go to the [Notion API website](https://developers.notion.com/) and make sure you are logged into a Notion workspace as an Admin user. If you're not an Admin in your current workspace, [make a new personal workspace for free here](https://www.notion.so/Create-join-switch-workspaces-3b9be78982a940a7a27ce712ca6bdcf5#9332861c775543d0965f918924448a6d). From the Notion API site, click on <em>My integrations</em> in the top right corner.
![my integrations in top right corner](https://twilio-cms-prod.s3.amazonaws.com/images/_CMOUKAwcDfbTu0pJQmmX9hFh9CvZyGCaMBqiMpH3jaW6Q.width-800.png)
Select <em>New integration</em> and on the following page, give your integration a name like <em>fathers-day-collab-sms</em>. For the purposes of this post, the integration type can be <em>internal</em>.
![basic info for integration](https://twilio-cms-prod.s3.amazonaws.com/images/dTMlRvqNDmEMPBtqeiQo3uxVSh40zfHgv2JJO7wARozGT0.width-500.png)
After clicking <em>Submit</em>, you will be taken to a page with your integration's Internal Integration Token. Copy it and keep it hidden for later.
![internal integration token](https://twilio-cms-prod.s3.amazonaws.com/images/08Cgw9bNKqQ4w2Z-QibVdhZmQwiRc20K0kok7aQU95c0-h.width-500.png)
Make a new page in your Notion workspace either in your Notion app or at <em>notion.so</em> by clicking the plus sign next to <em>Workspace</em>. Your Notion might instead have an "Add a Page" button which you would click instead, like this.
![add a page button](https://twilio-cms-prod.s3.amazonaws.com/images/geNoEO4LH69u7X7bbjGb-aq8gwnIKrsNKXWFAhXfMmYvU3.width-500.png)
Below are two of my workspaces: one called <em>Father's Day Collab SMS</em>, and the other called <em>Twitch test</em> which has some sub-spaces.
![workspace organization](https://twilio-cms-prod.s3.amazonaws.com/images/WuJLns6z9jnkcK75iaDZGz5I624r3-7moDco99MwX5hd7a.width-500.png)
In your <em>Father's Day Collab SMS workspace</em>, type a "/" to see possible commands. We want to make a table, so type "/table" and select <em>Table-Full Page</em>. This inserts a new database into our workspace. You can read more on the [types of databases in Notion here](https://www.notion.so/Intro-to-databases-fd8cd2d212f74c50954c11086d85997e#13b4ab72cb8948ebbf67e3799d7adb55).
![table command](https://twilio-cms-prod.s3.amazonaws.com/images/CpxGA5QjHaGrZQf4bhC2zsxONR-UckHEEFA_PXl8xBTFp_.width-500.png)
Integrations don't have access to any pages (or databases) in the workspace at first. A Notion user needs to share certain pages with an integration so those pages can be accessed using the API, helping keep information in Notion secure. To let the Notion API access our database, click <em>Share</em> in the top right of your database (in the workspace) followed by the blue <em>Invite</em> button. Under <em>Integrations</em>, click <em>Father's Day Collab SMS</em> workspace.
![share to web, share with workspace, share with integration](https://twilio-cms-prod.s3.amazonaws.com/images/tb4uLbznzJQQmcQx0BJN38jqarPHUOa_Rcdndzk2fdHM6C.width-500.png)
You can see more information on sharing a database with your integration [here on the Notion API website](https://developers.notion.com/docs/getting-started).

Give your database a title and some column names--this blog post's database is <em>Possible Gifts</em> and the column names (what we want to keep track of) are <em>Name</em>, <em>Where</em>, and <em>Price</em>. Set these in the Notion app like below.
![column names in Notion app/database](https://twilio-cms-prod.s3.amazonaws.com/images/ipNGpMhFi7V587_AJ_RPEsiAt8ZI7JJQ3abWfzcaVexvA4.width-500.png)
Lastly, take note of the ID of the database you just created. Open Notion in a browser and, viewing the database as a full page, the database ID is the part of the URL after <em>notion.so</em> and the slash and before the question mark (this blog post database begins with <em>dcfc</em> and ends with <em>e9e</em>.) The ID is 32 characters long with numbers and letters. Copy the ID and save it somewhere you can easily find soon.
![Notion database ID in URL](https://twilio-cms-prod.s3.amazonaws.com/images/Dk98UsIVNJG4E4hI-j1PJmJrRY9bciAiOlA5YKrQvocUk2.width-500.png)
My teammate Kelley's database link sometimes contained her Notion username--that is something we don't want! You may have to make a new database under a different project if your database link does not look like the one in the image above.

So far, we can add items to the database in Notion, but what if someone (like my brother) does not have Notion? Now we can add Twilio so non-Notion users can fill the database via SMS!
### Get your App Up and Running Quickly with the Twilio Serverless Toolkit
The Serverless Toolkit is CLI tooling that helps you develop locally and deploy to [Twilio Runtime](https://www.twilio.com/docs/runtime). The best way to work with the Serverless Toolkit is through the Twilio CLI. If you don't have the [Twilio CLI](https://www.twilio.com/docs/twilio-cli/quickstart) installed yet, run the following commands on the command line to install it and the Serverless Toolkit:
```bash
npm install twilio-cli -g
twilio login
twilio plugins:install @twilio-labs/plugin-serverless
```
Create your new project and install our lone requirement `superagent`, an HTTP client library to make HTTP requests in Node.js, by running:
```bash
twilio serverless:init notion-api-twilio-sms --template=blank
cd notion-api-twilio-sms
npm install superagent
```
Edit an <em>.env</em> file and add an environment variable for your Notion API key. In this blog post, the API key is called <em>NOTION_API_KEY</em>.
### Make a Twilio Function with JavaScript
`cd` into the `/functions` directory and make a new file called `write_to_db.js` containing the following code:
```javascript
const superagent = require('superagent');
exports.handler = async function(context, event, callback) {
  const twiml = new Twilio.twiml.MessagingResponse();
  let inbMsg = event.Body.trim();
  let propObj, firstCell, secondCell, thirdCell;
  let count = (inbMsg.match(/,/g) || []).length; //# of commas means # columns sent
  //check count of commas in inbound message: this will affect the Notion database columns we write to
  switch(count) {
    case 0: 
      firstCell = inbMsg;
      propObj = {
        "Name": [
          {
            "text": {
              "content": `${firstCell}`
            }
          }
        ]
      }
      break;
    case 1: //1 comma = 2 columns
      firstCell = inbMsg.split(',')[0];
      secondCell = inbMsg.split(',')[1];
      propObj = {
        "Name": [
          {
            "text": {
              "content": `${firstCell}`
            }
          }
        ],
        "Where": [
          {
            "text": {
              "content": `${secondCell}`
            }
          }
        ],
      }
      break;
    case 2: //2 commas, 3 columns
      firstCell = inbMsg.split(',')[0];
      secondCell = inbMsg.split(',')[1];
      thirdCell = inbMsg.split(',')[2];
      propObj = {
        "Name": [
          {
            "text": {
              "content": `${firstCell}`
            }
          }
        ],
        "Where": [
          {
            "text": {
              "content": `${secondCell}`
            }
          }
        ],
        "Price": [
          {
            "text": {
              "content": `${thirdCell}`
            }
          }
        ]
      }
      break;
  }
  superagent.post(`https://api.notion.com/v1/pages`, 
  { "parent": { 
    "database_id": `{YOUR-DATABASE-ID}`
  }, "properties": propObj
})
  .set('Authorization', `Bearer ${context.NOTION_API_KEY}`)
  .set('Content-Type', 'application/json')
  .set('Notion-Version', '2021-05-13')
  .then((res) => {
    twiml.message(`Wrote ${inbMsg} to the Notion page!`);
    callback(null, twiml);
  })
  .catch(err => {
  twiml.message(`Error: ${err.message}`);
    callback(null, twiml);
  });
};
```
This code imports `superagent` so we can handle HTTP requests in Node.js, makes a [Twilio Messaging Response object](https://www.twilio.com/docs/sms/api/message-resource), retrieves the inbound text message, checks the number of commas to decide which Notion database columns to post to, parses the inbound message to separate the input based on commas, and makes an object to pass to the Notion API's `properties` parameter which uses property names or IDs as keys. For more information on the Database object, check out [this section of the Notion API documentation](https://developers.notion.com/reference/database#database-property).

With `superagent`, we hit the Notion API `pages` endpoint passing it the database ID (so we can write to the database) and the content we want to write to the database. We set our Notion API key, the `content-type`, and the Notion version, and then send a text message confirmation response back so the user knows what they texted was written to the shared database.

You can [view the complete app on GitHub here](https://github.com/elizabethsiegle/notion-fathersday-sms).
### Configure the Function with a Twilio Phone Number
To open up our app to the web with a public-facing URL, go back to the <em>notion-api-twilio-sms</em> root directory and run `twilio serverless:deploy` to deploy the app. This will return some information including a few URLs as shown below:
![function URLs generated when the app is deployed](https://twilio-cms-prod.s3.amazonaws.com/images/zFFKS72w9w5h6oJC6VaQ6dSVf_OYpLaBH4FPAdUm4xBtua.width-500.png)
Grab the Function URL ending in '/write_to_db' and run
```bash
twilio phone-numbers:update {YOUR-TWILIO-NUMBER} --sms-url {https://YOUR-URL-HERE.twil.io/write_to_db}
```
to connect a Twilio phone number to the deployed Function URL. If you view the phone number in your Phone Numbers Console, it will still show up there as a "Function" and not a "Webhook URL". You can now text your Twilio number gift ideas for Father's day with the name, price, and location separated by commas and have it written to your Notion database.
![body of text saved to Notion database](https://twilio-cms-prod.s3.amazonaws.com/original_images/xOFklJDVaPT72aabDxQ-fHrO7jpZw6HX9PEHh2PmwUo1998aIlQ8uRSZpzEY2TRSxDzg0Zgpml4Xix)
### What's Next for Twilio Serverless and the Notion API?
How are you celebrating Father's Day? Twilio's Serverless Toolkit makes it possible to deploy web apps quickly, and Twilio Runtime seamlessly handles servers for you. I don't actually use Notion much, but I'm trying to use it as a personal wiki as I know so many people who are huge fans. There is a Notion integration that uses SendGrid to send an email whenever the <em>Status</em> property of a page in a database is updated, showing how Notion can cause an external action, and you can use the [Notion API](https://developers.notion.com/) for so much more!