CDN & ES6

Quando você usa o CDN ou ES6 para ambientes da Web, a API da Palenca lidará automaticamente com a validação de credenciais, a autenticação de vários fatores e o manuseio de erros para todas as conexões que seus usuários fazem.

Deployment with CDN

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

Implementation with ES6

Implementação com ES6

npm install @palenca/palenca-link

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

Parâmetros de configuração (obrigatórios)

Parâmetro	Exemplo	Descrição	Ordem
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

Parâmetro	Exemplo	Descrição
externalId	6187344f-d2e9-4ff1-a0ca-7a1ad512682d	Identificador de usuário externo
isSandbox	true	Se definido comotrue, O modo Sandbox está ativado. false por padrão
platforms	['uber', 'rappi', 'runa']	Matriz de plataformas que o usuário pode selecionar
countries	['mx', 'br', 'ar']	Códigos de País Alpha-2 selecionados por usuários, seletíveis
redirectUrl	https://domain.com/step-2	URL para o qual o usuário deve ser redirecionado
customPrivacyUrl	https://domain.com/privacy	Permite adicionar uma caixa de seleção de malha de privacidade personalizada, útil se precisar de consentimento personalizado
whatsAppPhoneNumber	+525511223344	Número de telefone com código de país para relevantes mensagens do WhatsApp de usuários
hideLogo	false	Se definido como true, O logotipo da sua empresa está escondido. false por padrão
hideWhatsApp	false	Se definido como true, O botão flutuante do WhatsApp está escondido. false por padrão
hideConsent	false	Se definido como true, O a página de consentimento está escondida. false por padrão
lang	es	Substitui o idioma detectado automaticamente pelo navegador. idiomas disponíveis: es, en and pt. null by default

Parâmetros de estilos visuais

Parâmetro	Exemplo	Descrição
primaryColor	#1F5BC0	Cor hexadecimal, os valores de cores hexadecimais são suportados em todos os navegadores
borderRadius	10px	A propriedade de Radio de Fronteira define o raio dos cantos do elemento
fontFamily	Robot	A propriedade da fonte da fonte especifica a fonte do Palencalink, ele suporta apenas as fontes do Google

Links Úteis

• Google Fonts
• Color Picker
• Border radius

Modelos

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

Eventos

A única maneira de se comunicar com o link da Palenca é ouvindo um evento. Todos os eventos têm carga útil com o API Avelope.

A tabela a seguir mostra todos os eventos de link de palenciamento:

Evento	Descrição
ready	Indica que sua chave e widget da API public estão corretos e que o widget possui SGONE inicializado
user_created	O usuário foi criado com sucesso
connection_success	O usuário conectado com sucesso à plataforma
connection_error	E ocorreu enquanto tentava conectar um erro à plataforma

Avelope para eventos

O avelope é sempre o mesmo com a seguinte estrutura:

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

Exemplo de eventos

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
}

Estar sozinho

Métodos disponíveis

Método	Descrição	Parâmetros
on	Para adicionar assinaturas ao ouvinte do evento	event: string, callback: Function
render	Para renderizar o widget	containerId: string, config: object
destroy	Para mexer o IFME e os ouvintes de eventos	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;