Step-by-Step Guide to Integrating Pluggy Connect in a Bubble Application

Prerequisites

1. Bubble Application: Ensure you have a Bubble application set up.
2. 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 to true in the window.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 and connectorIds 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.