Introduction

The Widget provides an interface where users can select their employment type and choose from available platforms and employers. It can be customized to match your brand, and you can create multiple instances to test different use cases for various audiences.

There are three ways to integrate the Widget:

• Share a public Link or embed the Widget in an iframe.
• Use a WebView within your mobile application.
• Install the Widget via a CDN or as an ES6 module.

Demo

Check out our demo and try it for yourself.

The Login process

---

When creating a Widget with the default settings, the connection process is as follows:

1. Consent

The user enters the Widget, where they can view your company information along with details on data handling and Palenca's privacy policy. If provided, your company's privacy policy will also be displayed on this screen.

2. Country Selection

The user selects their country. If a single country is set in the Widget settings, this step is skipped automatically.

3. Employment Type Selection

The user selects their employment type. This step only appears if the platforms configured in the Widget include multiple employment types

4. Platform Selection

The user selects the platform they want to log in to. If the Widget is set to a single country and platform, this step will appear immediately after the Consent screen. See our available platforms.

5. Login

From the login screen, the user can securely enter their credentials to connect their account. Depending on the platform requirements, users may need to enter a password and/or OTP code. Learn more about login states..

6. Connect more accounts and Complete

Once users successfully enter their credentials, the connection is established, allowing you to retrieve their data directly from the Console or via the Palenca API.

If they have accounts on other available platforms, they can choose to log into them as well.

If a Widget Redirect URL is set, they will be redirected to it after clicking Complete.

💡

Tip

By targeting a more specific audience for your Widget, you can streamline the process, reducing the number of steps needed to connect users' accounts successfully.

You can preview and test different configurations in the Widget editor within the Console.

Your turn: Analyze income data

In the Console, you'll be able to view the connected accounts and explore the extracted income data.

Create a Widget

---

By default, your Console includes a pre-created Palenca Demo Widget. To create a new Widget, follow these steps:

1. In your Console, navigate to Widgets in the side menu.

2. Check if you have the Sandbox Mode toggle ON or OFF in the side menu.

   📘

   Information

   Widgets are created per environment.

   When the Sandbox toggle is ON, Widgets will connect to the Sandbox environment, which allows you to connect sample users.

3. Click on Create Widget in the top-right corner.

   

4. Fill out the Widget form:

   1. Name: Enter a name to identify the Widget in your Console (not visible to users).
   2. Countries: Select the countries where the Widget will be available.
   3. Platforms: Choose the platforms users can log in to. See our available platforms..
   4. Privacy Policy URL (optional): Optionally, provide your privacy policy to be displayed alongside Palenca's.

   Note: You can modify these settings after creating the Widget.

   

5. Click on Confirm to finalize the creation

Customization

---

The Widget editor allows you to experiment with different settings while viewing a live preview of how these changes will appear in the shared Widget.

Live Preview

As you make edits, a real-time preview of the Widget will appear on the right side of the page, updating instantly with your changes.

In addition, you can click the Preview button in the top-right corner to generate a draft link and see how the Widget looks before saving.

Saving Changes

Click Save to apply and publish your changes.

Important: If you exit the editor without saving, your changes will be lost.

Settings

In the Configuration tab, you will be able to modify the settings such as name, countries, and platforms.

Flow

In the Customize flow tab, you will be able to customize the Welcome screen texts and the widget behavior after successfully connecting your users' accounts.

Welcome screen

You can customize the following elements of the Welcome Screen:

• Title
• Description
• Button text
• Privacy Policy URL

💡

Tip

For titles and descriptions, you can use HTML tags to style the text, such as bold or italic. Additionally, you can use the {{company}} placeholder, which will be automatically replaced with your company’s name.

Redirect URL

You can configure a Redirect URL for the Widget, allowing you to send users to a specific site after they have successfully connected their account and clicked Done.

On top of that, you can choose to include the external_id and account_id as query parameters in the Redirect URL.

External ID

The external_id is a parameter that can be sent as a query parameter in the Widget link. It helps you associate Palenca’s user and account entities with your client identifiers in your web or mobile application.

To include the external_id in the Redirect URL, first, add it to the Widget link you share with users:

https://connect.palenca.com/?widget_id={widget_id}&external_id={your_identifier}

Once users have connected their accounts, they will be redirected to your site with the same identifier appended to the URL:

https://your-app.com/?external_id={your_identifier}

Account ID

The account_id is the identifier used to make API requests for retrieving income information. It is generated when a user successfully connects their account. Learn more about accounts.

After users complete the connection, the Redirect URL will include the account_id:

https://your-app.com/?account_id={palenca_account_id}

Including Both External ID and Account ID

If needed, you can include both external_idand account_id in the Redirect URL:

https://your-app.com/?external_id={your_identifier}&account_id={palenca_account_id}

Branding

In the Appearance and Branding tab, you can customize the Widget's primary color.

Additionally, you can adjust the shape of buttons and inputs:

• Rounded (default)
• Square
• Round