Evernote

Before writing a single Bubble workflow, you need two things: an API key from Evernote's developer program and a long-lived OAuth 1.0a access token. The API key gives your application permission to call Evernote's servers at all. The access token is the credential you'll paste into Bubble. Go to dev.evernote.com and click 'Get an API key'. Fill in your application name, a short description, and your contact email. Choose 'Full Access' scope if you want both read and write capabilities. Submit the form — Evernote staff reviews applications and you'll receive an approval email within 1–5 business days. A sandbox key (for sandbox.evernote.com) is available immediately so you can start building immediately. Once you have your Consumer Key and Consumer Secret, open Postman and create a new request. Use Postman's built-in OAuth 1.0 authorization type: set Signature Method to HMAC-SHA1, enter your Consumer Key and Consumer Secret, and set the request URLs to Evernote's sandbox OAuth endpoints (https://sandbox.evernote.com/oauth). Follow the three-step OAuth 1.0a flow (request token → authorize → access token). Copy the final access token string — it is a long hex string that looks like `S=s1:U=123abc:E=...`. For production (non-sandbox), repeat the same process with the production OAuth URLs at evernote.com after your API key is approved. The production access token does not expire unless you manually revoke it in your Evernote account → Settings → Connected Apps.

1{
2  "oauth_flow": {
3    "step_1_request_token": "GET https://sandbox.evernote.com/oauth?oauth_consumer_key={YOUR_KEY}&oauth_signature_method=HMAC-SHA1&oauth_timestamp={ts}&oauth_nonce={nonce}&oauth_version=1.0&oauth_signature={sig}&oauth_callback=oob",
4    "step_2_authorize": "https://sandbox.evernote.com/OAuth.action?oauth_token={request_token}",
5    "step_3_access_token": "GET https://sandbox.evernote.com/oauth?oauth_token={auth_token}&oauth_verifier={verifier}&oauth_signature_method=HMAC-SHA1&oauth_consumer_key={YOUR_KEY}&oauth_signature={sig}"
6  },
7  "result": {
8    "oauth_token": "S=s1:U=XXXXXX:E=XXXXXXXXXX:C=XXXXXXXXXX:P=1cd:A=en_oauth:H=XXXXXXXXXX",
9    "note_about_expiry": "This token does not expire unless manually revoked"
10  }
11}

With your access token in hand, you can now configure Bubble's API Connector. The key principles are: the token goes into a Private header so it stays server-side, and the base URL points to evernote.com (not the sandbox, unless you're still testing) because all call paths are dynamic. In your Bubble app, go to the Plugins tab in the left sidebar. Click 'Add plugins', search for 'API Connector', and install the free Bubble-built plugin. Once installed, click 'API Connector' in the Plugins list to open its configuration panel. Click 'Add another API'. Name it 'Evernote'. Set the base URL to `https://www.evernote.com` (for sandbox testing: `https://sandbox.evernote.com`). Leave authentication type as 'None' — you'll handle auth manually via a custom header. Click 'Add a shared header'. In the key field, type `Authorization`. In the value field, type `Bearer ` followed by your access token (note the space after Bearer). Click the lock icon or check the 'Private' checkbox next to this header — this marks it as a server-side credential that Bubble will never send to the browser, even in error messages or network logs visible to your users. Also click 'Ignore empty parameters' — this keeps Evernote calls clean when optional parameters are not provided. Do NOT add a trailing slash to the base URL. Evernote's endpoint paths will be specified at the individual call level.

1{
2  "connector_name": "Evernote",
3  "base_url": "https://www.evernote.com",
4  "shared_headers": [
5    {
6      "key": "Authorization",
7      "value": "Bearer S=s1:U=XXXXXX:E=XXXXXXXXXX:...",
8      "private": true
9    }
10  ],
11  "settings": {
12    "ignore_empty_parameters": true
13  }
14}

This is the most Evernote-specific step in the entire integration. Unlike every other API where you can start calling data endpoints immediately, Evernote requires you to first fetch the user's NoteStore URL — a dynamic per-account path like `https://www.evernote.com/shard/s1/notestore` — before you can make any NoteStore calls. This URL is the base for all notebook and note operations. Inside the Evernote API Connector group you just created, click 'Add another call'. Name it 'Get User Info'. Set the method to GET and the path to `/edam/user`. Leave the parameters empty. Click 'Initialize call' — Bubble will send a real request with your token to Evernote's servers. You should see a JSON response containing fields like `id`, `username`, `name`, `noteStoreUrl`, and `webApiUrlPrefix`. Confirm the initialization by clicking 'Save'. Now you have the response schema mapped. Bubble detected `noteStoreUrl` as a text field in the response. Next, set up your Bubble page to fetch and store the NoteStore URL on page load. In the Workflow editor for your page, add a trigger 'When page is loaded'. Add the action 'Plugins → Evernote - Get User Info'. In the 'On success' section, add the action 'Set state' on a custom state you've created on the page (or a hidden text element): name it 'noteStoreUrl', type Text. Set its value to 'Result of step 1's noteStoreUrl'. This custom state is now available throughout your page's workflows. All subsequent NoteStore calls will reference it dynamically — you don't hardcode the NoteStore URL anywhere in Bubble.

