iFrame Integration

The Salesflow iFrame for connecting and updating LinkedIn accounts is a secure, embedded flow that allows users to log in and authorize their LinkedIn account directly within your platform.

The iFrame can be customized with your app's brand colors.

Check how to do it in Doc Admin Dashboard > White Label (Color Branding)

Preconditions:

API key should be generated

Connect a New LinkedIn Account

Step 1: Generate a Temporary Token

Call the API to generate a 30-minute onboarding token using your API Key. API key should be generated

Issues a one-time onboarding token.

POST/api/v1/tokens/onboarding

curl https://api.salesflow.io/public/api/v1/tokens/onboarding \
  --request POST \
  --header 'Authorization: Bearer YOUR_SECRET_TOKEN'

Step 2: Generate the iFrame URL

Use the temp token to generate the onboarding URL:

https://{domainHostName}/embedded/{temp-token}

Step 3: Embed iFrame in Your Frontend

Render the URL inside an <iframe> in your app:

html
<iframe src="https://{domainHostName}/embedded/{temp-token}"   
width="100%"   
height="600"   
frameborder="0" >
</iframe> 

Or you can open it in a separate window using such JavaScript code:

window.open(
  'https://{domainHostName}/embedded/{temp-token}',
  '_blank',
  'resizable=yes, scrollbars=yes, titlebar=yes, width=800, height=600, top=80, left=200'
);

Step 4: User Enters LinkedIn Credentials

The user fills in their email, password, location and timezone inside the iFrame and clicks the “Add” button.

Step 5: Receive Account ID and Status

The iFrame returns:

{
   "type": "handleResponse",
   "data": {
      "action": "1",
      "linkedinId": 1, 
      "token": "access_token_for_account", 
      "status": "ACCOUNT_ACTIVE"
    }
}

action - indicates the action result 1(sucess) or 0(failed).

linkedinId - unique identifier of LinkedIn account in the system.

token - access token that uses inside update iframe.

status - LinkedIn account status inside the system

Status could have such values:
ACCOUNT_ACTIVE, // Active
ACCOUNT_PAUSED, // Incomplete
ACCOUNT_BLOCKED, // Disconnected
ACCOUNT_DELETED, // Deleted

✅ If status = active → close iFrame and proceed with automation.
❗ If status ≠ active → trigger update flow you can use access token provided in the result or generate new one (see below).

Update an Existing LinkedIn Account

Required when the account is in an incomplete state or requires re-authentication (e.g., 2FA, CAPTCHA, expired session, etc).

Step 1: Get a JWT Token

Call the token endpoint with your account credentials or use provided token from “Connect a new LinkedIn Account“ result.

Retrieves a JWT token for an onboarded LinkedIn account.

POST/api/v1/tokens/jwt

curl https://api.salesflow.io/public/api/v1/tokens/jwt \
  --request POST \
  --header 'X-AccountId: 1234567890' \
  --header 'Content-Type: application/json' \
  --header 'Authorization: Bearer YOUR_SECRET_TOKEN' \
  --data '{}'

Step 2: Generate the Update URL

Use the accountId and JWT to build the update iFrame URL:

https://{domainHostName}/embedded/{jwt-token}/{accountId} 

Step 3: Embed Update iFrame

html
<iframe   
src="https://{domainHostName}/embedded/{jwt-token}/{accountId}"
width="100%"   
height="600"   
frameborder="0">
</iframe> 

or

window.open(
      'https://{domainHostName}/embedded/{jwt-token}/{accountId}',
      '_blank',
      'resizable=yes, scrollbars=yes, titlebar=yes, width=800, height=600, top=80, left=200'
    );

Step 4: User Completes Verification

The iFrame will prompt for required verification steps if needed:

• Email or SMS code

• CAPTCHA

• 2FA code

• Mobile app approval

User clicks “Save Changes” to finish.

Step 5: Receive Final Status

The iFrame returns the updated status:

json 
{
   "type": "handleResponse",
   "data": {
      "action": '1',
      "linkedinId": 1, 
      "token": "access_token_for_account", 
      "status": "ACCOUNT_ACTIVE"
    }
}

✅ If successful — the account is fully reconnected and ready.

Handling Responses (Frontend)

Use the JavaScript postMessage API or a callback-based approach to detect when the iFrame returns the account ID and status.

js
window.addEventListener('message',
      (event) => {
        const { linkedinId, status, token } = event.data.data;
        if (status === "ACCOUNT_ACTIVE") {
          // close IFrame
        } else {
          // open IFrame in another window for Updating LinkedIn account
          window.open(
            `https://{domainHostName}/embedded/${token}/${linkedinId}`,
            '_blank',
            'resizable=yes, scrollbars=yes, titlebar=yes, width=800, height=600, top=80, left=200'
          );
        }
      }); 

Expected Results

• A user logs into LinkedIn inside your app securely via iFrame.

• Your backend receives the accountId and connection status.

• If additional verification is required, the iFrame handles it.

• Once complete, the account is ready for LinkedIn API operations such as sending invites, messages, and more.