Was anyone else not okay after season 7 episode 22 of The Office?
SPOILER ALERT!
"Goodbye, Michael" was originally supposed to be about Michael Scott getting fired from Dunder Mifflin for a business mistake (Boring!). Instead, the writers decided to rip out our hearts with this extremely sweet episode where Michael ends up leaving the company to move to Colorado to be with his fiancée.
Before leaving, he gives each of his employees a special going-away gift. While I didn't do anything remotely as epic when I left my past company, I built an app that allowed my former coworkers to send their names to a virtual phone number and receive a personalized message I had written for each of them. It was a thoughtful way to say farewell and let them know how much I appreciated their help that summer.
I'd love to show you how you can recreate this project using Vonage AI Studio, and Notion. Let's dive in and get started!
a Notion account to create our database
Vonage API Account To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
Once that's done, go to your API Dashboard and, on the left-hand side find BUILD & MANAGE > AI Studio > Go to AI Studio > Create Agent. You can select any agent type, but for our example we're going to build it with WhatsApp.
Fill in all the required details:
Region: Where will your Agent be typically used - The USA or in Europe
Agent Name: Give your Agent a unique name that is meaningful to you.
Language: Select the language of your Agent.
Time Zone: Choose the time zone where your Agent will operate.
For templates, we are going to Start from Scratch.
For event, this will be an Inbound Call because we are the ones texting our agent.
As best practice, we will store the actual names of coworkers, messages, and recipient emails in a database - for this sample, we'll be using Notion!
Go to Notion.
Click the (+) button to add a page.
On the new page under DATABASE, click 'Table'.
Enter the different items you need in each column and their corresponding properties. We have columns titled Coworker, Message, and Email.
Database in Notion
Now comes the fun part! With Vonage AI Studio's easy-to-use interface, you can design your chatbot's conversational flow. It's a drag-and-drop setup, meaning you don't need coding skills to get going. You can add different dialog nodes and define responses.
Our flow should look like this:
Conversation Flow
NODES > Conversation > Collect Input The virtual agent will prompt a question to the user.
Node name:
ASK NAME.Prompt: "Well, I'm moving to Colorado to start my new life with Holly." Reply with your name to receive your personalized message.
Retry Prompt: Let's try again. Reply with your name.
Expected Input: Text
NODES > Integrations > Webhook
Method: POST
Request URL: https://api.notion.com/v1/databases/<database_id>/query_ To find a database ID, navigate to the database URL in your Notion workspace. The ID is the string of characters in the URL that is between the slash following the workspace name (if applicable) and the question mark. The ID is a 32-character alphanumeric string._
Headers (HTTP Header : Value)
Authorization : Bearer $NOTION*ACCESS_TOKEN
Notion-Version : 2022-06-28
Content-Type : application/json* To find your $NOTION_ACCESS_TOKEN, go through the Authorization process for an internal integration on Notion._ -Response Mapping Response type: JSON Object path: After filling out the above information in our webhook node, make sure the webhook is working by clicking the 'Test request' button in the top right. Under Response, you'll see that it returns all the data from our Notion table. Using the response, define the object path and map it to a parameter.
![Screenshot of a 'Response Mapping' section from an application interface with a drop-down menu selecting 'JSON' as the response type. There are three object paths listed with corresponding parameters. The first is 'results[0].properties.Message.rich_text[0].text.content' mapped to a parameter '$RETURNED_MESSAGE'. The second is 'results[0].properties.Email.email' mapped to '$RETURNED_EMAIL'. The third is 'results[0].properties.Coworker.title[0].plain_text' mapped to '$RETURNED_COWORKER'. The layout is a structured table indicating how JSON response elements correspond to internal parameters of the system.](https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-a-farewell-app-using-vonage-ai-studio-and-notion-as-a-database/response-mapping.png)
Response Mapping
Parameter: For every object path, create a parameter. Select @sys.any for the Entity of each one.
Parameters
NODES > Action > Send Email
To: $RETURNED_EMAIL
Subject: Goodbye from Michael Scott
Body: $RETURNED_MESSAGE
NODES > Actions > End Conversation
At the top of Vonage AI Studio, click "Tester" then "Start chat". Type a name from your database.
Test Darryl
You should then get an email with its corresponding content!
Email Received
Saying goodbye doesn't have to be ordinary. With a touch of creativity and the usage of Vonage AI Studio and Notion as a database, you can make farewells heartfelt and unforgettable. So, go ahead and spread some joy with personalized messages that will make them smile one last time.
In The Office finale, Andy Bernard says, "I wish there was a way to know you're in the good old days before you've actually left them." I would say we're in the good old days now with the technology and tools we can use to build cool iconic apps like this. Feel free to join our "office" of developers on Slack and follow us on X, formerly known as Twitter. If you end up building a similar application, please share it and tag me - I'd love to hear about your season finale.
){kind=small}
