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>
   src="<{your> JWT token here}" />
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 => {
// Contact added successfully:
// { externalContactId: ^xxxxx, status: “APPROVED” }

window.addEventListener('message',e => {
// 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'


', 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=<{your> JWT token here}" />