Skip to main content

Affinity

Affinity is a Beam product allows you to serve targeted offers to your applicants based on their transactional spending data. Beam surfaces relevant offers to your applicants where we believe we can provide them value.

Affinity can be embedded in an iframe in your UI wherever you have an application with a bank connection object (if you are unsure, this is active in the default application configuration).

Affinity BYOD​

If you want to embed Affinity into your your website via iframe you will need to use our Bring Your Own Data flow. Please go through the BYOD walkthrough to create an application and submit personal info and banking data to us.

Create an Application​

For Affinity, you will need the proxy_id field returned when creating the application. This is a secure, unique id for an application that can be exposed to your frontend.

Embed the iframe​

1. Add the Wrapper Element: Place the below empty <div> where you want the iframe to appear:

<div id="affinity_wrapper"></div>

2. Add the script: Place the script tag in the <head> section of your HTML file or at the beginning of the <body> tag. This ensures the script is loaded correctly when the page is rendered.

<script src="https://sandbox.connect-v2.beamlend.com/api/iframe?width=<width>&height=<height>&proxy_id=<proxy_id>"></script>

This will insert the iframe element into the empty <div> from above.

3. Customize Dimensions (Optional) The iframe's max width and height are controlled by parameters in the script URL. You can adjust the width and height query parameters in the script tag to change this. For example, to make the iframe 800 pixels wide and 400 pixels tall, update the script URL as follows: 

<script src="https://sandbox.connect-v2.beamlend.com/api/iframe?width=800px&height=400px&proxy_id=<proxy_id>"></script>

If you do not provide the width and height parameters, the iframe will default to width=700px and height=800px. Please specify units: px (pixels), vh (viewport height), vw (viewport width), dvh (dynamic viewport height), or dvw (dynamic viewport width).

Auto Resizing Based on Screen Dimensions: The width and height parameters set the maximum dimensions for the iframe. When the iframe is displayed, it will scale to fit within these maximum dimensions based on the current screen size.

Maximum Dimensions: The specified width and height determine the maximum size of the iframe. The iframe will not exceed these dimensions.

Dynamic Scaling: To make sure the iframe adapts to different screen sizes, it will calculate how much of the screen it occupies and scale proportionally. This ensures that the iframe maintains a consistent appearance relative to the viewport size.

How It Works: When the iframe is rendered, it calculates its size as a percentage of the available screen space. It then adjusts its width and height proportionally based on the screen size while respecting the maximum dimensions specified.

4. Specifying the Proxy ID proxy_id: This parameter is essential as it specifies the unique application identifier. Replace the <proxy_id> with the actual ID provided to you. This ID ensures the iframe is configured correctly for your application. Here's how your script might look with all parameters specified:

<script src="https://sandbox.connect-v2.beamlend.com/api/iframe?width=800px&height=600px&proxy_id=c90j4f2V5IcADWA7VLqdX8Y99tjnasCfynv83asd8"></script>

5. Server-Side Rendering with Next.js (Optional): If you are using Next.js and want to include the iframe script dynamically, you can use the next/script component to avoid server-side rendering issues.

import React from 'react';
import Script from 'next/script';

export default function Page() {
  return (
    <div id="affinity_wrapper">
      {/* The iframe will be added dynamically by the script */}
      <Script
        src="https://sandbox.connect-v2.beamlend.com/api/iframe?width=800px&height=600px&proxy_id=c90j4f2V5IcADWA7VLqdX8Y99tjnasCfynv83asd8"
        strategy="lazyOnload" 
      />
    </div>
  );
}

CORS Whitelisting​

Please contact the Beam development team to whitelist your origin(s), otherwise you will receive CORS related errors from your browser. For local development, the origins http://localhost:3000 and http://localhost:3001 are pre-whitelisted.