# Embedded accounting

### Available widgets

* **Cashflow** – cash in and out for the selected month.
* **Income** – income overview with the ability to categorise transactions.
* **Expenses** – expenses overview with categorisation.
* **Profit** – month to date profit information.
* **Bank Accounts** – list of connected bank accounts and actions to manage them.
* **Bank Sync** – quick control to sync bank feeds and view the last sync time.
* **Reports** – List that opens detailed accounting reports.

Only include the containers for the widgets you want to display.

### Getting started

#### 1. Include the stylesheet

```html
<link href="https://cdn.stub.africa/stub-widgets/latest/stub-widgets.css" rel="stylesheet" />
```

Replace `latest` with a version number if you prefer to pin the SDK to a specific release (you should do this in your production environment).

#### 2. Include the JavaScript

```html
<script src="https://cdn.stub.africa/stub-widgets/latest/stub-widgets.js"></script>
```

#### 3. Add containers

```html
<div id="stub-cashflow"></div>
<div id="stub-income"></div>
<div id="stub-expenses"></div>
<div id="stub-profit"></div>
<div id="stub-bank-accounts"></div>
<div id="stub-bank-sync"></div>
<div id="stub-reports"></div>
<div id="stub-powered-by"></div>
```

Widgets render inside these elements. Place them wherever you want the content to appear.

#### 4. Obtain an authentication token

Request a token from your backend and pass it to the SDK. The widgets require a valid token for every API call.

#### 5. Initialise the SDK

```html
<script>
const options = {
  appId: '<your app id>',
  businessId: '<business id>',
  token: '<authentication token>',
  renderImmediately: true
};

window.stub.init(options);
</script>
```

If `renderImmediately` is `false` or omitted, call `window.stub.render()` once the page is ready. During development you can enable the test environment:

```javascript
window.stub.init({
  ...options,
  test: true
});
```

### Updating the widgets

#### Date range

You'll probably want to change the date range of data shown on the widgets based on user interaction with your website. That can be done with the `set()` function.

```javascript
window.stub.set({
  month: 0, // 0 = January
  year: 2024
});
```

#### Authentication token

The SDK will use the token that you provide it with to authenticate all requests, so whenever your token is refreshed you need to pass the updated token to the SDK, otherwise it will attempt to authenticate requests using an expired token that will fail.

```javascript
window.stub.set({ token: '<new token>' });
```

Again, the `set()` function is your friend for this.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.stub.africa/sdk-documentation/embedded-accounting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.