Skip to content

Commit 36940b1

Browse files
committed
docs: update Bubble integration images and content
1 parent 4f3b402 commit 36940b1

File tree

7 files changed

+59
-137
lines changed

7 files changed

+59
-137
lines changed
311 KB
Loading
-298 KB
Binary file not shown.
Binary file not shown.
212 KB
Loading
Binary file not shown.
-509 KB
Binary file not shown.
Lines changed: 59 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,194 +1,116 @@
11
---
22
title: Bubble integration
3-
description: Learn how to integrate your Apify Actors with Bubble. This article guides you from installation through to automating your workflow in Bubble.
3+
description: Learn how to integrate your Apify Actors with Bubble for automated workflows and notifications.
44
sidebar_label: Bubble
55
sidebar_position: 7
66
slug: /integrations/bubble
77
---
88

9-
**Learn how to integrate your Apify Actors with Bubble. This article guides you from installation through to automating your workflow in Bubble.**
9+
**Learn how to integrate your Apify Actors with Bubble for automated workflows and notifications.**
1010

1111
---
1212

13-
[Bubble](https://bubble.io/) is a no-code platform that allows you to build web applications without writing code. With the Apify integration for Bubble, you can easily connect your Apify Actors to your Bubble applications, enabling you to scrape data, process it, and display it in your Bubble app.
13+
[Bubble](https://bubble.io/) is a no-code platform that allows you to build web applications without writing code. With the Apify integration for Bubble, you can easily connect your Apify Actors to your Bubble applications to automate workflows and display scraped data.
1414

15-
## Prerequisites
15+
## Get started
1616

17-
Before using the Apify integration with Bubble, you need:
17+
To use the Apify integration for Bubble, you will need:
1818

1919
- An [Apify account](https://console.apify.com/)
2020
- A [Bubble account](https://bubble.io/)
2121
- A Bubble application where you want to use the integration
2222

23-
## Get started
24-
25-
The Apify plugin for Bubble allows you to run Actors, fetch data from datasets, manage key-value stores, and more, all without writing any code.
26-
27-
## Demo Application
28-
29-
We've created a comprehensive demo application that showcases various use cases of the Apify plugin for Bubble. This demo app includes examples of:
30-
31-
- Scraping data from websites
32-
- Running Actors and displaying results
33-
- Managing Actor tasks
34-
- Working with webhooks
35-
- Interacting with key-value stores
36-
- Listing available Actors and tasks
37-
38-
You can explore the demo app to see real-world implementations and get inspiration for your own projects. The demo app provides practical examples that you can adapt for your specific needs.
39-
4023
## Step 1: Install the Apify plugin for Bubble
4124

4225
To integrate Apify with your Bubble application, you first need to install the Apify plugin from the Bubble plugin marketplace.
4326

44-
![Apify Plugin Download](../images/bubble/install_plugin.png)
27+
![Apify Plugin Download](../images/bubble/plugin_install_preview.png)
4528

4629
1. Go to your Bubble application dashboard.
4730
2. Navigate to the "Plugins" tab.
4831
3. Click the "Add plugins" button.
4932
4. Search for "Apify" in the plugin marketplace.
5033
5. Click on the Apify plugin and then click "Install".
5134

52-
## Step 2: Use the Apify plugin
53-
54-
After installing the plugin, it's ready to be used in your Bubble application. Unlike some other plugins, the Apify plugin doesn't require global configuration. Instead, you'll provide your API token each time you use an Apify action in your workflow:
55-
56-
1. When setting up an Apify action in your workflow, you'll be prompted to enter your API token.
57-
2. You can find your API token in the Apify Console under **Settings > Integrations**.
58-
3. For security reasons, it's recommended to store your API token in a Bubble workflow's private field or a custom state that's not exposed to the frontend, rather than entering it directly in each action.
59-
60-
## Step 3: Understanding Data Calls vs. Actions
61-
62-
The Apify plugin for Bubble provides two types of API integrations: Data Calls and Actions. Understanding the difference is crucial for effective implementation:
63-
64-
### Data Calls
65-
66-
Data calls are used to retrieve information from Apify and display it in your Bubble application. These calls can be used as data sources for elements like repeating groups, inputs, or any component that displays data. Data calls don't modify anything - they only fetch and display information.
67-
68-
![Using Data of Apify plugin ](../images/bubble/plugin_data_options_preview.png)
35+
## Step 2: Configure the Apify plugin
6936

70-
![Using Apify data calls](../images/bubble/data_preview.png)
71-
72-
The Apify plugin provides the following data calls:
73-
74-
- **Dataset Operations**
75-
- Fetch Data From Dataset Text As Data
76-
- Fetch Data From Dataset File As Data
77-
- Fetch Data From Dataset Json As Data
78-
- List User Datasets
79-
80-
- **Key-Value Store Operations**
81-
- List Key-Value Stores
82-
- List Store Keys
83-
- Get Record As File
84-
- Get Record As Image File
85-
86-
- **Actor and Task Operations**
87-
- List Store Actors
88-
- List User Actors
89-
- List User Tasks
90-
- List Actor Runs
91-
- List Specific Actor Runs
92-
93-
- **Web Scraping**
94-
- Scrape Single URL As File As Data
95-
- Scrape Single URL As Json As Data
96-
97-
- **Webhook Management**
98-
- List Webhooks
99-
100-
### Actions
37+
After installing the plugin, you'll need to provide your API token when setting up Apify actions:
10138

102-
Actions are used to perform operations that change data or trigger processes. In Bubble, actions are used in workflows that are triggered by events like button clicks, page loads, or scheduled events.
39+
1. You can find your API token in the Apify Console under **Settings > Integrations**.
40+
2. For security, store your API token in a Bubble workflow's private field rather than entering it directly in each action.
10341

104-
![Using Actions of Apify plugin](../images/bubble/plugin_options_preview.png)
42+
## Step 3: Set up automated workflows
10543

106-
![Using Apify action calls](../images/bubble/action_preview.png)
44+
### Trigger Actor runs from Bubble events
10745

108-
The Apify plugin provides the following actions:
46+
Create workflows that automatically run Apify Actors when certain events occur in your Bubble app:
10947

110-
- **Dataset Operations**
111-
- Fetch Data From Dataset Text As Action
112-
- Fetch Data From Dataset File As Action
48+
1. Create a workflow triggered by your preferred event (form submission, button click, page load, etc.)
49+
2. Add the "Run Actor" or "Run Actor Task" action to your workflow
50+
3. Configure the Actor parameters and input data
51+
4. Set up follow-up actions to handle the results
11352

114-
- **Key-Value Store Operations**
115-
- Get Record As Text
53+
### Display Apify data in your application
11654

117-
- **Actor and Task Operations**
118-
- Run Actor
119-
- Run Actor Task
55+
Use Apify data sources to populate your Bubble app with Actor information and results:
12056

121-
- **Web Scraping**
122-
- Scrape Single URL As File As Action
123-
- Scrape Single URL As Json As Action
57+
1. Use data calls like "List User Tasks", "List Actor Runs", or "List Store Actors" as data sources for repeating groups
58+
2. Configure the specific Actor or task you want to display
59+
3. Use "Fetch Data From Dataset Json As Data" to show actual scraped results from your Actor runs
12460

125-
- **Webhook Management**
126-
- Create Webhook
127-
- Delete Webhook
128-
129-
## Step 4: Use Apify in your Bubble application
130-
131-
With the plugin installed, you can start using Apify in your Bubble application through the various data calls and actions provided. Here are some common ways to use the plugin:
132-
133-
- Use data calls to display scraped data in your application
134-
- Set up workflows that trigger Apify Actors using actions
135-
- Create automated processes that fetch and process data regularly
61+
![Using Apify data calls](../images/bubble/data_preview.png)
13662

137-
## Step 5: Example use cases
63+
### Automate data collection workflows
13864

139-
Here are some examples of how you can use the Apify integration in your Bubble application:
65+
Set up recurring data collection that updates your Bubble app automatically:
14066

141-
### Scraping data for your application
67+
1. Create a scheduled workflow or API workflow
68+
2. Use the "Run Actor Task" action to collect fresh data
69+
3. Process and store the results in your Bubble database
70+
4. Update your app's display elements with new data
14271

143-
Use Apify Actors to scrape data from websites and then display that data in your Bubble application. For example, you could scrape product information from e-commerce sites and display it in your own marketplace.
72+
## Step 4: Example use cases
14473

145-
1. Use the "Run Actor" action to trigger a scraping Actor
146-
2. Use the "Fetch Data From Dataset Json As Data" data call to display the results in a repeating group
74+
### E-commerce price monitoring
14775

148-
### Automating workflows
76+
1. Set up a workflow that triggers daily or weekly
77+
2. Use the "Run Actor" action to scrape competitor prices
78+
3. Display the results in your Bubble app's dashboard
79+
4. Set up notifications when prices change significantly
14980

150-
Set up workflows in your Bubble application that trigger Apify Actors based on certain events. For example, you could run a scraper every time a user submits a form.
81+
### Lead generation automation
15182

152-
1. Create a workflow triggered by a form submission
153-
2. Add the "Run Actor Task" action to start your scraping task
154-
3. Process the results using additional actions or workflows
83+
1. Create a form submission workflow
84+
2. Use scraped data to enrich lead information automatically
85+
3. Store enriched data in your Bubble database
86+
4. Trigger follow-up actions based on the enriched data
15587

156-
### Enriching user data
88+
### Content aggregation
15789

158-
Use Apify Actors to enrich your user data with additional information from external sources. For example, you could use an Actor to get social media profiles based on email addresses.
90+
1. Schedule regular Actor runs to collect content from multiple sources
91+
2. Use "Fetch Data From Dataset Json As Data" to display aggregated content
92+
3. Create filtered views based on content categories or dates
15993

160-
1. Create a workflow that triggers when new user data is added
161-
2. Use the "Run Actor" action with appropriate parameters
162-
3. Store the enriched data back in your Bubble database
94+
## Available Apify actions and data sources
16395

164-
## Summary of available features
96+
The Apify plugin provides two main types of operations:
16597

166-
### Data Calls
167-
- Retrieve data from Apify datasets in various formats (text, file, JSON)
168-
- List available datasets, key-value stores, actors, and tasks
169-
- Get records from key-value stores
170-
- List actor runs and webhooks
171-
- Scrape web pages directly
98+
**Actions** (for workflows):
99+
- Run Actor
100+
- Run Actor Task
101+
- Scrape Single URL
102+
- Manage webhooks and data stores
172103

173-
### Actions
174-
- Run Actors and Actor tasks
175-
- Fetch data from datasets
176-
- Get records from key-value stores
177-
- Scrape web pages
178-
- Manage webhooks
104+
**Data Sources** (for displaying information):
105+
- Fetch data from datasets in various formats
106+
- List Actors, tasks, and runs
107+
- Access key-value store records
179108

180109
## Troubleshooting
181110

182-
Here are some common issues you might encounter when using the Apify plugin for Bubble:
183-
184-
- **Authentication errors**: Make sure your API token is correct, in this format "Bearer <api_token>", and has the necessary permissions
185-
- **Data format issues**: When using JSON data, ensure it's properly formatted
186-
- **Performance concerns**: For large datasets, consider pagination or filtering data on the Apify side
187-
- **Missing Actors or tasks**: If you can't find your Actor or task in the dropdown, try running it at least once in the Apify Console
188-
- **Timeout errors**: For actions that take longer to complete, consider using asynchronous runs
189-
190-
## Detailed implementation guide
191-
192-
For a detailed guide on how to implement specific features using the Apify plugin for Bubble, including code examples and best practices, please refer to the next section of this documentation.
111+
- **Authentication errors**: Ensure your API token is in the format "Bearer <api_token>" and has necessary permissions
112+
- **Missing Actors or tasks**: Run your Actor at least once in the Apify Console to make it appear in Bubble dropdowns
113+
- **Timeout errors**: For long-running Actors, consider using asynchronous runs
114+
- **Data format issues**: Ensure JSON data is properly formatted when working with datasets
193115

194116
If you have any questions or need help, feel free to reach out to us on our [Discord channel](https://discord.com/invite/jyEM2PRvMU).

0 commit comments

Comments
 (0)