Use this method to get up and running quickly by embedding FlatPeak’s Connect flow into your app via a web view.

​
Integrating Connect

1

Get Connect's web app

git clone https://github.com/flat-peak/flatpeak-connect-web.git
cd flatpeak-connect-web
npm install
This step downloads FlatPeak’s open-source Connect Web reference app within your project.
2

Configure Environment Variables

export FLATPEAK_CONNECT_URL=https://connect.flatpeak.com
Ensure this is set correctly for your environment. Adjust for Windows-based shells if needed.
3

Launch Locally

npm run dev
This launches the WebApp on http://localhost:7070`. You will see an error. This is because you have not provided a Connect token. Ignore this and continue following this guide.
4

Generate a Connect Token

  1. First, get a Bearer token via the create-a-bearer-token endpoint.
  2. Next, call the create-connect-token endpoint to get a temporary connect_token.
curl --request POST \
--url https://api.flatpeak.com/connect/tariff/token \
--header 'Authorization: Bearer <token>' \
--header 'Content-Type: application/json' \
--data '{
  "connect_web_uri": "http://localhost:7070",
  "callback_uri": "<any service that can receive webhooks>",
  "postal_address": {
    "address_line1": "1-3",
    "address_line2": "Strand",
    "city": "London",
    "state": "Greater London",
    "post_code": "WC2N 5EH",
    "country_code": "GB"
  }
}'
The connect_token grants temporary access to the Connect API, eliminating the need to expose your API key in frontend code.
5

Open the WebView with Token

In your browser, open: http://localhost:7070?fp_cot=cot_***, replacing cot_*** with the connect_token:
6

Interact with the Connect flow

Connect will present a series of pages that discovers electreicty tariff at the address you have provided when generated the Connect Token. It automatically selects the best tariff link method based on available provider APIs, local data regulations, and usage patterns across the FlatPeak network.
To complete the flow, click Save button on Your Tariff page.
Contact FlatPeak support if you need sample credentials for an energy provider to complete this step.
7

Handle Completion

  1. You will receive a session_complete page in the browser.
  2. Connect will also send notification to callback_uri you specified from generating the Connect Token, i.e. it will call https://webhook.site/4623e56fc5c1?fp_cot=cot_6587fa4362341be5b524de3b
  3. You exchange the connect_token for a permanent location_id and store it alongside your customer’s address.
8

Subscribe to Lifecycle Webhooks

FlatPeak keeps tariff data up to date post-connection. If customer action is needed (e.g. expired password), FlatPeak will generate an events and send it to you via webhook. Subscribe to them to inform users and guide them to re-connect when necessary.
9

Allow Configuration Changes

To let users review or update their tariffs post-connection, refer to the Tariff Settings Page guide to provide UI controls for users to view, reconnect, or adjust their tariff flows—including commodity, export, or grid-fee options.

​
WebView tip

When embedding Connect in your app, launch it in a modal or bottom sheet (iOS/Android) to prevent layout issues—especially on devices with notches or cutouts. This keeps the UI clean and ensures no elements are obscured.

​
Next integration steps

After connecting the tariff, you can access: