In This Section

In the borderless™ Link™ Recipes section you will find step-by-step recipes for integrating the borderless™ Link™ Widget into your product. Below you will find recipes to:

Integrate borderless™ Link™
Customize borderless™ Link™
Update Contact borderless™ Link™

🚧
Deprecation warning!
In order to enhance security of borderless™ Link™, identifying widget with JWT token will be deprecated. New identification will have to be retrieved through a dedicated endpoint. The obtained widgetId, serving as the unique identifier, will subsequently be utilized in constructing the widget URL.
During the transition period, both authentication methods will work but we strongly advise you to switch over to new and enhanced method.

borderless™ Link™ Integration Recipe

Step	Corresponding Code (JavaScript)
Generate Unique Widget id — Use `/authentication/widget` endpoint to retrieve `widgetId` (unique widget identifier that will be used to authenticate the widget).
Create Widget iFrame — Create a `div` element with an `iframe` element nested inside it. Add the appropriate URL in the `src` attribute of the iframe element. Authenticate the widget with unique `widgetId`.	`<div><iframe src="https://secure.getborderless.com/widgets/add-external-contact?widgetId={unique widget identifier}" /></div>`
Set up Event Listener — To access the response data you will need an `eventListener` to listen for incoming messages. This will catch success and error messages from your widget.	`js window.addEventListener('message', e => { console.log(e.data) // Contact added successfully: // { externalContactId: ^xxxxx, status: "APPROVED" } }); window.addEventListener('message', e => { console.log(e.data) // Unable to add contact: // { message: "Sorry, this email is already associated with an account. Please pay them using their handle: @{contactSlug} (I-6303)" } });`

Customize borderless™ Link™ Recipe

Step	Corresponding Code (JavaScript)
Pass contact data — Use the `/externalContact/requiredInformation` endpoint to receive information about contact requirements by country. Then, pass already collected contact's data in the URL (additional data parameter names are the same as if you were submitting a POST request to `/externalContact`).	`<div><iframe src="https://secure.getborderless.com/widgets/add-external-contact?widgetId={unique widget identifier}&firstName=Dalia&currency=USD&country=US" /></div>`
Get Widget Customizations — Use the `/externalContact/widgetCustomizations` endpoint to receive information about widget customization options.	`js const options = { method: 'GET', headers: { Accept: 'application/json', Authorization: 'Bearer USER' } }; fetch('https://prod.api.getborderless.com/externalContact/widgetCustomizations', options) .then(response => response.json()) .then(response => console.log(response)) .catch(err => console.error(err));`
Customize Widget iFrame — Add title, height, and width specifications to the Widget.	`<div><iframe title="widget" width="600px" height="900px" src="https://secure.getborderless.com/widgets/add-external-contact?widgetId={unique widget identifier}" /></div>`

Update Contact borderless™ Link™ Recipe

Step	Corresponding Code (JavaScript)
Generate Unique Widget id — Use `/authentication/widget` endpoint to retrieve `widgetId`. Make sure to provide the handle in the request body of the contact you wish to update (unique widget identifier that will be used to authenticate the widget).
Create Widget iFrame — Create a `div` element with an `iframe` element nested inside it. Add the appropriate URL in the `src` attribute of the iframe element. Authenticate the widget with unique `widgetId`.	`<div><iframe src="https://secure.getborderless.com/widgets/update-external-contact?widgetId={unique widget identifier}" /></div>`