---
title: "Self Service Portal (Snippets)"
slug: "self-service-portal-snippets"
updated: 2026-06-03T13:52:08Z
published: 2026-06-23T10:52:16Z
canonical: "help.frisbii.com/self-service-portal-snippets"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.frisbii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Self Service Portal (Snippets)

The Frisbii Media self-service portal — referred to as **Snippets** — is a complete customer portal embedded in an iframe. Customers can manage their SSO profile, payment methods, subscriptions, and orders without leaving your website.

You start it with a single JavaScript call:

```javascript
new plenigo.Snippets(plenigoTransferToken, config).start();
```

---

## The transfer token flow

For security reasons, the Frisbii Media session string must never be exposed in frontend code. Snippets therefore use a **transfer token** — a one-time token derived from a session — instead of the session string directly.

**Flow:**

1. Your backend creates or retrieves a Frisbii Media **customer session** (via API or from the SSO `LoginSuccess` event)
2. Your backend exchanges the session for a **transfer token** via `POST /transferTokens`
3. Your frontend receives the transfer token and passes it to `plenigo.Snippets`

For the server-side steps see [Sessions & Transfer Tokens](/frisbii-media/docs/sessions-transfer-tokens).

> [!WARNING]
> **Session limits:** By default, each customer can have a maximum of 2 active sessions. Creating a third session will return an error — you must delete one of the existing sessions first. The session limit can be adjusted in the Frisbii Media backend.

---

## Starting Snippets

```plaintext
<div id="plenigoSnippets"></div>

<!-- please replace {your_companyId} with your companyId -->
<script src="https://static.frisbii-media-stage.com/web/v1/frisbii_media.min.js"
                                 data-company-id="{your_companyId}"
                                 data-lang="en"></script>
<script>
   // use Frisbii Media session to create transfer token: https://api.frisbii-media-stage.com/#operation/createTransferToken
   new plenigo.Snippets(plenigoTransferToken, {elementId: "plenigoSnippets"}).start();
</script>
```

---

## Opening a specific page

To skip the dashboard and open a specific section directly, use `.open()` with one of the available page constants:

```javascript
new plenigo.Snippets(plenigoTransferToken, { elementId: "plenigoSnippets" })
    .open(plenigo.CONSTS.SNIPPETS.PAYMENT_METHODS);
```

### Available page constants

| Constant | Page shown |
| --- | --- |
| `PERSONAL_DATA` | Personal data overview |
| `PERSONAL_DATA_ADDRESS` | Personal address |
| `PERSONAL_DATA_SETTINGS` | Account settings |
| `PERSONAL_DATA_PASSWORD` | Change password |
| `PERSONAL_DATA_PROTECTION` | Data protection settings |
| `ADDRESS_DATA` | Address data |
| `BILLING_ADDRESS_DATA` | Billing address |
| `DELIVERY_ADDRESS_DATA` | Delivery address |
| `ORDER` | Order history |
| `INVOICE` | Invoices |
| `DASHBOARD` | Overview dashboard |
| `SUBSCRIPTION` | Subscription list |
| `PAYMENT_METHODS` | Payment methods |
| `CREDIT_CARD` | Credit card management |
| `BANK_ACCOUNT` | Bank account management |
| `TERMS_AND_CONDITIONS` | Terms and conditions |
| `NEWSLETTER` | Newsletter preferences |
| `MULTI_USER_ACCOUNTS` | Multi-user account management |
| `OPT_IN` | Opt-in settings |

### Opening a subscription detail page directly

To take the customer directly to a specific subscription's detail view, pass the `subscriptionId` in the config:

```javascript
new plenigo.Snippets(plenigoTransferToken, {
    elementId: "plenigoSnippets",
    subscriptionId: 123456
}).start();
```

---

## Navigation options

You can hide or change the navigation layout using the `navigation` config option:

```javascript
new plenigo.Snippets(plenigoTransferToken, {
    elementId: "plenigoSnippets",
    navigation: plenigo.CONSTS.SNIPPET_NAVIGATION.VERTICAL
}).open(plenigo.CONSTS.SNIPPETS.PAYMENT_METHODS);
```

### Available navigation constants

| Constant | Behavior |
| --- | --- |
| `DEFAULT` | Horizontal navigation at the top (same as `HORIZONTAL`) |
| `HORIZONTAL` | Navigation displayed at the top of the portal |
| `VERTICAL` | Navigation displayed on the left side |
| `OFF` | Navigation hidden entirely |

---

## displaySettings: disabling user data management

If Frisbii Media is not your SSO provider, customers should manage their email, password, and two-factor settings in your own SSO system — not in the Frisbii Media portal. Use `displaySettings` to restrict or hide those sections.

Available values for each key: `SHOW`, `HIDE`, `VIEW` (visible but not editable), `EDIT`.

```javascript
let snippetConfig = {
    elementId: "plenigoSnippets",
    displaySettings: {
        SSO: {
            personalDetails: 'VIEW',   // Show but do not allow editing
            twoFactor: 'HIDE'          // Hide entirely
        }
    }
};
new plenigo.Snippets(plenigoTransferToken, snippetConfig).start();
```

---

## orderTiles: customising the dashboard

You can control which tiles appear on the dashboard overview and in what order using `orderTiles`. Only the tiles listed will be shown.

```javascript
let snippetConfig = {
    elementId: "plenigoSnippets",
    orderTiles: ['PERSONAL_DATA', 'PAYMENT', 'SUBSCRIPTIONS']
};
new plenigo.Snippets(plenigoTransferToken, snippetConfig).start();
```

### Available tile values

`PERSONAL_DATA`, `USER_ADMINISTRATION`, `PAYMENT`, `ADDRESS`, `INVOICES`, `SUBSCRIPTIONS`, `WALLETS`

---