Merge branch 'docs/bubble'

docs/nodes/credentials/Bubble/README.md

@@ -0,0 +1,38 @@
+---
+permalink: /credentials/bubble
+description: Learn to configure credentials for the Bubble node in n8n
+---
+
+# Bubble
+
+You can use these credentials to authenticate the following nodes with Bubble.
+- [Bubble](../../nodes-library/nodes/Bubble/README.md)
+
+## Prerequisites
+
+Create a [Bubble](https://bubble.io) account.
+
+**Note:** You need a Personal or a higher plan to get access to the Bubble API.
+
+## Using API Key
+
+1. Open your Bubble [dashboard](https://bubble.io/home) page.
+2. Select an app under the ***My apps*** section to open the app.
+3. Click on ***Settings*** on the left-sidebar.
+4. Click on the ***API*** tab.
+5. Click on the ***Generate a new API token*** button.
+6. Enter a token name in the ***API Token Label*** field.
+7. Copy the displayed Private Key.
+8. Enter the name for your credentials in the ***Credentials Name*** field in the 'Bubble API' credentials in n8n.
+9. Paste the Private Key in the ***API Token*** field in the 'Bubble API' credentials in n8n.
+10. Enter the app name in the ***APP Name*** field.
+11. Select 'Development' from the ***Environment*** dropdown list. If you want to use the 'Live' environment, select 'Live' instead.
+12. Click on the ***Create*** button to create your credentials.
+
+**Note:** If you're self-hosting your Bubble app, select 'Self-hosted' from the ***Hosting*** dropdown list. You will also need to enter the domain of your hosted instance in the ***Domain*** field.
+
+The following video demonstrates the steps mentioned above.
+
+<div class="video-container">
+    <iframe width="840" height="472.5" src="https://www.youtube.com/embed/ZK3YDchpb1U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

docs/nodes/nodes-library/nodes/Bubble/README.md

@@ -0,0 +1,89 @@
+---
+permalink: /nodes/n8n-nodes-base.bubble
+description: Learn how to use the Bubble node in n8n
+---
+
+# Bubble
+
+[Bubble](https://www.bubble.io/) lets you create interactive, multi-user apps for desktop and mobile web browsers.
+
+::: tip 🔑 Credentials
+You can find authentication information for this node [here](../../../credentials/Bubble/README.md).
+:::
+
+## Basic Operations
+
+::: details Object
+- Create an object
+- Delete an object
+- Get an object
+- Get all objects
+- Update an object
+:::
+
+## Example Usage
+
+This workflow allows you to create, update, and get an object from Bubble. You can also find the [workflow](https://n8n.io/workflows/1041) on n8n.io. This example usage workflow would use the following nodes.
+- [Start](../../core-nodes/Start/README.md)
+- [Bubble]()
+
+The final workflow should look like the following image.
+
+![A workflow with the Bubble node](./workflow.png)
+
+### 1. Start node
+
+The start node exists by default when you create a new workflow.
+
+### 2. Bubble node (create: object)
+
+This node will create a new object of the type `Doc` in Bubble. If you want to create an object with a different type, use that type instead.
+
+1. First of all, you'll have to enter credentials for the Bubble node. You can find out how to do that [here](../../../credentials/Bubble/README.md).
+2. Select 'Create' from the ***Operation*** dropdown list.
+3. Enter `Doc` in the ***Type Name*** field.
+4. Click on the ***Add Property*** button.
+5. Enter `Name` in the ***Key*** field. If you're using a different type, enter the field name present in the type.
+6. Enter `Bubble` in the ***Value*** field.
+7. Click on ***Execute Node*** to run the node.
+
+In the screenshot below, you will notice that the node creates a new object of the type `Doc` in Bubble.
+
+![Using the Bubble node to create a new object](./Bubble_node.png)
+
+
+### 3. Bubble1 node (update: object)
+
+This node will update the object that we created using the previous node.
+::: v-pre
+1. Select the credentials that you entered in the previous Bubble node.
+2. Select 'Update' from the ***Operation*** dropdown list.
+3. Click on the gears icon next to the ***Type Name*** field and click on ***Add Expression***.
+4. Select the following in the ***Variable Selector*** section: Nodes > Bubble > Parameters > typeName. You can also add the following expression: `{{$node["Bubble"].parameter["typeName"]}}`.
+5. Click on the gears icon next to the ***Object ID*** field and click on ***Add Expression***.
+6. Select the following in the ***Variable Selector*** section: Current Node > Input Data > JSON > id. You can also add the following expression: `{{$json["id"]}}`.
+6. Click on the ***Add Property*** button.
+7. Enter `Name` in the ***Key*** field. If you're using a different type, enter the field name present in the type.
+8. Enter `Bubble node` in the ***Value*** field.
+9. Click on ***Execute Node*** to run the node.
+:::
+
+In the screenshot below, you will notice that the node updates the information of the object that got created previously.
+
+![Using the Bubble node to update the information of an object](./Bubble1_node.png)
+
+### 4. Bubble2 node (get: object)
+
+This node will retrieve the information of the object that we created earlier.
+
+::: v-pre
+1. Select the credentials that you entered in the previous Bubble node.
+2. Click on the gears icon next to the ***Type Name*** field and click on ***Add Expression***.
+3. Select the following in the ***Variable Selector*** section: Nodes > Bubble > Parameters > typeName. You can also add the following expression: `{{$node["Bubble"].parameter["typeName"]}}`.
+4. Click on the gears icon next to the ***Object ID*** field and click on ***Add Expression***.
+5. Select the following in the ***Variable Selector*** section: Nodes > Bubble > Output Data > JSON > id. You can also add the following expression: `{{$node["Bubble"].json["id"]}}`.
+6. Click on ***Execute Node*** to run the node.
+
+In the screenshot below, you will notice that the node retrieves the information of the object that we created earlier.
+
+![Using the Bubble node to retrieve the information of an object](./Bubble2_node.png)