|
1 | 1 | --- |
2 | 2 | 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. |
4 | 4 | sidebar_label: Bubble |
5 | 5 | sidebar_position: 7 |
6 | 6 | slug: /integrations/bubble |
7 | 7 | --- |
8 | 8 |
|
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.** |
10 | 10 |
|
11 | 11 | --- |
12 | 12 |
|
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. |
14 | 14 |
|
15 | | -## Prerequisites |
| 15 | +## Get started |
16 | 16 |
|
17 | | -Before using the Apify integration with Bubble, you need: |
| 17 | +To use the Apify integration for Bubble, you will need: |
18 | 18 |
|
19 | 19 | - An [Apify account](https://console.apify.com/) |
20 | 20 | - A [Bubble account](https://bubble.io/) |
21 | 21 | - A Bubble application where you want to use the integration |
22 | 22 |
|
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 | | - |
40 | 23 | ## Step 1: Install the Apify plugin for Bubble |
41 | 24 |
|
42 | 25 | To integrate Apify with your Bubble application, you first need to install the Apify plugin from the Bubble plugin marketplace. |
43 | 26 |
|
44 | | - |
| 27 | + |
45 | 28 |
|
46 | 29 | 1. Go to your Bubble application dashboard. |
47 | 30 | 2. Navigate to the "Plugins" tab. |
48 | 31 | 3. Click the "Add plugins" button. |
49 | 32 | 4. Search for "Apify" in the plugin marketplace. |
50 | 33 | 5. Click on the Apify plugin and then click "Install". |
51 | 34 |
|
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 | | - |
| 35 | +## Step 2: Configure the Apify plugin |
69 | 36 |
|
70 | | - |
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: |
101 | 38 |
|
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. |
103 | 41 |
|
104 | | - |
| 42 | +## Step 3: Set up automated workflows |
105 | 43 |
|
106 | | - |
| 44 | +### Trigger Actor runs from Bubble events |
107 | 45 |
|
108 | | -The Apify plugin provides the following actions: |
| 46 | +Create workflows that automatically run Apify Actors when certain events occur in your Bubble app: |
109 | 47 |
|
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 |
113 | 52 |
|
114 | | -- **Key-Value Store Operations** |
115 | | - - Get Record As Text |
| 53 | +### Display Apify data in your application |
116 | 54 |
|
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: |
120 | 56 |
|
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 |
124 | 60 |
|
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 | + |
136 | 62 |
|
137 | | -## Step 5: Example use cases |
| 63 | +### Automate data collection workflows |
138 | 64 |
|
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: |
140 | 66 |
|
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 |
142 | 71 |
|
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 |
144 | 73 |
|
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 |
147 | 75 |
|
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 |
149 | 80 |
|
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 |
151 | 82 |
|
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 |
155 | 87 |
|
156 | | -### Enriching user data |
| 88 | +### Content aggregation |
157 | 89 |
|
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 |
159 | 93 |
|
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 |
163 | 95 |
|
164 | | -## Summary of available features |
| 96 | +The Apify plugin provides two main types of operations: |
165 | 97 |
|
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 |
172 | 103 |
|
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 |
179 | 108 |
|
180 | 109 | ## Troubleshooting |
181 | 110 |
|
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 |
193 | 115 |
|
194 | 116 | 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