CDN & ES6

When you use the CDN or ES6 for web environments, the Palenca API will automatically handle credential validation, multi-factor authentication, and error handling for every connection your users make.

Deployment with CDN

<script src="https://link.palenca.com/v2/index.min.js"></script>

Implementation with ES6

npm install @palenca/palenca-link

import { loadLink } from "@palenca/palenca-link";

Configuration parameters (mandatory)

Parameter	Example	Description	Order
publicApiKey	public_6187344f-d2e9-4ff1-a0ca-7a1ad512682d	public API key	1
widgetId	c379afec-8d47-4fcf-ae07-353093baed2b	Widget ID	2

Example

const linkPromise = loadLink('public_6187344f-d2e9-4ff1-a0ca-7a1ad512682d', 'c379afec-8d47-4fcf-ae07-353093baed2b');

Optional parameters

Parameter	Example	Description
externalId	6187344f-d2e9-4ff1-a0ca-7a1ad512682d	External user identifier
isSandbox	true	If set to true, sandbox mode is enabled. false by default
platforms	['uber', 'rappi', 'runa']	Matrix of platforms that the user can select
countries	['mx', 'br', 'ar']	User-selectable comma-separated alpha-2 country codes
redirectUrl	https://domain.com/step-2	URL to which the user should be redirected
customPrivacyUrl	https://domain.com/privacy	Allows you to add a custom privacy terms checkbox, useful if you need custom consent
whatsAppPhoneNumber	+525511223344	Phone number with country code to receive WhatsApp messages from users
hideLogo	false	If set to true, your company logo is hidden. false by default
hideWhatsApp	false	If set to true, the floating WhatsApp button is hidden. false by default
hideConsent	false	If set to true, the consent page is hidden. false by default
lang	es	Replaces the language automatically detected by the browser. Available languages: es, en and pt. null by default

Visual styles parameters

Parameter	Example	Description
primaryColor	#1F5BC0	Hexadecimal Color, Hexadecimal color values are supported in all browsers
borderRadius	10px	The border-radius property defines the radius of the corners of the element
fontFamily	Robot	The font-family property specifies the font for PalencaLink, it only supports Google Fonts

Useful links

• Google Fonts
• Color Picker
• Border radius

Templates

Template	Font	Color	Border radius
Black	Lato	#000000	0px
Default	Poppins	#1F5BC0	10px
Nature	Lato	#000000	0px

Events

The only way to communicate with the Palenca Link is by listening to an event. All events have a payload with the API envelope.

The following table shows all the Palenca Link events:

Event	Description
ready	Indicates that your public API key and Widget are correct and that the widget has sgone initialized
user_created	The user was created successfully
connection_success	The user successfully connected to the platform
connection_error	An error occurred while trying to connect a user to the platform

Envelope for events

The envelope is always the same with the following structure:

{
     "success": bool,
     "data": Data Object,
     "error": Error Object
}

Examples of events

ready

{
     "success": true,
     "data": null,
     "error": null
}

user_created

{
     "success": true,
     "data": {
         "user_id": "054d0a9d-38ec-40cb-a31c-09b483242e4a",
         "external_id": "4a0e32bd-c3df-4172-a89d-f173d6816926",
         "widget_id": "feecb679-a3cc-47ef-8fd4-600799f12a39"
     },
     "error": null
}

connection_success

{
     "success": true,
     "data": {
         "user_id": "054d0a9d-38ec-40cb-a31c-09b483242e4a",
         "country": "mx",
         "platform": "imss",
         "account_id": "472f02e8-6b24-43a7-b529-3f71d6ecc81c"
     },
     "error": null
}

connection_error

{
     "success": false,
     "mistake": {
         "code": "invalid_credentials",
         "message": "The username/password combination is wrong",
         "errors": null
     },
     "data": null
}

Standalone

Available methods

Method	Description	Params
on	To add subscriptions to the event listener	event: string, callback: Function
render	To render the widget	containerId: string, config: object
destroy	To remove the iframe and event listeners	N/A

<div id="container"></div>

   let widgetId = "YOUR_WIDGET_ID";
     let publicApiKey = "YOUR_PUBLIC_API_KEY";
     let renderConfig = {
       "configuration": {
         "hideConsent": true,
         "countries": "mx"
       },
       appearance: {
         primaryColor: "#ea4c89",
         borderRadius: "9999px"
       }
     }

     let link = palenca.loadLink(publicApiKey, widgetId).then(link => {

       link.on("ready", () => {
         console.log("Widget is ready")
       })

       link.on("user_created", (event) => {
         console.log("User created", event)
       })

       link.on("connection_success", (event) => {
         console.log(`Connection success for userId ${event.data.user_id} and accountId ${event.data.account_id}`)
       })

       link.on("connection_error", (event) => {
         console.log(`Connection error ${event.data.error.code}`)
       })

       link.render("container", renderConfig);
      
       // You can destroy the iframe and event listeners with the destroy method
       window.addEventListener('unload', () => {
           link.destroy()
       })

     }, error => {
       console.log(error);
     })

React

import { loadLink, PalencaLinkReact } from '@palenca/palenca-link';
import { useCallback } from 'react';

// Make sure to call `loadLink` outside of a component’s render to avoid recreating the object
const linkPromise = loadLink('YOUR_PUBLIC_API_KEY', 'YOUR_WIDGET_ID');

const Home = () => {
   const handleEvent = useCallback((event: string, data: object) => {
     console.log(event);
     console.log(data)
   }, []);

   const options = {
     configuration: {
       hideConsent: true,
       countries: ['mx'],
     },
     appearance: {
       primaryColor: '#ea4c89',
       borderRadius: '999px',
     },
   };

   return (
       <div>
             <PalencaLinkReact
               link={linkPromise}
               options={options}
               onEvent={handleEvent}
             />
       </div>
   );
};

export defaultHome;