Bubble
Step-by-Step Guide to Integrating Pluggy Connect in a Bubble Application
Step-by-Step Guide to Integrating Pluggy Connect in a Bubble Application
Prerequisites
- Bubble Application: Ensure you have a Bubble application set up.
- Pluggy API Access: You should have access to the Pluggy API with necessary credentials.
Step 1: Include the Pluggy Connect Script
First, you need to include the Pluggy Connect JavaScript library in your Bubble application.
<script src="https://cdn.pluggy.ai/pluggy-connect/v2.7.0/pluggy-connect.js"></script>
Specify the necessary values in the window
object. Add the following script to your HTML header or in an HTML element on your Bubble page:
<script>
window.pluggy = {
connectTokenUrl: 'YOUR_CONNECT_TOKEN_URL',
clientUserId: 'YOUR_CLIENT_USER_ID',
buttonClassName: 'your-button-class',
buttons: [
{
clientUserId: 'YOUR_CLIENT_USER_ID',
buttonClassName: 'your-button-class',
updateItem: null // Replace with item ID if updating an existing item
}
]
};
</script>
Step 3: Inject the Main JavaScript
Include the main JavaScript provided to manage the Pluggy Connect widget:
<script src="https://cdn.pluggy.ai/bubble/v1.2.0/main.js"></script>
Step 4: Add a Button to Your Bubble Page
Create a button in your Bubble application and assign it the class name specified in window.pluggy.buttonClassName
.
<button class="your-button-class">Open Pluggy Connect</button>
Customization Options
- Sandbox Mode: If you want to include sandbox mode for testing, set
includeSandbox
totrue
in thewindow.pluggy
object. - Theme: You can customize the theme of the Pluggy Connect widget by setting the
theme
property. - Products and Connector IDs: You can specify which products and connectors to include by setting the
products
andconnectorIds
properties.
Error Handling
The openPluggyConnect
function includes an onError
callback where you can implement your logic for handling errors during the connection process.
Testing
Ensure that your connectTokenUrl
endpoint is correctly set up to return the access token and that the clientUserId
is correctly passed.
This guide provides a structured way to integrate and customize the Pluggy Connect widget within your Bubble application. Adjust the values as per your application's requirements and test thoroughly to ensure proper integration.
Updated 2 months ago