1{
2  "call_name": "Get User Info",
3  "method": "GET",
4  "path": "/edam/user",
5  "params": [],
6  "sample_response": {
7    "id": 12345678,
8    "username": "janefounder",
9    "name": "Jane Founder",
10    "noteStoreUrl": "https://www.evernote.com/shard/s1/notestore",
11    "webApiUrlPrefix": "https://www.evernote.com/shard/s1/"
12  },
13  "bubble_page_load_workflow": {
14    "trigger": "Page is loaded",
15    "step_1": "Plugins → Evernote - Get User Info",
16    "step_2": "Set state: page's noteStoreUrl = Result of step 1's noteStoreUrl"
17  }
18}

With the NoteStore URL stored in a custom state, you can now add the two key data calls: listing notebooks (for a filter dropdown) and searching notes (for the main content repeating group). Add a second call inside the Evernote connector. Name it 'List Notebooks'. Set the method to GET and the path to `<noteStoreUrl>/NoteStore/listNotebooks` — in Bubble API Connector, use a dynamic path parameter: put `<noteStoreUrl>` as a path variable named `noteStoreUrl` (Bubble treats path segments starting with `<` as dynamic parameters). This means the complete URL at runtime will be, for example, `https://www.evernote.com/shard/s1/notestore/NoteStore/listNotebooks`. For the Initialize call on List Notebooks, you must provide a real NoteStore URL as the test value for the path parameter. Type your actual NoteStore URL (from the /edam/user response in step 3) and click Initialize. Bubble will return a JSON array of notebook objects, each containing `guid`, `name`, `updateSequenceNum`, and other metadata. Next, add a third call: 'Find Notes'. Method: POST. Path: `<noteStoreUrl>/NoteStore/findNotesMetadata`. Set body type to JSON. Set Content-Type header to `application/json`. The body should contain a dynamic `filter` object and a `maxNotes` parameter: ```json { "filter": { "words": "<searchQuery>", "notebookGuid": "<notebookGuid>" }, "offset": 0, "maxNotes": 20, "resultSpec": { "includeTitle": true, "includeContentLength": true, "includeCreated": true, "includeSnippet": true } } ``` Make `searchQuery` and `notebookGuid` dynamic parameters (mark them as optional so either can be blank). Initialize with your real NoteStore URL and a sample notebook GUID from the listNotebooks response. Bubble will detect fields like `notes` (an array), `totalNotes` (integer), and within each note: `guid`, `title`, `created` (millisecond timestamp), `snippet`.

1{
2  "call_list_notebooks": {
3    "name": "List Notebooks",
4    "method": "GET",
5    "path": "<noteStoreUrl>/NoteStore/listNotebooks",
6    "dynamic_params": [
7      { "key": "noteStoreUrl", "type": "path", "example": "https://www.evernote.com/shard/s1/notestore" }
8    ]
9  },
10  "call_find_notes": {
11    "name": "Find Notes",
12    "method": "POST",
13    "path": "<noteStoreUrl>/NoteStore/findNotesMetadata",
14    "headers": [
15      { "key": "Content-Type", "value": "application/json" }
16    ],
17    "body": {
18      "filter": {
19        "words": "<searchQuery>",
20        "notebookGuid": "<notebookGuid>"
21      },
22      "offset": 0,
23      "maxNotes": 20,
24      "resultSpec": {
25        "includeTitle": true,
26        "includeCreated": true,
27        "includeSnippet": true
28      }
29    }
30  }
31}

