Skip to content

Quickstart

Help

If you get stuck at any point in the Quickstart, we are here to help!

Kanmon Connect is the easiest way to embed Kanmon functionality into your platform that is convenient for end-users while being simple to implement. This guide is a technical outline of how Kanmon Connect works, and the steps required to integrate it with your platform.

Introduction

The Kanmon Connect experience is provided through a modal window that walks users through the onboarding process. This experience is triggered when end-users click a call-to-action button Kanmon provides.

There are three steps required to integrate Kanmon Connect with your platform:

  1. Upload business details to the Kanmon Capital Platform
  2. Integrate with Kanmon APIs in your backend application to exchange business data and authorize the widget
  3. Load the Kanmon Connect script resource in your frontend application

Info

Implementation effort estimate: 1 engineer, 1 day

Credentials

Before you begin you should have received a unique, secret Kanmon Connect API Key from the Kanmon customer success team to identify requests originating from your platform. This will be required for Step 2, described below. The API key should be treated as a secret.

You should also receive an invitation to access the Kanmon Capital Platform, which will be required for Step 3.

Environments

Kanmon provides two environments for product development.

Environment Use Case URL
Sandbox Suitable for development and testing https://workflow.sandbox.kanmon.dev
Production Use for production-level applications https://workflow.kanmon.dev

You will be provided with an API Key specific to each environment. Please be sure to use the correct credentials to access each environment.

How it works

Kanmon Connect has client and server-side components. The server-side component is used for retrieving customer information, checking available offers, and creating fine grained user experiences through our wide range of APIs. The client-side widget is a fully white-label customer-facing application designed to help your customer understand the product structure, collect additional information and consent and show offer status. It can be customized to follow the same styling as your platform.

Step 1: Upload business details

To make it easy to provision the program for your customers, you can import business details to the Kanmon Capital Platform from a CSV file. The Kanmon Connect experience will only be presented to these users, and can be turned on and off in the Kanmon Capital Platform.

There are only two pieces of information that are required:

  • The primary business owner's email
  • The business's name

There are several other pieces of information that are not required, but are convenient: if you supply them in the CSV, the end-user won't need to enter them during onboarding. The complete CSV structure is defined in the table below; you can also download our sample template.

To upload business details, prepare your CSV, sign in to the Kanmon Capital Platform, and navigate to Businesses > Import.

This step can be repeated; as new businesses are onboarded to your platform, simply upload a new CSV.

Column Header Description
businessOwnerEmail The primary business owner's email (Required)
businessName The business's name (Required)
businessAddressLine1 The business's address line 1 (Optional)
businessAddressLine2 The business's address line 2 (Optional)
businessCity The business's city (Optional)
businessState The business's state (Optional)
businessZipcode The business's zipcode (Optional)
businessCountry The business's Country (Optional)
businessOwnerFirstName The primary business owner's first name (Optional)
businessOwnerMiddleName The primary business owner's first name (Optional)
businessOwnerLastName The primary business owner's last name (Optional)
businessOwnerAddressLine1 The primary business owner's address line 1 (Optional)
businessOwnerAddressLine2 The primary business owner's address line 2 (Optional)
businessOwnerCity The primary business owner's city (Optional)
businessOwnerState The primary business owner's state (Optional)
businessOwnerZipcode The primary business owner's zipcode (Optional)
businessOwnerCountry The primary business owner's country (Optional)

Step 2 (Backend): Provide a back-end API endpoint

In this step, you provide a secure back-end connection between your platform and Kanmon. This endpoint will be used in Step 3 to present the Kanmon Connect experience to businesses imported in Step 1.

Only two pieces of information are required for this step:

  • Your Kanmon Connect API Key
  • The email address of the currently signed-in user

This exchange happens via an API call originated by the Kanmon Connect script, between your platform backend and the Kanmon API:

  • Kanmon Connect script invokes your platform API endpoint
  • Platform invokes Kanmon API, providing API key and business details
  • Kanmon API returns data used by Kanmon Connect script to authorize and present the Kanmon Connect experience

Example

This example defines a function that accepts a notional user object, executes a request against the Kanmon API, and returns the response. This function could then be invoked from an API controller on your site.

function kanmon_connect(user) {
    const headers = {
        'Authorization': `ApiKey ${env.KANMON_CONNECT_API_KEY}`,
        'Content-Type': 'application/json',
    }

    const body = JSON.stringify({
        userEmail: user.email,
    })

    const response = await fetch(
        '<https://api.kanmonhq.com/api/v1/connect_token>',
        {
        method: 'POST',
        headers,
        body,
        },
    )

    return response.json()
}

Step 3 (Frontend): Load the Kanmon Connect script resource

The Kanmon Connect end-user experience is provided via a client-side script. The script should be invoked only on those pages where an end-user is signed in to your platform.

The script creates a global KANMON_CONNECT object that must be primed with a single piece of information: the URL of your back-end API endpoint.

Example 1:

Load the script and prime the object via script tags:

<script src='<https://storage.googleapis.com/widget-deploy-prod/kanmon-connect.js>' />
<script>
KANMON_CONNECT.start(
    'YOUR-ENDPOINT-URL',
)
</script>

Example 2:

Programmatically load the script and prime the object:

const script = document.createElement('script')
script.src = '<https://storage.googleapis.com/widget-deploy-prod/kanmon-connect.js>'
script.onload = function () {
    KANMON_CONNECT.start(
        'YOUR-ENDPOINT-URL',
    )
}
document.body.appendChild(script)

Last updated: Nov 23, 2021

Back to top