Mobile App

You can use the Palenca Widget embedded using a WebView in your mobile application and listen to the events.

Settings

Parameter	Example	Description	Required
widget_id	a64fef80-42ec-4d5b-bd38-c918e0071663	The unique widget_id	Yes

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

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 been 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

Response for events

The structure of the response is always the same with the following structure:

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

Examples of events

ready

{
     "signal": "ready"
}

user_created

{
     "signal": "user_created",
     "response": {
         "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

{
     "signal": "connection_success",
     "response": {
         "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

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

Examples

ReactNative

To listen to the events you can use postMessage.

import React from 'react';
import { Alert } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
   const handleEvent = (event: any) => {
     Alert.alert(event.nativeEvent.data);
   }

   const widgetId: string = 'YOUR_WIDGET_ID';
   const baseUrl: string = 'https://connect.palenca.com';
   const uri: string = `${baseUrl}?widget_id=${widgetId}&primary_color=ea4c89`;

   return <WebView
   onMessage={handleEvent}
   source={{ uri }}
   />;
};

export default App;

Android Kotlin

activity_main.xml

     <WebView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:id="@+id/webView"
         android:layout_gravity="center_horizontal"/>

MainActivity.kt

import android.content.Context
import android.os.Bundle
import android.webkit.JavascriptInterface
import android.webkit.WebViewClient
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.palenca.connect.databinding.ActivityMainBinding
import org.json.JSONObject

class MainActivity : AppCompatActivity() {

     private lateinit var binding: ActivityMainBinding
     private val baseUrl = "https://connect.palenca.com"
     private val widgetId = "YOUR_WIDGET"
     private val widgetUrl = "$baseUrl?widget_id=$widgetId&primary_color=ea4c89"

     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = ActivityMainBinding.inflate(layoutInflater)
         setContentView(binding.root)
         binding.webView.webViewClient = WebViewClient()
         binding.webView.settings.javaScriptEnabled = true
         binding.webView.addJavascriptInterface(JSBridge(this), "JSBridge")
         binding.webView.loadUrl(widgetUrl)
     }

     /**
      * Receive messages from the Webview and pass into native
      */
     class JSBridge(private val context: Context) {
         @JavascriptInterface
         fun onEvent(event: String) {
             val jsonObject = JSONObject(event)
             println(jsonObject)
             Toast.makeText(context, event, Toast.LENGTH_LONG).show()
         }
     }
}

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>