Now assemble the Bubble UI. The pattern is: a notebook dropdown drives the note search, and clicking a note title opens full content in a popup HTML element. On your Bubble page, add a Dropdown element and populate its options with data from 'Evernote - List Notebooks'. Set its option caption to 'notebook's name' and value to 'notebook's guid'. Add a workflow: When Dropdown's value is changed → run 'Evernote - Find Notes' with notebookGuid = Dropdown's value and noteStoreUrl = page's noteStoreUrl custom state. Store the result in a custom state 'notesList' (list of Evernote Find Notes result). Below the dropdown, add a Repeating Group. Set its type to 'Evernote Find Notes result notes' (the nested list Bubble detected from the `notes` array). Data source: page's notesList's notes. Inside the repeating group cell: add a Text element showing 'Current cell's note's title'. Add a smaller text showing 'Current cell's note's created' formatted as a date. Add a text for the snippet. Add a Popup element to your page. Inside the popup, add an HTML element (from Bubble's visual editor, it's in the 'HTML' category under UI elements). This HTML element will render ENML content. Add a workflow: When repeating group cell's title text is clicked → Show popup → set a custom state 'selectedNoteContent' to the clicked note's ENML content (you'll need to add a separate 'Get Note Content' API call for this, or use the snippet as a preview-only implementation). For ENML stripping in the HTML element, set the element's HTML value to a Bubble expression that removes XML tags using Bubble's text operators: use 'Extract with regex' or a series of 'removed' operators to strip content between `<` and `>` characters. If you need proper ENML rendering, use the raw HTML in the element and let the browser parse the XML-like tags.

1{
2  "repeating_group": {
3    "type": "Evernote Find Notes result notes",
4    "data_source": "page's notesList's notes",
5    "cell_elements": [
6      { "element": "Text", "content": "Current cell's note's title" },
7      { "element": "Text", "content": "Current cell's note's created formatted as MMM DD, YYYY" },
8      { "element": "Text", "content": "Current cell's note's snippet" }
9    ]
10  },
11  "html_element_for_enml": {
12    "type": "HTML element",
13    "html_value": "page's selectedNoteContent",
14    "note": "ENML is XML-based; a Bubble HTML element renders it better than a standard text element. Strip or accept the XML tags depending on how structured the content is."
15  }
16}

Polish the integration by handling three common production scenarios: note pagination for large notebooks, clean ENML content display, and Evernote's RATE_LIMIT_REACHED error response. For pagination: Evernote's findNotesMetadata default maxNotes is 20. To load more, make a second call with offset=20. In Bubble, use a 'Load more' button that: runs 'Find Notes' with the same filters but offset = (page's currentOffset custom state), appends the result to the notesList state (using Bubble's 'Set state: add list'), and increments currentOffset by 20. Stop showing the button when returned notes count < 20 (indicating you've reached the end). For ENML content: ENML looks like HTML but uses Evernote-specific tags (`<en-note>`, `<en-media>`). A Bubble HTML element will render most of it legibly since browsers parse XML tags as generic HTML. For a cleaner display, add a backend workflow (paid plan) that uses Bubble's 'remove all' text operator in a loop to strip known ENML tags. The simplest approach for a read-only portal: display the `snippet` field (plain text, automatically generated by Evernote) as the body summary, and link the note GUID to the Evernote web client for full reading. For rate limit errors: Evernote returns a JSON body `{"errorCode": "RATE_LIMIT_REACHED", "rateLimitDuration": 3600}` when rate limits are hit. In Bubble workflows, add an 'Only when' condition to your note-fetch buttons that checks if the page has been in use for less than 1 minute since the last fetch (using a timestamp custom state). Display a friendly message: 'Evernote rate limit reached — please wait a moment before searching again.' This prevents users from hammering the API. RapidDev's team has built Bubble knowledge-base portals with Evernote and other complex integrations — if you need help with the NoteStore URL pattern or OAuth token acquisition, a free scoping call is available at rapidevelopers.com/contact.

1{
2  "pagination_workflow": {
3    "trigger": "Load more button is clicked",
4    "step_1": "Plugins → Evernote - Find Notes (noteStoreUrl=page's noteStoreUrl, notebookGuid=dropdown's value, offset=page's currentOffset)",
5    "step_2": "Set state: notesList = notesList merged with Result of step 1's notes",
6    "step_3": "Set state: currentOffset = currentOffset + 20"
7  },
8  "rate_limit_error_response": {
9    "errorCode": "RATE_LIMIT_REACHED",
10    "rateLimitDuration": 3600,
11    "message": "You've reached Evernote's API rate limit. Duration is in seconds — show a countdown or a friendly wait message in Bubble."
12  },
13  "enml_display_strategy": {
14    "option_a": "Display snippet field (plain text) as body preview",
15    "option_b": "Place full ENML in Bubble HTML element (browser renders XML tags as generic HTML)",
16    "option_c": "Strip ENML tags in backend workflow using Bubble's 'remove' text operator in a loop (paid plan)"
17  }
18}