> For the complete documentation index, see [llms.txt](https://developers.stub.africa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.stub.africa/sdk-documentation/embedded-accounting.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.