Recipes

Introduction

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

  • Integrate the Widget
  • Customize the Widget

Widget Integration Recipe

StepCorresponding Code (JavaScript)
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 your JWT<div>
 <iframe
   src="<https://secure.getborderless.com/widgets/add-external-contact?token={your> JWT token here}" />
</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
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 Widget Recipe

StepCorresponding Code (JavaScript)
Get Widget Customizations - Use the /externalContact/widgetCustomizations endpoint to receive information about widget customization options.
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?token={your> JWT token here}" />
</div>