{"id":5260,"date":"2023-05-31T10:28:07","date_gmt":"2023-05-31T10:28:07","guid":{"rendered":"https:\/\/unremot.com\/blog\/?p=5260"},"modified":"2023-05-31T10:28:07","modified_gmt":"2023-05-31T10:28:07","slug":"how-to-use-notion-api","status":"publish","type":"post","link":"https:\/\/unremot.com\/blog\/how-to-use-notion-api\/","title":{"rendered":"How To Use Notion API a step-by-step Integration Guide and Full Documentation List"},"content":{"rendered":"<p>This article will discuss about how to use Notion API with step-by-step integration guide and full documentation list. Let&#8217;s get started!<\/p>\n\n<h2><b>Overview of Notion API<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Notion is a web-based productivity and note-taking application. It offers several organizational tools such as \u2013 task management, project tracking, to-do-lists, bookmarking, and much more. Developers and coders can use Notion public API to interact with databases, content, and pages within Notion. This is accomplished through a number of endpoints or locations where the API can interact with Notion and gather and arrange data from other sources (such as apps). Your team can create custom integrations or use ones that are already available.<\/span><\/p>\n<p style=\"text-align: center;\"><strong>Also read:\u00a0<a href=\"https:\/\/unremot.com\/blog\/how-to-use-instagram-api\/\">How to use Instagram API; a step-by-step integration guide and full documentation list<\/a><\/strong><\/p>\n<h2><b>Notion developer API and key functionalities<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Developers use the Notion developer API to connect with other software to Notion or automate workflows. They can use the API to interact with Notion\u2019s databases, pages, and content. This can be done through end-points- places where the API communicates and works with Notion and organizes information for your software. Here are some key features of Notion API:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create and update pages and databases<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add and remove blocks<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Search for content\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Import and export data.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Developers can use Notion Integration API to build integration and automation. They can use Notion to connect to apps like Google Calendar, Gmail, and other productivity apps.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Some key functionalities of the Notion API are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>For databases:<\/strong>\u00a0information in Notion are stored in databases. Developers can use the Notion API component to pull a specific entry, search the database entry, and get a list of the entries in the database.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>For pages and blocks:<\/strong>\u00a0Blocks are Notion pages that you can customize depending on your requirements. Developers can use the API to create a new page, set page properties, or retrieve page properties.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>For people in your workplace:<\/strong>\u00a0you can use Notion to encourage transparency for all stakeholders in your organization. You can use Notion API to get names of all the users.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Developers can use these resources to learn more about the Notion Developer API. Here are a few great resources that you can use to learn more about the Notion Developer API:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Notion Developer API documentation:<\/strong>\u00a0The Notion Developer API documentation provides detailed information about the API&#8217;s endpoints, parameters, and responses.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Notion Developer API examples:<\/strong>\u00a0The Notion Developer API examples provide code samples that demonstrate how to use the API to perform common tasks.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Notion Developer API community:\u00a0<\/strong>The Notion Developer API community is a forum where you can ask questions and get help from other developers.<\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><strong>Also read:\u00a0<a href=\"https:\/\/unremot.com\/blog\/how-to-use-spotify-api\/\">How to use Spotify API; a step-by-step integration guide and full documentation list<\/a><\/strong><\/p>\n<h2><b>How to use Notion API &#8211; step-by-step integration guide<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">If you are familiar with coding you will not find it difficult to use Notion API. Before you begin you need to\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sign up for a <\/span><a href=\"https:\/\/www.notion.so\/signup\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Notion account<\/span><\/a><span style=\"font-weight: 400;\"> and create a new workspace or use an existing workspace.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00a0You need to have admin level access to the workspace.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create one or more <\/span><a href=\"https:\/\/www.notion.so\/help\/intro-to-databases\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">database<\/span><\/a><span style=\"font-weight: 400;\"> in the workspace.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You need to install npm and node.js to use Notion\u2019s JavaScript Library<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\"><strong>Step 1:<\/strong> Create an integration<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Visit<\/span><span style=\"font-weight: 400;\"> the <a href=\"https:\/\/www.notion.com\/my-integrations\" target=\"_blank\" rel=\"noopener\">website<\/a><\/span><span style=\"font-weight: 400;\">\u00a0your browser.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click the <\/span><i style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">+ new\u00a0<\/span><\/i><span style=\"font-weight: 400;\"><i>integration<\/i>\u00a0button\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Name the integration\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select the authorization for your integration.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click <\/span><i><span style=\"font-weight: 400;\">Submit<\/span><\/i><span style=\"font-weight: 400;\"> button.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">On the next page you can get notion API key or Notion integration token. You need to make a request to the Notion API.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Step 2:<\/strong> Share a database with your integration<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After creating an integration you need to grant access to a database. To keep information secure, the integration should not have access specific pages. To share the database\u00a0 with your database\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Go to the database page in your workspace.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click the <\/span><span style=\"font-weight: 400;\">\u00a0<\/span><span style=\"font-weight: 400;\">\u2022\u2022\u2022 <\/span><span style=\"font-weight: 400;\">on the top-right hand corner.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Scroll to the bottom of the pop-up and click on <\/span><i><span style=\"font-weight: 400;\">Add connection<\/span><\/i><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Search for and select your integration of the Search for connection\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\"><strong>Step 3:<\/strong> Save the database ID<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You will need to save the database ID to manipulate the database using the integration. To get the database ID, simply copy your URL of database. <\/span><span style=\"font-weight: 400;\">The database ID is the string of characters after the <\/span><span style=\"font-weight: 400;\">\/databases\/<\/span><span style=\"font-weight: 400;\"> in the URL.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you have saved the database ID, you can start making requests to the Notion API.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Step 4:<\/strong> Make a request to the Notion API<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To make a request to the Notion API, you will need to use the <\/span><span style=\"font-weight: 400;\">curl<\/span><span style=\"font-weight: 400;\"> command-line tool. For example, to get all of the pages in a database, you would use the following command:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">curl -X GET \\<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0-H &#8220;Authorization: Bearer YOUR_API_KEY&#8221; \\<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0<\/span><span style=\"font-weight: 400;\">Replace Your_API_Key with your Notion API key and Your_Database_ID with database you want to access.\u00a0<\/span><\/p>\n<p style=\"text-align: center;\"><strong>Also read:\u00a0<a href=\"https:\/\/unremot.com\/blog\/how-to-use-youtube-api\/\">How To Use YouTube API; A Step-By-Step Guide To Integrate And Full Documentation List<\/a><\/strong><\/p>\n<h2><b>Notion API documentation references<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The Notion API documentation is comprehensive and easy to navigate. The document contains detailed information about the API endpoints, parameters, and response. You can refer to the sample code to find out how to common task work.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Notion API has following sections\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Introduction is important if you want to understand Notion API.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Conventions The Notion API follows the RestFul API when possible. Requests and responses are encoded in JSON.\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pagination: Endpoint that returns list of objects support cursor-based pagination requests.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Response: The pages list the responses returned by each endpoint.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Examples: This section contains code samples to show coders how to use the API for common tasks.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here are some additional resources that you may find helpful:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Notion Developer API community is a forum where you can ask questions and get help from other developers.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Notion Developer API Blog provides news and development about the API.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Notion Developer API Twitter account makes API announcements about new features.\u00a0<\/span><\/li>\n<\/ul>\n<h2><b>Notion API examples<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">In this section we have covered how to use Notion API examples for different programming languages. These sections are a beginners guide on how to use the Notion API.\u00a0<\/span><\/p>\n<h3><b>How to use Notion API Python<\/b><\/h3>\n<p><b>Start by setting up the Notion API and a database.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Follow all the steps mentioned in the previous section.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create an integration and get an API Key.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Share your database with the integration.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Save the database ID.\u00a0<\/span><\/li>\n<\/ul>\n<p><b>Set up the Python Code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">To work with the API you will be working with the <\/span><i><span style=\"font-weight: 400;\">request <\/span><\/i><span style=\"font-weight: 400;\">module. You can install it with pip:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">pip install request<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Define your Notion API key, database ID in the header.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import<\/span> <span style=\"font-weight: 400;\">requests<\/span><\/p>\n<p><span style=\"font-weight: 400;\">NOTION_TOKEN <\/span><span style=\"font-weight: 400;\">=<\/span> <span style=\"font-weight: 400;\">&#8220;YOUR_INTEGRATION_TOKEN&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">DATABASE_ID <\/span><span style=\"font-weight: 400;\">=<\/span> <span style=\"font-weight: 400;\">&#8220;YOUR_DATABASE_ID&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">headers = {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8220;Authorization&#8221;:<\/span> <span style=\"font-weight: 400;\">&#8220;Bearer &#8220;<\/span> <span style=\"font-weight: 400;\">+<\/span><span style=\"font-weight: 400;\"> NOTION_TOKEN<\/span><span style=\"font-weight: 400;\">,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8220;Content-Type&#8221;:<\/span> <span style=\"font-weight: 400;\">&#8220;application\/json&#8221;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8220;Notion-Version&#8221;:<\/span> <span style=\"font-weight: 400;\">&#8220;2022-06-28&#8221;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create pages in your Notion database<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To create a new page, we send a POST request.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">def create_page(data: dict):<\/span><\/p>\n<p><span style=\"font-weight: 400;\">create_url = &#8220;https:\/\/api.notion.com\/v1\/pages&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">payload = {&#8220;parent&#8221;: {&#8220;database_id&#8221;: DATABASE_ID}, &#8220;properties&#8221;: data}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">res = requests.post(create_url, headers=headers, json=payload)<\/span><\/p>\n<p><span style=\"font-weight: 400;\"># print(res.status_code)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">return res<\/span><\/p>\n<h3><b>How to use Notion API NPM<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Start by setting up the Notion API and database mentioned in the previous section. You will need the integration token or access token.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const { Client } = require(&#8220;@notionhq\/client&#8221;)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\/\/ Initializing a client<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const notion = new Client({<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0auth: process.env.NOTION_TOKEN,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">})<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Make a request to any Notion endpoint. You can get a complete list of endpoints from <\/span><a href=\"https:\/\/developers.notion.com\/reference\/intro\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">API reference.<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">;(async () =&gt; {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const listUsersResponse = await notion.users.list({})<\/span><\/p>\n<p><span style=\"font-weight: 400;\">})()<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Each method returns a\u00a0<\/span><span style=\"font-weight: 400;\">Promise<\/span><span style=\"font-weight: 400;\">\u00a0which resolves the response.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">console.log(listUsersResponse)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">{<\/span><\/p>\n<p><span style=\"font-weight: 400;\">results: [<\/span><\/p>\n<p><span style=\"font-weight: 400;\">{<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0object: &#8216;user&#8217;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id: &#8216;d40e767c-d7af-4b18-a86d-55c61f1e39a4&#8217;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: &#8216;person&#8217;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0person: {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0email: &#8216;avo@example.org&#8217;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name: &#8216;Avocado Lovelace&#8217;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0avatar_url: &#8216;https:\/\/secure.notion-static.com\/e6a352a8-8381-44d0-a1dc-9ed80e62b53d.jpg&#8217;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0},<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0]<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Endpoint parameters are grouped into a single object. You don&#8217;t need to remember which parameters go in the path, query, or body.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const myPage = await notion.databases.query({<\/span><\/p>\n<p><span style=\"font-weight: 400;\">database_id: &#8220;897e5a76-ae52-4b48-9fdf-e71f5945d1af&#8221;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">filter: {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0property: &#8220;Landmark&#8221;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0rich_text: {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0 \u00a0 contains: &#8220;Bridge&#8221;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0},<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span><\/p>\n<p><span style=\"font-weight: 400;\">})<\/span><\/p>\n<h3><b>How to use Notion API PHP<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Start by setting up the Notion API and database mentioned in the previous section. <\/span><span style=\"font-weight: 400;\">To use the Notion API in PHP, you will need to install the Notion PHP package. You can do this using Composer:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">composer require 64robots\/php-notion<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You need to create an instance of the Notion class using your Notion Internal Integration Token.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">use<\/span> <span style=\"font-weight: 400;\">R64<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">PhpNotion<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">Notion<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">$notion<\/span><span style=\"font-weight: 400;\"> = <\/span><span style=\"font-weight: 400;\">new<\/span> <span style=\"font-weight: 400;\">Notion<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">&#8216;secret_access_token&#8217;<\/span><span style=\"font-weight: 400;\">);<\/span><\/p>\n<p><span style=\"font-weight: 400;\">$database = $notion-&gt;databases()-&gt;retrieve(&#8216;a65b5216-46cb-479b-961e-67cc7b05a56d&#8217;);<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Testing\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Composer test\u00a0<\/span><\/p>\n<h3><b>How to use Notion SCIM API<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Your workspace must be on an Enterprise plan.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Your Identity Provide (IdP) should support SAML 2.0 protocol.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For a Notion workspace, only a Workspace Owner can configure SCIM.<\/span><\/li>\n<\/ul>\n<p><b>Generate your SCIM API Token<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Enterprise Plan Work workspace can generate and view SCIM API tokens by going to Settings &amp; members\u00a0\u2192\u00a0Security &amp; identity\u00a0\u2192\u00a0SCIM configuration.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To generate\u00a0 a new token, click on the <\/span><span style=\"font-weight: 400;\">\u00a0<\/span><span style=\"font-weight: 400;\">+New Token<\/span><span style=\"font-weight: 400;\">\u00a0button in the right corner.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A unique token is generated for each workspace owner.<\/span><\/li>\n<\/ul>\n<h3><b>Revoke tokens<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">When an owner leaves the workspace or their roles chance, their token is cancelled. The remaining Workspace owners will be informed to replace the revoked token when this occurs via an automated message delivered to all Workspace owners.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, every workplace owner in the workplace has the ability to revoke active tokens. Click next to the appropriate token to cancel it.<\/span><\/p>\n<h3><b>Replace existing tokens<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Any integrations that currently use a token will require a replacement if it is revoked. Until it is replaced with an active token, any SCIM integration and user provisioning that depends on the revoked token will be disabled.<\/span><\/p>\n<h3><b>How to use Notion API JSON<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">JSON or <\/span><span style=\"font-weight: 400;\">JavaScript\u00a0Object\u00a0Notation<\/span><span style=\"font-weight: 400;\"> is a lightweight format for storing and transporting data. It is used to when data is sent from the server to a web page. It is easy to understand.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To use Notion API you need to sign up and authenticate your Notion Account. You can follow the steps mentioned in the previous section.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Make a request<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that you have your API key, you can make a request to the Notion API. The following code shows JSON data for a page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const { Client } = require(&#8216;@notionhq\/client&#8217;);<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const notion = new Client({ auth: process.env.NOTION_API_KEY });<\/span><\/p>\n<p><span style=\"font-weight: 400;\">(async () =&gt; {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0const pageId = &#8217;16d8004e5f6a42a6981151c22ddada12&#8242;;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0const response = await notion.pages.get({ page_id: pageId });<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0console.log(response);<\/span><\/p>\n<p><span style=\"font-weight: 400;\">})();<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This code will GET request to the \/page\/get endpoints. The <\/span><span style=\"font-weight: 400;\">page_id<\/span><span style=\"font-weight: 400;\"> parameter is the ID of the page that you want to get data for.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The <\/span><span style=\"font-weight: 400;\">response<\/span><span style=\"font-weight: 400;\"> object will contain the JSON data for the page. You can access the data by using the properties of the <\/span><span style=\"font-weight: 400;\">response<\/span><span style=\"font-weight: 400;\"> object.<\/span><\/p>\n<h3><b>How to use Notion API JavaScript<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Set up your development environment:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ensure you have Node.js installed on your system to run JavaScript code.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create a new directory for your project and navigate to it using the command line.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Initialize a new Node.js project:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Run the command <\/span><b>npm init<\/b><span style=\"font-weight: 400;\"> in your project directory and follow the prompts to set up a new Node.js project. This will create a <\/span><b>package.json<\/b><span style=\"font-weight: 400;\"> file that manages your project dependencies.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Now that you have the package.json file, install the packages you will be using for the project.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">npm install &#8211;save @notionhq\/client@^2.2.1<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npm install &#8211;save dotenv@^16.0.3<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The notionhq\/client <\/span><span style=\"font-weight: 400;\">is the library that will help us use the Notion API easier and dotenv library makes it easier to use the secrets stored in the environment variables.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create an .env file to store the secret and database_id<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">NOTION_KEY=&amp;lt;Paste Your Internal Integration Token here&amp;gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">NOTION_DATABASE_ID=&amp;lt;Pase your Notion Database ID here&amp;gt;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can start writing the JavaScript code in a file called index.js<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">const integrationToken = &#8216;YOUR_INTEGRATION_TOKEN&#8217;;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const headers = {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0headers: {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0Authorization: `Bearer ${integrationToken}`,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&#8216;Content-Type&#8217;: &#8216;application\/json&#8217;,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span><\/p>\n<p><span style=\"font-weight: 400;\">};<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now import the dotenv library and run the config method. Remember to\u00a0load the variables stored inside the\u00a0.env\u00a0file into the environment. We are using\u00a0console.log\u00a0to print those variables to the screen to ensure they are working as expected.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can now start interacting with the Notion API and database.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const Client = require(&#8216;@notionhq\/client&#8217;).Client<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const dotenv = require(&#8216;dotenv&#8217;)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">dotenv.config()<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const NOTION_CLIENT = new Client({ auth: process.env.NOTION_KEY })<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const DATABASE_ID = process.env.NOTION_DATABASE_ID<\/span><\/p>\n<p><span style=\"font-weight: 400;\">async function getDatabaseData(client, databaseId) {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0const response = await client.databases.query({<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0database_id: databaseId,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0})<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0console.log(response)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">getDatabaseData(NOTION_CLIENT, DATABASE_ID)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here two constant variables are used throughout the file NOTION and DATABASE_ID.<\/span><\/p>\n<h3><b>How to use Notion API React<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">We begin by creating a project directory and react app.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">mkdir react-node-notion<\/span><\/p>\n<p><span style=\"font-weight: 400;\">cd react-node-notion<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npx create-react-app@latest sample-app &#8211;template typescript<\/span><\/p>\n<p><span style=\"font-weight: 400;\">cd sample-app<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npm run start<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Start with setting up Notion Integration mentioned in the previous section. Copy the secret integration token. Create your database and\u00a0 copy your database_id.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create an Express server. Notion provides a client library to make it easier to interact with the API from a backend server. Install these packages<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">npm install @notionhq\/client cors body-parser dotenv<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The CORS package allows the Express backend and React client to exchange data through the API endpoints. You can use the body-parser package to process incoming HTTP requests. You\u2019ll parse the JSON payload from the client, retrieve specific data, and make that data available as an object in the req.body property. Lastly, the dotenv package makes it possible to load environment variables from a\u00a0<\/span><b>.env<\/b><span style=\"font-weight: 400;\">\u00a0file in your application.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the root directory of the server folder, create a .env file, and add the code below<\/span><\/p>\n<p><span style=\"font-weight: 400;\">NOTION_INTEGRATION_TOKEN = <\/span><span style=\"font-weight: 400;\">&#8216;your Integration secret token&#8217;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">NOTION_DATABASE_ID = <\/span><span style=\"font-weight: 400;\">&#8216;database ID&#8217;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open the index.js file in the server project<\/span><\/li>\n<\/ul>\n<p><b>const<\/b><span style=\"font-weight: 400;\"> express = <\/span><span style=\"font-weight: 400;\">require<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">&#8216;express&#8217;<\/span><span style=\"font-weight: 400;\">);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> {Client} = <\/span><span style=\"font-weight: 400;\">require<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">&#8216;@notionhq\/client&#8217;<\/span><span style=\"font-weight: 400;\">);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> cors = <\/span><span style=\"font-weight: 400;\">require<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">&#8216;cors&#8217;<\/span><span style=\"font-weight: 400;\">);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> bodyParser = <\/span><span style=\"font-weight: 400;\">require<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">&#8216;body-parser&#8217;<\/span><span style=\"font-weight: 400;\">);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> jsonParser = bodyParser.json();<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> port = process.env.PORT || <\/span><span style=\"font-weight: 400;\">8000<\/span><span style=\"font-weight: 400;\">;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">require<\/span><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">&#8216;dotenv&#8217;<\/span><span style=\"font-weight: 400;\">).config();<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> app = express();<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">app.use(cors());<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> authToken = process.env.NOTION_INTEGRATION_TOKEN;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> notionDbID = process.env.NOTION_DATABASE_ID;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>const<\/b><span style=\"font-weight: 400;\"> notion = <\/span><b>new<\/b><span style=\"font-weight: 400;\"> Client ({<\/span><span style=\"font-weight: 400;\">auth<\/span><span style=\"font-weight: 400;\">: authToken});<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">app.post(<\/span><span style=\"font-weight: 400;\">&#8216;\/NotionAPIPost&#8217;<\/span><span style=\"font-weight: 400;\">, jsonParser, <\/span><b>async<\/b><span style=\"font-weight: 400;\">(req, res) =&gt; {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002<\/span><b>const<\/b><span style=\"font-weight: 400;\"> {Fullname, CompanyRole, Location} = req.body;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002<\/span><b>try<\/b><span style=\"font-weight: 400;\"> { <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/span><b>const<\/b><span style=\"font-weight: 400;\"> response = <\/span><b>await<\/b><span style=\"font-weight: 400;\"> notion.pages.create({<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002parent: {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002database_id: notionDbID,<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002properties: {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002Fullname: {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002title: [<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002{<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002text: {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002content: Fullname<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002],<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002CompanyRole: {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002rich_text: [<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002{<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002text: {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002content: CompanyRole<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002],<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002Location: {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002rich_text: [<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002{<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002text: {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002content: Location<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002],<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002});<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002res.send(response);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/span><span style=\"font-weight: 400;\">console<\/span><span style=\"font-weight: 400;\">.log(<\/span><span style=\"font-weight: 400;\">&#8220;success&#8221;<\/span><span style=\"font-weight: 400;\">);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002} <\/span><b>catch<\/b><span style=\"font-weight: 400;\"> (error) {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/span><span style=\"font-weight: 400;\">console<\/span><span style=\"font-weight: 400;\">.log(error);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002}<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">});<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">app.get(<\/span><span style=\"font-weight: 400;\">&#8216;\/NotionAPIGet&#8217;<\/span><span style=\"font-weight: 400;\">, <\/span><b>async<\/b><span style=\"font-weight: 400;\">(req, res) =&gt; {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002<\/span><b>try<\/b><span style=\"font-weight: 400;\"> { <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/span><b>const<\/b><span style=\"font-weight: 400;\"> response = <\/span><b>await<\/b><span style=\"font-weight: 400;\"> notion.databases.query({<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002database_id: notionDbID, <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002sorts: [<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002{<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002timestamp: <\/span><span style=\"font-weight: 400;\">&#8216;created_time&#8217;<\/span><span style=\"font-weight: 400;\">,<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002direction: <\/span><span style=\"font-weight: 400;\">&#8216;descending&#8217;<\/span><span style=\"font-weight: 400;\">,<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002},<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002]<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002});<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002res.send(response);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/span><b>const<\/b><span style=\"font-weight: 400;\"> {results} = response;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/span><span style=\"font-weight: 400;\">console<\/span><span style=\"font-weight: 400;\">.log(<\/span><span style=\"font-weight: 400;\">&#8220;success&#8221;<\/span><span style=\"font-weight: 400;\">);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002} <\/span><b>catch<\/b><span style=\"font-weight: 400;\"> (error) {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002<\/span><span style=\"font-weight: 400;\">console<\/span><span style=\"font-weight: 400;\">.log(error);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002}<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">});<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">app.listen(port, () =&gt; {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002<\/span><span style=\"font-weight: 400;\">console<\/span><span style=\"font-weight: 400;\">.log(<\/span><span style=\"font-weight: 400;\">&#8216;server listening on port 8000!&#8217;<\/span><span style=\"font-weight: 400;\">);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">});<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the monitor\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">npm start<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Set up React Client<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">npm install axios<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implement the POST and GET API Methods<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Open the src\/App.js file and replace the code<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import React, { useState} from &#8216;react&#8217;;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">import Axios from &#8216;axios&#8217;;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">function App() {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002const [name, setName] = useState(&#8220;&#8221;);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002const [role, setRole] = useState(&#8220;&#8221;);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002const [location, setLocation] = useState(&#8220;&#8221;);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002const [APIData, setAPIData] = useState([]);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002const handleSubmit = (e) =&gt; {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002e.preventDefault();<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002Axios.post(&#8216;<\/span><a href=\"http:\/\/localhost:8000\/NotionAPIPost\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">http:\/\/localhost:8000\/NotionAPIPost<\/span><\/a><span style=\"font-weight: 400;\">&#8216;, {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002Fullname: name,<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002CompanyRole:role,<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002Location:location<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002}).catch(error =&gt; {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002console.log(error);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002});<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002Axios.get(&#8216;<\/span><a href=\"http:\/\/localhost:8000\/NotionAPIGet\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">http:\/\/localhost:8000\/NotionAPIGet<\/span><\/a><span style=\"font-weight: 400;\">&#8216;)<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002.then(response =&gt; {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002setAPIData(response.data.results);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002console.log(response.data.results);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002}).catch(error =&gt; { <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002console.log(error);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002}); <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002};<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002return (<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002&lt;div className=&#8221;App&#8221;&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002&lt;header className=&#8221;App-header&#8221;&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;div className=&#8221;form&#8221;&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;form onSubmit={handleSubmit}&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;p&gt;First Name&lt;\/p&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;input<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002type=&#8221;text&#8221; <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002placeholder=&#8221;First name &#8230;&#8221;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002onChange={(e) =&gt; {setName(e.target.value)}}<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\/&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;p&gt;Company Role&lt;\/p&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;input <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002type=&#8221;text&#8221; <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002placeholder = &#8220;Company Role&#8230;.&#8221; <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002onChange={(e) =&gt; {setRole(e.target.value)}}<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\/&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;p&gt; Company Role&lt;\/p&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;input <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002type=&#8221;text&#8221; <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002placeholder = &#8220;Location&#8230;.&#8221; <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002onChange={(e) =&gt; {setLocation(e.target.value)}}<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\/&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;button type=&#8221;submit&#8221;&gt;Submit&lt;\/button&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;\/form&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;\/div&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;div className=&#8221;Data&#8221;&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;p&gt;API DATA&lt;\/p&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002{<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002APIData.map((data) =&gt; {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002return (<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;div key={data.id}&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;p&gt;Name: {data.properties.Fullname.title[0].plain_text}&lt;\/p&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;p&gt;Role: {data.properties.CompanyRole.rich_text[0].plain_text}&lt;\/p&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;p&gt;Location: {data.properties.Location.rich_text[0].plain_text}&lt;\/p&gt; <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;\/div&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002)<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002})<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002}<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002\u2002\u2002&lt;\/div&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002\u2002\u2002&lt;\/header&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002\u2002\u2002&lt;\/div&gt;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2002\u2002);<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">}<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">export default App;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This section allows you to submit their name, role and user information.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Start the React&#8217;s development server and go to local host<\/span><span style=\"font-weight: 400;\">\u00a0on your browser to view results.<\/span><\/li>\n<\/ul>\n<h3><b>How to use Notion API iOS<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Start by creating Notion integration and create your Notion DB. Copy Notion API Key and database_ID<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Install Notion API for iOS. You can install it from the pod.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">pod &#8216;NotionClient&#8217;, &#8216;0.0.1&#8217;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use following Notion API to fetch the database values<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">let client = NotionClient.init(token: &#8220;<\/span><b>NOTION_INTEGRATION_SECRET_TOKEN<\/b><span style=\"font-weight: 400;\">&#8220;)client.queryDatabase(withId: &#8220;<\/span><b>NOTION_DATABASE_ID<\/b><span style=\"font-weight: 400;\">&#8220;) { (data, error) inprint(data)}<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Replace the <\/span><span style=\"font-weight: 400;\">NOTION_INTEGRATION_SECRET_TOKEN with the API key and <\/span><span style=\"font-weight: 400;\">NOTION_DATABASE_ID by databse_ID.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Once you have replaced these values, you can run the code and it will fetch the database values from Notion<\/span><\/p>\n<h3><b>How to use Notion API Typescript<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Go up to Notion developer portal and create a new integration. The API key and secret key you&#8217;ll need to authenticate your requests will be sent to you as a result. You require a Notion database for storing and fetching data.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Set up a new TypeScript project. You can use a project generator like <\/span><span style=\"font-weight: 400;\">Create React App or set up a project manually.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">npx create-next-app blog_app \u2013ts<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The\u00a0<\/span><span style=\"font-weight: 400;\">&#8211;ts<\/span><span style=\"font-weight: 400;\">\u00a0flag allows your app to run using Typescript. This command will create a basic Next.js app inside the folder\u00a0<\/span><span style=\"font-weight: 400;\">blog_app<\/span><span style=\"font-weight: 400;\">. Once the process is done, navigate to the\u00a0<\/span><span style=\"font-weight: 400;\">blog_app<\/span><span style=\"font-weight: 400;\">\u00a0folder using the command\u00a0<\/span><span style=\"font-weight: 400;\">cd blog_app<\/span><span style=\"font-weight: 400;\">\u00a0and install the notion client package:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npm install @notionhq\/client<\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the project root folder, create a\u00a0<\/span><span style=\"font-weight: 400;\">.env<\/span><span style=\"font-weight: 400;\">\u00a0file. This file will host the notion integration key that Next.js needs to access and connect with the notion API. Go ahead and add the two notion variables, the integration token key and the database id:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">export NOTION_KEY=&#8221;your_notion_api_key&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">export NOTION_DATABASE=&#8221;your_notion_database_id&#8221;\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Replace your_notion_api_key with your actual Notion API Key and your_notion_database_id with your actual Notion database ID.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can now access these environment variables in your code using <\/span><b>process.env.NOTION_KEY<\/b><span style=\"font-weight: 400;\"> and <\/span><b>process.env.NOTION_DATABASE<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Start the development server to test the app<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npm run dev<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Go <a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noopener\">here<\/a><\/span><span style=\"font-weight: 400;\">; you should be able to view the default Next.js page.<\/span><\/p>\n<h3><b>How to use Flutter Notion API<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Set up a Notion integration using methods mentioned in the previous section.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Install the Notion_API package<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">flutter pub get notion_api<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Import the Notion_API package<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">import &#8216;package:notion_api\/notion_api.dart&#8217;;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create a new instance of the Client class and all the API requests will be available as a class properties method.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">NotionClient notion = NotionClient(token: &#8216;YOUR SECRET TOKEN FROM INTEGRATIONS PAGE&#8217;);<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use the NotionClient object to access the Notion API<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">final page = await notionClient.getPage(&#8216;YOUR_PAGE_ID&#8217;);<\/span><\/p>\n<h3><b>How to use Golang Notion API<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Start by setting up your Notion integration and get the API key and database_id.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Set up your new Go module. Open the terminal and navigate to your project directory to initialize a new Go module.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">$ go get github.com\/jomei\/notionapi<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create a new client object<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">import &#8220;github.com\/jomei\/notionapi&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">client := notionapi.NewClient(&#8220;your-integration-token&#8221;)<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use the client\u2019s method to retrieve or update your content<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">page, err := client.Page.Get(context.Background(), &#8220;your-page-id&#8221;)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">if err != nil {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\/\/ do something<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Handle errors if any<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">if (error != null) {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\/\/ Handle error<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<h3><b>How to use Next.js Notion API<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Set up a Notion integration using methods mentioned in the previous section. This will give you the API key required to authenticate your requests.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Set up a new Next.js project \u2013 you can use Next.js CLI or create a new project manually.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open a terminal and install required dependencies.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">npm install notion-api-js<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In your Next.Js project create a file to handle API requests. Import the necessary modules and define functions to interact with the Notion API.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">import { Client } from &#8216;@notionhq\/client&#8217;;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\/\/ Create a new Notion client with your API key<\/span><\/p>\n<p><span style=\"font-weight: 400;\">const notion = new Client({ auth: process.env.NOTION_API_KEY });<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\/\/ Fetch a Notion database by its ID<\/span><\/p>\n<p><span style=\"font-weight: 400;\">export async function fetchDatabase(databaseId) {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0return notion.databases.retrieve({ database_id: databaseId });<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\/\/ Fetch a Notion page by its ID<\/span><\/p>\n<p><span style=\"font-weight: 400;\">export async function fetchPage(pageId) {<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0return notion.pages.retrieve({ page_id: pageId });<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Replace the database ID and API_key the actual ID and key from your Notion App.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Start your server with<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">npm run dev<\/span><\/p>\n<p><span style=\"font-weight: 400;\"># or<\/span><\/p>\n<p><span style=\"font-weight: 400;\">yarn dev<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can verify the results in <a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/span><\/p>\n<p style=\"text-align: center;\"><strong>Also read:\u00a0<a href=\"https:\/\/unremot.com\/blog\/how-to-use-shopify-api\/\">How to use Shopify API; a step-by-step integration guide and full documentation list<\/a><\/strong><\/p>\n<h2><b>Notion API pricing<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Does Notion have an API? Yes, Notion does have an API.\u00a0 It is a Restful API that allows developers to interact with Notion\u2019s database, pages, and content.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Is Notion free? Yes, developers can use the Notion API for commercial and personal projects. Notion does have paid models.\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><span style=\"font-weight: 400;\">Free<\/span><\/td>\n<td>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Collaborative workspace<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Integrate with Slack, GitHub &amp; more<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Basic page analytics<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">7 day page history<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Invite 10 guests<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Plus (for small groups)\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">$8 per user\/per month billed annually $10 billed monthly<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Everything in Free, and<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Unlimited blocks for teams<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Unlimited file uploads<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">30 day page history<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Invite 100 guests<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Business (For companies using Notion to connect with several teams and tools)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">$15 per user\/per month billed annually<\/span><\/p>\n<p><span style=\"font-weight: 400;\">$18 billed monthly<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Everything in Plus, and<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">SAML SSO<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Private teamsspaces<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bulk PDF export<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Advanced page analytics<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">90 day page history<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Invite 250 guests<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Enterprise\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">Advanced controls &amp; support to run your entire organization.)<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Everything in Business, and<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">User provisioning (SCIM)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Advanced security &amp; controls<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Audit log<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dedicated success manager (100+ seats)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Workspace analytics<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Unlimited page history<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Custom guest limit<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: center;\"><strong>Also read:\u00a0<a href=\"https:\/\/unremot.com\/blog\/how-to-use-stripe-api\/\">How to use Stripe API &amp;#8211; a step-by-step integration guide and full documentation list<\/a><\/strong><\/p>\n<h2><b>Most used Notion APIs<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The most used <a href=\"https:\/\/unremot.com\/category\/notion-api\">Notion APIs<\/a> are\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Notion Database API:<\/strong> The Notion database API is core how information is stored in Notion. You can use the API to interact with the Notion database, get specific database entries, update or delete entries, and get a list of all entries.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Notion pages API:<\/strong> You can use the Notion page API to interact with pages. It can help create new page, set page properties or retrieve page properties.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Notion block API<\/strong>: <\/span><span style=\"font-weight: 400;\">A block object represents a piece of content within Notion.\u00a0<\/span><span style=\"font-weight: 400;\">The API translates the headings, toggles, paragraphs, lists, media, and more that you can interact with in the Notion UI as different block type objects<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Notion Search API:<\/strong> The API searches all the parent and child pages that has been shared with the integration. It returns all the pages, blocks and database.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Notion Integration API:<\/strong> The Notion integration API lets you connect Notion with other software.\u00a0<\/span><\/li>\n<\/ul>\n<h3><b>Notion API create page<\/b><\/h3>\n<p><a href=\"https:\/\/developers.notion.com\/reference\/post-page\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Notion API create page<\/span><\/a><span style=\"font-weight: 400;\"> creates a new page that is a child of a existing page or a database. If the new page is a child of an existing page is the only valid property in the properties body param.\u00a0<\/span><\/p>\n<h3><b>Notion API get page content<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The Notion API get page content or <\/span><a href=\"https:\/\/developers.notion.com\/docs\/working-with-page-content\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">working with page content<\/span><\/a><span style=\"font-weight: 400;\"> allows you to read page content using the retrieve block children endpoint. The end point returns the list of children for any block that has children.\u00a0<\/span><\/p>\n<h3><b>Notion API update page<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The Notion API<\/span><a href=\"https:\/\/developers.notion.com\/reference\/patch-page\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\"> update page<\/span><\/a><span style=\"font-weight: 400;\">\u00a0updates the properties page in the database. The properties body param of this end point can be used to update the properties of a page that is child of the database.\u00a0<\/span><\/p>\n<h3><b>Notion API export<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">You can <\/span><a href=\"https:\/\/www.notion.so\/help\/export-your-content\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">export<\/span><\/a><span style=\"font-weight: 400;\"> a Notion page, database, or entire workspace <\/span><span style=\"font-weight: 400;\">in a variety of formats, including CSV, JSON, and Markdown. To export data, you can use the following steps:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click the\u00a0<\/span><span style=\"font-weight: 400;\">\u2022\u2022\u2022<\/span><span style=\"font-weight: 400;\">\u00a0icon at the upper right corner of any Notion page.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choose\u00a0<\/span><span style=\"font-weight: 400;\">Export<\/span><span style=\"font-weight: 400;\">\u00a0from the dropdown menu.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A window will pop up in the center of your screen. Select PDF from the dropdown menu.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the <\/span><i><span style=\"font-weight: 400;\">include content<\/span><\/i><span style=\"font-weight: 400;\"> drop down, specify if you want to export everything or exclude files or images.<\/span><\/li>\n<\/ul>\n<h3><b>Notion API multi select<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">You can now dynamically create new options for select or <\/span><a href=\"https:\/\/developers.notion.com\/changelog\/select-values-can-now-be-dynamically-created-via-create-and-update-page-endpoints-other-updates-since-public-beta-launch\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">multiple_select<\/span><\/a><span style=\"font-weight: 400;\"> properties using the create_page and update_page endpoints.\u00a0<\/span><\/p>\n<h3><b>Notion API table<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The Notion API table has been added to the Notion API under <\/span><a href=\"https:\/\/developers.notion.com\/changelog\/simple-table-support\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Simple table<\/span><\/a><span style=\"font-weight: 400;\">. Tables are parent blocks for table row. They can contain only children of type table_row.\u00a0<\/span><\/p>\n<h3><b>Notion API images<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">You can <\/span><a href=\"https:\/\/developers.notion.com\/docs\/working-with-files-and-media\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">add external files and other media<\/span><\/a><span style=\"font-weight: 400;\"> to the Notion using the API. Coders are responsible for the assets and making it available via a secured URL. Details of how to add files and media are available on the API.\u00a0<\/span><\/p>\n<h3><b>Notion API filter<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">When you send query to the database, you can send a <\/span><a href=\"https:\/\/developers.notion.com\/reference\/post-database-query-filter\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">filter<\/span><\/a><span style=\"font-weight: 400;\"> object in the body that limits the returned answers based on the specified criteria.\u00a0<\/span><\/p>\n<h3><b>Notion API search<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The Notion <\/span><a href=\"https:\/\/api.notion.com\/v1\/search\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">API search<\/span><\/a><span style=\"font-weight: 400;\"> allows you to search the page and database shared in the integration. It returns all pages and databases, excluding duplicate linked database. <\/span><span style=\"font-weight: 400;\">You can search by title, content, and property values.<\/span><\/p>\n<h3><b>Notion API database id<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The Notion API database id is a unique identifier that is assigned to each database in a Notion workspace. The database id can be used to make requests to the Notion API to access and manipulate data in the database.<\/span><\/p>\n<h3><b>Notion API relation<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">While creating or updating your database, you can now add<\/span><a href=\"https:\/\/developers.notion.com\/changelog\/relation-and-rollup-properties-can-now-be-created-in-databases\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\"> relation<\/span><\/a><span style=\"font-weight: 400;\"> and rollup property. The related database must also be shared with the integration.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article will discuss about how to use Notion API with step-by-step integration guide and full documentation list. Let&#8217;s get started! Overview of Notion API Notion is a web-based productivity and note-taking application. It offers several organizational tools such as \u2013 task management, project tracking, to-do-lists, bookmarking, and much more. Developers and coders can use [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":5270,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[76],"tags":[],"class_list":{"0":"post-5260","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-technology","8":"entry"},"_links":{"self":[{"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/posts\/5260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/comments?post=5260"}],"version-history":[{"count":6,"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/posts\/5260\/revisions"}],"predecessor-version":[{"id":5269,"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/posts\/5260\/revisions\/5269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/media\/5270"}],"wp:attachment":[{"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/media?parent=5260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/categories?post=5260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unremot.com\/blog\/wp-json\/wp\/v2\/tags?post=5260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}